/* Efeitos de movimento da TEXUS, adaptados do site do MamaLabs (GSAP + ScrollTrigger).
   A base é sempre VISÍVEL. Só fica escondido sob html.fx, que o portão do <head> põe
   e o efeitos.js tira se algo falhar. Com "menos movimento", o portão não põe o fx. */

/* ===== estados de entrada (só sob html.fx; .fx-in marca o que já entrou) ===== */
html.fx :is(.hero-copy,.credentials,.benefit-grid,.steps-grid,.faq-questions,.faq,.stats,.chips,.mini,.phead .stack,.wins,.demo-tabs,.closing-layout,.about,.film,.band .stack,.signup .stack,.lp-perks,.feats)>:not(.fx-in),
html.fx :is(.section-heading,.demo-panel,.video-frame,.video-layout>.stack,.founder-layout>.stack,.faq-layout>.stack,.tight .wrap>.stack,.bg-white .wrap>.stack,.mod-text,.mask,.pc-controls,.promo,#pcards,.cmp-wrap,.fiscal,.ask,.signup form,.lp-hero h1,.lp-video,.lp-count,.lp-card,.lp-sign):not(.fx-in){opacity:0;transform:translateY(22px)}
html.fx .credentials>:not(.fx-in),html.fx .chips>:not(.fx-in){transform:translateY(14px)}
html.fx .product-stage:not(.fx-in){opacity:0;transform:translateY(28px) scale(.985)}
html.fx .flow>:not(.fx-in){opacity:0;transform:translateY(16px)}

/* fluxo (sistema): a linha de cada etapa se preenche em sequência */
.flow>div::after{content:"";position:absolute;top:-3px;left:0;right:0;height:3px;background:var(--cy-btn);transform:scaleX(var(--fill,0));transform-origin:left center;pointer-events:none}
html:not(.fx) .flow>div::after{display:none}

/* abas da página inicial: barra de tempo da aba ativa (como o passo a passo do MamaLabs) */
.demo-tabs button{position:relative;overflow:hidden;transition:background .25s ease,color .25s ease,border-color .25s ease}
.fx-tabbar{position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:3px;background:var(--grad);transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none}
.demo-tabs button[aria-selected=true] .fx-tabbar{opacity:1}

/* brilho que segue o cursor nos blocos de chamada final */
.closing-section,.band{position:relative;overflow:hidden}
.closing-section>.wrap,.band>.wrap{position:relative;z-index:1}
.fx-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;z-index:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,40%),var(--glow,rgba(255,255,255,.38)),transparent 62%)}
.band .fx-glow{--glow:rgba(0,200,255,.20)}

/* foto da fundadora: aproximação suave na rolagem */
.founder-layout>img,.founder img{will-change:transform}

/* ===== interações (só para quem não pediu menos movimento) ===== */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background .15s,box-shadow .2s,color .15s,transform .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary:hover{box-shadow:0 14px 30px -12px rgba(0,169,221,.7)}
  /* a transição de transform só vale depois da entrada (.fx-in), para não brigar com o GSAP;
     os cartões de planos só ganham sombra, porque o simulador os redesenha a cada clique */
  .pcard{transition:box-shadow .3s ease}
  .pcard:hover{box-shadow:0 30px 60px -32px rgba(0,60,100,.45)}
  :is(.win,.chips a,.feat):is(.fx-in,html:not(.fx) *){transition:transform .3s ease,box-shadow .3s ease,color .2s}
  .feat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(0,60,100,.45)}
  .win:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(11,16,32,.35)}
  .chips a:hover{transform:translateY(-2px)}
  .text-link{transition:color .2s,text-underline-offset .2s}
  .text-link:hover{text-underline-offset:8px}
  /* telas que rolam sozinhas: param enquanto o mouse está em cima */
  .win.scroll:hover img,.win.scroll:focus-within img{animation-play-state:paused}
  /* menu do celular abre deslizando */
  .nav ul.open{animation:fxDrop .22s ease-out}
  /* bolinha "ao vivo" do item Lançamento e anel do botão do WhatsApp */
  .nav ul a.lanc-nav::before{animation:fxPulse 2.2s infinite}
  .wa{animation:fxWa 2.6s ease-in-out infinite}
  .wa:hover{animation-play-state:paused}
  /* brilho que passa pela palavra em destaque */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hero-copy h1 span,.gt{background:linear-gradient(92deg,#007caa,#0098c7 35%,#005a9e 55%,#0098c7 75%,#007caa);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fxShim 6s linear infinite}
  }
}
@keyframes fxDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(0,200,255,.55)}70%{box-shadow:0 0 0 7px rgba(0,200,255,0)}100%{box-shadow:0 0 0 0 rgba(0,200,255,0)}}
@keyframes fxWa{0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,0)}50%{box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 0 9px rgba(37,211,102,.22)}}
@keyframes fxShim{to{background-position:200% center}}

/* impressão: tudo aparece */
@media print{html.fx *{opacity:1!important;transform:none!important}}