/* poeira-em-redemoinho */
/* Poeira em Redemoinho — Web Cinematográfica Store
   Tokens: personalize no :root (contrato --fx-*).
   O JS cria um <canvas> filho e solta centenas de fragmentos em losango (carvão
   e vidro) que tremem devagar no escuro. Perto do cursor eles são puxados e
   giram em volta dele, e os que correm acendem. O rastro vem de pintar o fundo
   por cima a cada quadro com um pouco de transparência. Canvas 2D puro, zero
   dependência.
*/
:root{
  --fx-bg:#0a0a0c;          /* fundo (o rastro é pintado nesta cor: precisa ser opaca) */
  --fx-ink:#ededed;         /* texto do container */
  --fx-accent:#b4dcff;      /* brilho dos fragmentos que giram perto do cursor */
  --fx-muted:#7c7c7c;       /* texto auxiliar (contraste seguro em texto ≥1.2rem) */
  --fx-speed:1;             /* multiplica as durações: 2 = tudo na metade do ritmo; 0 congela */
  --fx-radius:12px;         /* raio herdado do kit — botões da demo */
  --fx-vidro:#f0f5ff;       /* cor dos fragmentos claros (3 em cada 10) */
  --fx-carvao:#505055;      /* cor dos fragmentos escuros (7 em cada 10) */
  --fx-densidade:1;         /* 0.2..2 — quantidade (1 = mil fragmentos numa tela cheia de computador) */
  --fx-raio:140px;          /* alcance do redemoinho em volta do cursor */
  --fx-giro:1;              /* 0..2 — força do redemoinho (0 = o cursor não mexe em nada) */
  --fx-rastro:0.18;         /* 0.05..1 — o quanto o rastro some por quadro (menor = rastro mais longo) */
  --fx-passeio:1;           /* 1 = sem mouse (celular, parado), um redemoinho invisível passeia sozinho; 0 = só com o mouse */
}

/* Root do efeito: containing block do canvas. Marque o container (hero,
   section, body) onde a poeira deve viver. */
.fx-poeira-em-redemoinho{
  position:relative;
  overflow:hidden;
  background:var(--fx-bg);
}

/* Canvas full-bleed atrás do conteúdo (z-index:0, pointer-events:none).
   O conteúdo do autor sobe pra z-index positivo no HTML (ver demo). */
.fx-poeira-em-redemoinho__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}

/* Fora da viewport (aplicado pelo JS via IntersectionObserver): o loop para;
   opacity:0 evita um quadro velho piscando na volta. */
.fx-poeira-em-redemoinho.fx-off .fx-poeira-em-redemoinho__canvas{
  opacity:0;
}

/* Reduced motion (contrato: compound obrigatório .fx-<slug>.fx-rm).
   O JS desenha UM quadro parado (a poeira espalhada, sem rastro) e para o
   loop; o cursor passa a ser ignorado. O CSS só garante o canvas visível. */
.fx-poeira-em-redemoinho.fx-rm .fx-poeira-em-redemoinho__canvas{
  opacity:1;
}
/* hero-reveal-cinematico */
/* Hero Reveal Cinemático — Web Cinematográfica Store
   Tokens: personalize no :root (contrato --fx-*). */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ea5420;
  --fx-muted:#7c7c7c;
  --fx-speed:1;            /* multiplicador global de duração */
  --fx-radius:12px;
  --fx-stagger:.09s;       /* intervalo entre palavras */
}

.fx-hero-reveal-cinematico{background:var(--fx-bg);color:var(--fx-ink)}
.fx-hero-reveal-cinematico__title{margin:0;font-weight:800;line-height:1.06;letter-spacing:-.02em}
.fx-hero-reveal-cinematico__word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fx-hero-reveal-cinematico__word-inner{display:inline-block;transform:translateY(112%);
  transition:transform calc(.7s * var(--fx-speed)) cubic-bezier(.19,1,.22,1)}
.fx-hero-reveal-cinematico__accent{color:var(--fx-accent)}
.fx-hero-reveal-cinematico__sub,
.fx-hero-reveal-cinematico__cta{opacity:0;transform:translateY(18px);
  transition:opacity calc(.6s * var(--fx-speed)) ease,transform calc(.6s * var(--fx-speed)) cubic-bezier(.19,1,.22,1)}
.fx-hero-reveal-cinematico__sub{color:var(--fx-muted)}
.fx-hero-reveal-cinematico__cta{display:inline-block;background:var(--fx-accent);color:#fff;
  text-decoration:none;font-weight:600;padding:.85em 1.7em;border-radius:var(--fx-radius)}

/* estado revelado (aplicado pelo JS com stagger) */
.fx-hero-reveal-cinematico.fx-in .fx-hero-reveal-cinematico__word-inner{transform:none}
.fx-hero-reveal-cinematico.fx-in .fx-hero-reveal-cinematico__sub,
.fx-hero-reveal-cinematico.fx-in .fx-hero-reveal-cinematico__cta{opacity:1;transform:none}

