/* =========================================================================
   palco-fx.css — a LUZ DE PALCO que acompanha quem está olhando.

   Três efeitos, um mundo só (o palco que o herói já tem):
     1. canhão seguidor: um foco de luz na cor do skin segue o mouse dentro
        dos fatos, dos passos e dos planos (React Bits "Spotlight Card" /
        21st.dev "Glowing Effect", portados pra CSS puro + 1 variável);
     2. letreiro: uma luz corre a borda do plano Pro, como as lâmpadas de um
        letreiro de show (React Bits "Star Border");
     3. ímã: o botão principal chega um fio perto do mouse (React Bits
        "Magnet") — a mola mora no palco-fx.js.

   Carrega DEPOIS de tudo (tema-novo.css e celular.css). Não usa ::before nem
   ::after dos cartões: o `.plano.pro::before` já é a barrinha de cima e o
   `.faq-item summary::after` é o "+". Os efeitos vivem em <span> que o JS
   põe no fim do cartão, com aria-hidden.

   Regras da casa (as do movimento.css): o que MOVE fica atrás de
   (hover:hover) and (pointer:fine) e de prefers-reduced-motion:no-preference.
   Quem pede menos movimento vê o letreiro parado e nenhum foco.
   ========================================================================= */

/* ------------------------------------------------------ 1. CANHÃO SEGUIDOR
   O foco é um radial-gradient centrado em (--mx, --my), que o JS atualiza
   no máximo uma vez por quadro. z-index:-1 dentro de um contexto isolado:
   pinta POR CIMA do fundo do cartão e POR BAIXO do texto. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fx-spot{position:relative;isolation:isolate}
  .fx-spot > .fx-luz{
    position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
    background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),
               color-mix(in oklab, var(--accent) 15%, transparent), transparent 62%);
    opacity:0;
    transition:opacity .45s var(--vivo);
  }
  .fx-spot:hover > .fx-luz{opacity:1}
  /* no claro o accent já é escuro: o foco precisa de menos tinta */
  :root[data-tema="claro"] .fx-spot > .fx-luz{
    background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),
               color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
  }
}

/* ------------------------------------------------------------ 2. LETREIRO
   Anel de 1px (a máscara recorta o miolo) com um conic-gradient girando: a
   "lâmpada" que corre a borda. O ângulo é uma propriedade registrada pra
   animar liso; navegador sem @property vê o anel parado, que já marca o
   plano recomendado. */
@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.plano.pro{position:relative}
.plano.pro > .fx-letreiro{
  position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  padding:2px;
  /* a lampada: cauda na cor do skin, miolo branco, e o brilho em volta (drop-shadow segue a mascara) */
  background:conic-gradient(from var(--fx-ang),
    transparent 0deg 215deg,
    color-mix(in oklab, var(--accent) 85%, transparent) 285deg,
    var(--accent2) 320deg,
    #fff 337deg,
    transparent 349deg);
  filter:drop-shadow(0 0 7px var(--accent2));
  -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, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){
  .plano.pro > .fx-letreiro{animation:fx-letreiro 8s linear infinite}
}
@keyframes fx-letreiro{to{--fx-ang:360deg}}

/* a mesma lampada no botao principal do heroi (21st.dev / Magic UI "Shimmer Button"): o letreiro so' aparece nos
   dois lugares onde a pessoa decide — o botao de comecar e o plano Pro. Perimetro curto, volta mais rapida. */
