/* Doors Atelier: fonte de display da área autenticada.
   Mesma origem que o landing.css (Google Fonts, família "Barlow"), para não haver duas faces
   com o mesmo nome. Importado só pelo esqueleto da área autenticada e pelas páginas de auth. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800;900&display=swap');

/* ============================================================
   Momentos assinatura e materiais do Atelier.
   Tudo sob .app-theme (nunca toca na homepage) e tudo com alternativa para "reduzir movimento".
   ============================================================ */

/* ---------- Brasa (Ember): gradiente vivo em malha laranja ----------
   Três focos radiais que derivam devagar; --ex/--ey seguem o cursor (components/doors/ember.tsx).
   @property permite animar os ângulos e posições sem JavaScript. */
@property --ember-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ember-x { syntax: "<percentage>"; inherits: true; initial-value: 78%; }
@property --ember-y { syntax: "<percentage>"; inherits: true; initial-value: 20%; }

.app-theme .ember {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}
.app-theme .ember::before,
.app-theme .ember::after {
  content: "";
  position: absolute;
  inset: -30%;
  will-change: transform;
}
.app-theme .ember::before {
  background:
    radial-gradient(36% 46% at var(--ember-x) var(--ember-y), rgb(255 106 61 / var(--ember-o1, 0.55)), transparent 70%),
    radial-gradient(30% 40% at calc(var(--ember-x) - 22%) calc(var(--ember-y) + 38%), rgb(224 74 28 / var(--ember-o2, 0.38)), transparent 72%),
    radial-gradient(24% 30% at calc(var(--ember-x) + 8%) calc(var(--ember-y) + 62%), rgb(255 177 132 / var(--ember-o3, 0.22)), transparent 70%);
  filter: blur(18px);
  transition: --ember-x 1.2s cubic-bezier(0.22, 1, 0.36, 1), --ember-y 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  animation: ember-drift 18s ease-in-out infinite alternate;
}
/* Grão de papel (3%): dá matéria à faixa escura. Só aqui. */
.app-theme .ember::after {
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes ember-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(2%, -2%, 0) rotate(-4deg) scale(1.02); }
}
.app-theme .ember[data-intensity="soft"] { --ember-o1: 0.32; --ember-o2: 0.22; --ember-o3: 0.14; }
.app-theme .ember[data-intensity="strong"] { --ember-o1: 0.75; --ember-o2: 0.5; --ember-o3: 0.3; }
.app-theme.dark .ember { --ember-o1: 0.7; --ember-o2: 0.46; --ember-o3: 0.26; }
.app-theme .ember[data-paused="true"]::before { animation-play-state: paused; }

/* Borda de Brasa (cartão Premium): conic que roda devagar à volta do cartão. */
@property --ember-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.app-theme .ember-border {
  position: relative;
  isolation: isolate;
}
.app-theme .ember-border::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ember-angle), rgb(var(--line)) 0deg, #ff6a3d 70deg, #ffb184 110deg, rgb(var(--line)) 180deg, rgb(var(--line)) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ember-spin 6s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes ember-spin { to { --ember-angle: 360deg; } }

/* ---------- Spotlight (GlowCard): a borda/superfície ilumina-se sob o cursor ---------- */
.app-theme .glow-card { position: relative; }
.app-theme .glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--go, 0);
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-color, rgb(255 85 32 / 0.10)), transparent 70%);
  transition: opacity 0.4s ease;
}
.app-theme.dark .glow-card { --glow-color: rgb(255 106 61 / 0.12); }

/* ---------- Porta ---------- */
.app-theme .door-swing,
.door-swing {
  animation: door-swing 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}
@keyframes door-swing {
  from { transform: rotateY(-4deg); }
  to { transform: rotateY(-34deg); }
}

/* ---------- Carregamento: barra indeterminada (a "pega" laranja a percorrer a régua) ---------- */
.loader-track { position: relative; overflow: hidden; }
.loader-track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: hsl(var(--primary));
  animation: loader-track 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