/* reduced motion: estado final visível, sem animação (contrato) */
.fx-hero-reveal-cinematico.fx-rm .fx-hero-reveal-cinematico__word-inner,
.fx-hero-reveal-cinematico.fx-rm .fx-hero-reveal-cinematico__sub,
.fx-hero-reveal-cinematico.fx-rm .fx-hero-reveal-cinematico__cta{transition:none;transform:none;opacity:1}
/* numeros-rolantes */
/* Números Rolantes — Web Cinematográfica Store
   Count-up estilo odômetro: cada dígito rola até o valor final.
   Tokens: personalize no :root (contrato --fx-*). */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ea5420;
  --fx-muted:#7c7c7c;
  --fx-speed:1;              /* multiplicador global de duração */
  --fx-radius:12px;
  --fx-digit-size:3rem;      /* font-size dos números (odômetro) */
}

/* Raiz do efeito — pinta fundo e cor de texto herdada (contrato --fx-bg / --fx-ink) */
.fx-numeros-rolantes{background:var(--fx-bg);color:var(--fx-ink)}

/* Container do NÚMERO (o comprador marca com esta classe cada KPI numérico) */
.fx-numeros-rolantes__num{
  display:inline-block;
  font-family:inherit;
  font-weight:800;
  font-size:var(--fx-digit-size);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--fx-ink);
  font-variant-numeric:tabular-nums;   /* dígitos com largura idêntica */
  white-space:nowrap;
}

/* Prefixo / sufixo / separadores / sinal negativo — estáticos, cor de acento */
.fx-numeros-rolantes__prefixo,
.fx-numeros-rolantes__sufixo,
.fx-numeros-rolantes__sep,
.fx-numeros-rolantes__sign{
  display:inline-block;
  height:1em;
  line-height:1;
  vertical-align:top;
  color:var(--fx-accent);
}

/* Coluna do dígito — janela de 1em (ALTURA EXPLÍCITA, não derivada de flex) */
.fx-numeros-rolantes__col{
  display:inline-block;
  height:1em;                          /* trap-height-percent: altura DEFINIDA aqui */
  line-height:1;
  overflow:hidden;
  vertical-align:top;
}

/* Fita — 10 dígitos empilhados, translateY move o dígito alvo pra janela */
.fx-numeros-rolantes__fita{
  display:block;
  transform:translateY(0);
  will-change:transform;
  transition:transform calc(1.6s * var(--fx-speed)) cubic-bezier(.16,1,.3,1);
}

/* Cada dígito — bloco de 1em de altura, largura idêntica via tabular-nums */
.fx-numeros-rolantes__digit{
  display:block;
  height:1em;
  line-height:1;
  text-align:center;
}

/* Reduced motion: dígitos direto no valor final, sem rolagem (contrato) */
.fx-numeros-rolantes.fx-rm .fx-numeros-rolantes__fita{
  transition:none;
}
/* faq-luminoso */
/* FAQ Luminoso — Web Cinematográfica Store
   Tokens: personalize no :root (contrato --fx-*). */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ea5420;
  --fx-muted:#7c7c7c;
  --fx-speed:1;
  --fx-radius:14px;
  --fx-glow-size:260px;      /* raio do halo radial que segue o mouse */
  --fx-glow-alpha:0.32;      /* opacidade do halo (0.10-0.45 é a faixa util) */
  --fx-glow-borda:1;       /* força da borda que acende perto do cursor (0 desliga) */
}

.fx-faq-luminoso{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--fx-ink);
}

.fx-faq-luminoso__item{
  position:relative;
  isolation:isolate;
  border-radius:var(--fx-radius);
  background:var(--fx-bg);
  border:1px solid rgba(26,37,67,.08);
  overflow:hidden;
}

/* Halo radial que segue o cursor.
   --fx-mx/--fx-my são atualizados pelo efeito.js via rAF (percentuais 0-100%).
   A cor é derivada do accent + alpha via color-mix — escolha proposital:
   mantém o argumento de venda "troca 1 var, muda tudo" (só o --fx-accent
   controla a cor; nada de token duplicado tipo --fx-glow-color-rgb). */
.fx-faq-luminoso__item::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(circle var(--fx-glow-size) at var(--fx-mx, 50%) var(--fx-my, 50%),
    color-mix(in srgb, var(--fx-accent) calc(var(--fx-glow-alpha) * 100%), transparent),
    transparent 70%);
  opacity:0;
  transition:opacity calc(.3s * var(--fx-speed)) ease;
  pointer-events:none;
  z-index:0;
}
.fx-faq-luminoso__item:hover::before{ opacity:1; }
/* Borda que acende perto do cursor: o mesmo halo, recortado num anel de 1px (máscara). */
.fx-faq-luminoso__item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background: radial-gradient(circle calc(var(--fx-glow-size) * .8) at var(--fx-mx, 50%) var(--fx-my, 50%),
    color-mix(in srgb, var(--fx-accent) calc(var(--fx-glow-borda) * 100%), transparent),
    transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0;
  transition:opacity calc(.3s * var(--fx-speed)) ease;
  pointer-events:none;
  z-index:2;
}
.fx-faq-luminoso__item:hover::after{ opacity:1; }