.bt.fx-borda{position:relative}
.bt.fx-borda > .fx-letreiro{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--fx-ang), transparent 0deg 230deg,
    color-mix(in oklab, #fff 55%, transparent) 300deg, #fff 336deg, transparent 350deg);
  -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, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){
  .bt.fx-borda > .fx-letreiro{animation:fx-letreiro 4.5s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .bt.fx-borda > .fx-letreiro{display:none}
}
@media (prefers-reduced-motion:reduce){
  .plano.pro > .fx-letreiro{background:color-mix(in oklab, var(--accent) 40%, transparent)}
}

/* ---------------------------------------------------------------- 3. ÍMÃ
   O JS escreve `translate` (propriedade própria), NÃO `transform`: o hover
   (-1.5px) e o :active do movimento.css continuam valendo por cima. */
.fx-ima{will-change:translate}

/* ======================================================================
   EFEITOS ESPECIAIS (palco-fx.js v3) — todos só existem quando o JS roda e
   quem visita não pediu menos movimento (o JS nem cria os elementos).
   ====================================================================== */

/* ------------------------------------------------ TÍTULO DO HERÓI (Blur Text)
   a rede do h1 escondido mora no <head> (inline); aqui só a palavra */
.fx-w{display:inline-block}

/* ------------------------------------------------ TÍTULOS (Scroll Reveal) */
@media (prefers-reduced-motion:no-preference){
  .fx-h2 .fx-w{opacity:0;filter:blur(10px);transform:translateY(.42em);
    transition:opacity .75s var(--mola),filter .75s var(--mola),transform .75s var(--mola);
    transition-delay:calc(var(--i,0) * 55ms)}
  .fx-h2.fx-vis .fx-w{opacity:1;filter:blur(0);transform:none}
}

/* ------------------------------------------------ TRILHA DOS PASSOS (Timeline) */
.rail{position:relative;isolation:isolate}
.fx-trilha{position:absolute;width:2px;margin-left:-1px;z-index:-1;pointer-events:none;
  background:var(--hair)}
.fx-trilha-luz{position:absolute;inset:0;transform-origin:50% 0;transform:scaleY(0);
  background:linear-gradient(180deg,transparent,var(--accent) 10%,var(--accent2));
  box-shadow:0 0 14px var(--accent2)}
.fx-trilha-ponta{position:absolute;left:50%;top:0;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:#fff;opacity:0;transition:opacity .25s ease;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent2) 45%,transparent),0 0 22px 6px var(--accent2)}
/* no celular o passo empilha (número em cima, texto embaixo): o fio cortaria o texto — só o número acende */
@media (max-width:820px){ .fx-trilha{display:none} }
.step.fx-aceso .n{-webkit-text-stroke-color:var(--n-contorno-aceso)}
.step .n{transition:-webkit-text-stroke-color .35s ease,text-shadow .35s ease}
.step.fx-aceso .n{text-shadow:0 0 22px color-mix(in oklab,var(--accent2) 45%,transparent)}

/* ------------------------------------------------ FAIXA (Scroll Velocity) */
.fx-faixa{position:relative;overflow:hidden;padding:30px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-faixa-trilho{display:flex;width:max-content;will-change:transform}
.fx-faixa-lote{display:flex;align-items:center;gap:30px;padding-right:30px;flex:none}
.fx-faixa span{font-size:clamp(28px,4.6vw,60px);font-weight:800;letter-spacing:-.035em;
  line-height:1.1;white-space:nowrap;color:var(--forte,var(--fg))}
.fx-faixa span.fx-vazado{color:transparent;-webkit-text-stroke:1.2px var(--n-contorno-aceso,var(--accent))}
.fx-faixa svg{flex:none;fill:var(--accent);filter:drop-shadow(0 0 8px var(--accent2))}

/* ------------------------------------------------ RAIOS + POEIRA (Light Rays) */
.fx-raios,.fx-poeira{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.fx-raios{mix-blend-mode:screen;opacity:.8}
.palco.fx-raios-on .luzes{display:none}
.palco:not(.fx-raios-on) > .fx-raios,.palco:not(.fx-raios-on) > .fx-poeira{display:none}

/* ------------------------------------------------ LUMINÁRIA (Lamp) */
.fim > .wrap{position:relative;z-index:1}
.fx-lampada{position:absolute;left:50%;top:0;width:min(820px,100%);height:280px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(180deg,#000 35%,transparent);mask:linear-gradient(180deg,#000 35%,transparent)}
.fx-cone{position:absolute;top:0;width:50%;height:100%;opacity:0;filter:blur(6px);
  transition:opacity 1.2s var(--mola),transform 1.2s var(--mola)}
.fx-cone.e{right:50%;transform-origin:100% 0;transform:scaleX(.3);
  background:conic-gradient(from 180deg at 100% 0%,color-mix(in oklab,var(--accent2) 70%,transparent) 0deg,
    transparent 62deg,transparent 360deg)}
.fx-cone.d{left:50%;transform-origin:0 0;transform:scaleX(.3);
  background:conic-gradient(from 90deg at 0% 0%,transparent 0deg 28deg,
    color-mix(in oklab,var(--accent2) 70%,transparent) 90deg,transparent 90.5deg)}
.fx-fio{position:absolute;top:0;left:50%;width:36%;height:2px;border-radius:2px;
  transform:translateX(-50%) scaleX(.25);background:color-mix(in oklab,var(--accent2) 60%,#fff);
  box-shadow:0 0 22px 5px var(--accent2);transition:transform 1.2s var(--mola)}
.fx-halo{position:absolute;top:-50px;left:50%;width:48%;height:130px;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in oklab,var(--accent2) 55%,transparent),transparent);
  filter:blur(12px);opacity:0;transition:opacity 1.2s var(--mola)}
.fx-lampada.fx-acesa .fx-cone{opacity:.55;transform:none}
.fx-lampada.fx-acesa .fx-fio{transform:translateX(-50%) scaleX(1)}
.fx-lampada.fx-acesa .fx-halo{opacity:.85}
:root[data-tema="claro"] .fx-lampada.fx-acesa .fx-cone{opacity:.28}

/* ------------------------------------------------ FAÍSCA (Click Spark) */
.fx-faisca{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}

/* ------------------------------------------------ INCLINAÇÃO (Tilted Card) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .fatos,.planos{perspective:1100px}
  .fato.fx-spot,.plano.fx-spot{will-change:rotate}
}

/* ------------------------------------------------ PALCO EM OUTRA TELA (entrar / criar conta)
   a tela pede a luz com data-fx-palco; os canvases ficam ATRÁS do conteúdo */
[data-fx-palco]{position:relative;isolation:isolate;overflow:hidden}
[data-fx-palco] > .fx-raios,[data-fx-palco] > .fx-poeira{z-index:-1}

/* ------------------------------------------------ ABAS DESLIZANTES (Animated Tabs) */
@media (prefers-reduced-motion:no-preference){
  .abas.fx-seg-on{position:relative;isolation:isolate}
  .abas.fx-seg-on > .fx-seg{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;border-radius:9px;
    background:var(--fg);box-shadow:0 2px 10px #0000002e;
    transition:transform .36s cubic-bezier(.23,1,.32,1),width .36s cubic-bezier(.23,1,.32,1)}
  .abas.fx-seg-on > button.sel{background:transparent}
  .abas.fx-seg-on > button{transition:color .2s ease}
}