/* Vai e volta sempre dentro da régua (40% de largura → até 150% = encosta à direita). */
@keyframes loader-track {
  from { transform: translateX(0); }
  to { transform: translateX(150%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Parada mas visível: a barra fica a meio, o texto anuncia o estado. */
  .loader-track::after { animation: none; transform: translateX(75%); }
}

/* ---------- Carimbo ---------- */
@keyframes stamp-hit {
  0% { opacity: 0; transform: scale(1.9) rotate(-14deg); filter: blur(2px); }
  55% { opacity: 1; transform: scale(0.94) rotate(-8deg); filter: blur(0); }
  75% { transform: scale(1.03) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
/* Tinta de carimbo: falhas irregulares (como tinta real), sem imagem externa. */
.app-theme .stamp-ink {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='44'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.3'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='44'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.3'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
}
.app-theme .stamp-hit { animation: stamp-hit 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Recibo a sair da ranhura */
@keyframes receipt-out {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
  to { clip-path: inset(0 0 0 0); transform: translateY(0); }
}
.app-theme .receipt-out { animation: receipt-out 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Brilho de folha metálica (selo Fundador / plano ativado): um só passe de luz. */
@keyframes foil-pass {
  from { background-position: -160% 0; }
  to { background-position: 260% 0; }
}
.app-theme .foil {
  background-image: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.65) 48%, rgb(255 214 190 / 0.5) 52%, transparent 65%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: foil-pass 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* ---------- Ícones Doors: micro-animações (em hover do grupo ou quando ativos) ---------- */
.app-theme .di-anim { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); transform-box: fill-box; }
.app-theme .group:hover .di-home-door,
.app-theme .di-active .di-home-door { transform: scaleX(0.78); transform-origin: left center; }
.app-theme .group:hover .di-refresh,
.app-theme .di-refresh.di-spin { transform: rotate(180deg); transform-origin: center; }
.app-theme .group:hover .di-arrow { transform: translateX(2px); }
.app-theme .group:hover .di-arrow-ur { transform: translate(1.5px, -1.5px); }
.app-theme .group:hover .di-lift { transform: translateY(-1.5px); }
.app-theme .group:hover .di-dots circle { animation: di-dot 0.9s ease-in-out infinite; }
.app-theme .di-dots circle:nth-child(2) { animation-delay: 0.12s; }
.app-theme .di-dots circle:nth-child(3) { animation-delay: 0.24s; }
@keyframes di-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.app-theme .di-draw { stroke-dasharray: 40; stroke-dashoffset: 0; }
.app-theme .di-draw-in { animation: di-draw 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes di-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* Ilustrações de planta: desenham-se ao entrar. */
.app-theme .bp-draw path,
.app-theme .bp-draw line,
.app-theme .bp-draw rect,
.app-theme .bp-draw circle,
.app-theme .bp-draw polyline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: bp-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.app-theme .bp-draw .bp-late { animation-delay: 0.5s; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }

/* Explosão de partículas (guardar): 6 pontos laranja que saem do centro. */
@keyframes burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(0.2); opacity: 0; } }
.app-theme .burst-dot { animation: burst 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ---------- Transições de página e de elemento partilhado (View Transitions) ---------- */
@keyframes page-enter { from { opacity: 0.5; transform: translateY(6px); } }
.app-theme .page-enter { animation: page-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-group(*) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Reduzir movimento: tudo instantâneo ou só opacidade ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-theme .ember::before,
  .app-theme .ember-border::before,
  .door-swing,
  .app-theme .door-swing,
  .app-theme .foil,
  .app-theme .page-enter,
  .app-theme .di-anim,
  .app-theme .group:hover .di-dots circle,
  .app-theme .burst-dot { animation: none !important; transition: none !important; }
  .app-theme .stamp-hit,
  .app-theme .receipt-out { animation: fade-in-simple 0.2s ease both !important; clip-path: none !important; }
  .app-theme .bp-draw path,
  .app-theme .bp-draw line,
  .app-theme .bp-draw rect,
  .app-theme .bp-draw circle,
  .app-theme .bp-draw polyline { animation: none !important; stroke-dashoffset: 0 !important; }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}
@keyframes fade-in-simple { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Impressão ("Guardar como PDF"): só o conteúdo marcado ---------- */
@media print {
  body.app-theme { background: #fff !important; color: #1c1917 !important; }
  .app-theme [data-print-hide],
  .app-theme [data-sidebar="sidebar"],
  .app-theme header.sticky,
  .app-theme nav[aria-label="Navegação principal"] { display: none !important; }
  .app-theme main { padding: 0 !important; }
  .app-theme .ember { display: none !important; }
}

/* ---------- Guardar na Inspiração: partículas que saltam do marcador ---------- */
.app-theme .save-particle {
  margin: -3px 0 0 -3px;
  animation: save-burst 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes save-burst {
  from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(-22px) scale(0.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-theme .save-particle { display: none; }
}

/* ---------- Passos de um fluxo (pedido de orçamento): slide que sabe a direção ---------- */
/* Nunca parte de opacidade 0: num separador em segundo plano a animação pode ficar parada. */
.app-theme .step-in-fwd { animation: step-in-fwd 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-theme .step-in-back { animation: step-in-back 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes step-in-fwd { from { transform: translateX(28px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes step-in-back { from { transform: translateX(-28px); opacity: 0.35; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-theme .step-in-fwd, .app-theme .step-in-back { animation: none; }
}

/* Paywall: os pedidos bloqueados pousam em leque (uma vez); começam visíveis (0.35), nunca a 0. */
@keyframes locked-in {
  from { opacity: 0.35; transform: translateY(18px) rotate(0deg); }
  to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}
.app-theme .locked-card {
  transform: rotate(var(--r, 0deg));
  animation: locked-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
/* Valor que muda (plano/periodicidade): sobe 4px e acende. Feedback de estado, 220 ms. */
@keyframes value-tick {
  from { opacity: 0.35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-theme .value-tick { display: inline-block; animation: value-tick 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .app-theme .locked-card,
  .app-theme .value-tick { animation: none !important; }
}

/* Onboarding: a UI de cada passo pousa sobre a casa (começa visível a 0.35, nunca a 0). */
@keyframes ob-in {
  from { opacity: 0.35; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.app-theme .ob-in { animation: ob-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 180ms); }
@media (prefers-reduced-motion: reduce) {
  .app-theme .ob-in { animation: none !important; }
}
/* A casa vive em fundo preto: as bordas esbatem-se para a cena escura (sem retângulo à vista). */
.obra-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}