.fx-faq-luminoso__pergunta{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  letter-spacing:-.005em;
}
.fx-faq-luminoso__pergunta:focus-visible{
  outline:2px solid var(--fx-accent);
  outline-offset:-2px;
  border-radius:var(--fx-radius);
}

.fx-faq-luminoso__chevron{
  flex-shrink:0;
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--fx-accent);
  font-size:.75rem;
  line-height:1;
  transition:transform calc(.3s * var(--fx-speed)) ease;
  transform-origin:center;
}

/* Painel: grid-template-rows 0fr -> 1fr é a técnica canônica pra animar altura
   real sem max-height mágico. transiciona altura verdadeira do conteúdo. */
.fx-faq-luminoso__painel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows calc(.4s * var(--fx-speed)) ease;
}
.fx-faq-luminoso__resposta{
  min-height:0;
  overflow:hidden;
  padding:0 22px;
  color:var(--fx-muted);
  font-size:.96rem;
  line-height:1.6;
}
.fx-faq-luminoso__resposta > p{ margin:0 0 14px; }
.fx-faq-luminoso__resposta > p:last-child{ margin-bottom:20px; }

/* Estado aberto */
.fx-faq-luminoso__item--aberto .fx-faq-luminoso__painel{ grid-template-rows:1fr; }
.fx-faq-luminoso__item--aberto .fx-faq-luminoso__chevron{ transform:rotate(180deg); }

/* Reduced motion: sem transição em nada, glow desligado, chevron sem giro
   animado (aparece já rotacionado se aberto). Estado final visível — contrato. */
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__painel,
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__chevron,
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__item::before,
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__item::after{
  transition:none;
}
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__item::before,
.fx-faq-luminoso.fx-rm .fx-faq-luminoso__item::after{
  opacity:0;
  background:none;
}
/* texto-foco */
/* Texto Foco Verdadeiro — Web Cinematográfica Store
   Tokens: personalize no :root (contrato --fx-*). */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ff7a2f;          /* cor da moldura de foco */
  --fx-muted:#7c7c7c;
  --fx-speed:1;                 /* multiplicador de duração */
  --fx-radius:3px;              /* raio dos cantos da moldura */
  --fx-foco-blur:5px;           /* desfoque das palavras fora de foco */
  --fx-foco-glow:rgba(255,164,103,.7);  /* brilho da moldura */
}

.fx-texto-foco{position:relative;display:flex;flex-wrap:wrap;gap:1em;align-items:center;justify-content:center;outline:none;user-select:none}

.fx-texto-foco__word{
  position:relative;color:var(--fx-ink);font-size:clamp(42px,8vw,92px);font-weight:900;line-height:1;
  cursor:pointer;outline:none;user-select:none;filter:blur(var(--fx-foco-blur));
  transition:filter calc(.5s * var(--fx-speed)) ease, color calc(.5s * var(--fx-speed)) ease;
}
.fx-texto-foco__word--active{filter:blur(0)}

/* layout-ok: moldura absoluta e pointer-events:none — animar width/height aqui não causa
   reflow do conteúdo (é uma caixa própria, fora do fluxo). É a moldura que MEDE a palavra
   ativa, então largura/altura são o efeito em si; transform não substituiria. */
.fx-texto-foco__frame{
  position:absolute;top:0;left:0;box-sizing:content-box;border:none;pointer-events:none;opacity:0;
  transition:transform calc(.5s * var(--fx-speed)) ease, width calc(.5s * var(--fx-speed)) ease,
             height calc(.5s * var(--fx-speed)) ease, opacity calc(.5s * var(--fx-speed)) ease;
}
.fx-texto-foco__corner{
  position:absolute;width:1rem;height:1rem;border:3px solid var(--fx-accent);border-radius:var(--fx-radius);
  filter:drop-shadow(0 0 4px var(--fx-foco-glow));
}
.fx-texto-foco__corner--tl{top:-10px;left:-10px;border-right:none;border-bottom:none}
.fx-texto-foco__corner--tr{top:-10px;right:-10px;border-left:none;border-bottom:none}
.fx-texto-foco__corner--bl{bottom:-10px;left:-10px;border-right:none;border-top:none}
.fx-texto-foco__corner--br{right:-10px;bottom:-10px;border-left:none;border-top:none}

/* reduced motion: todas as palavras nítidas e a moldura assenta na ativa sem transição (contrato) */
.fx-texto-foco.fx-rm .fx-texto-foco__word{filter:blur(0)}
.fx-texto-foco.fx-rm .fx-texto-foco__frame{transition:none}