/* ==========================================================================
   Academia de Português — V3 · camada de movimento
   Regras: 150–500ms no geral, até ~800ms em entradas grandes.
   Nenhum conteúdo essencial depende destas regras (ver bloco reduced-motion).
   ========================================================================== */

/* ------------------------------------------------- reveal ao rolar a tela */
/* A classe .js-anim só é adicionada pelo JS: sem JS, nada fica escondido.   */
.js-anim [data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  will-change:opacity,transform;
}
.js-anim [data-reveal="left"]{transform:translate3d(-26px,0,0)}
.js-anim [data-reveal="right"]{transform:translate3d(26px,0,0)}
.js-anim [data-reveal="scale"]{transform:scale(.96)}
.js-anim [data-reveal].is-visible{opacity:1;transform:none}

/* stagger: cada filho entra em sequência, teto de ~480ms de atraso */
.js-anim [data-stagger]>*{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.js-anim [data-stagger].is-visible>*{opacity:1;transform:none}
.js-anim [data-stagger].is-visible>*:nth-child(1){transition-delay:.04s}
.js-anim [data-stagger].is-visible>*:nth-child(2){transition-delay:.12s}
.js-anim [data-stagger].is-visible>*:nth-child(3){transition-delay:.2s}
.js-anim [data-stagger].is-visible>*:nth-child(4){transition-delay:.28s}
.js-anim [data-stagger].is-visible>*:nth-child(5){transition-delay:.36s}
.js-anim [data-stagger].is-visible>*:nth-child(6){transition-delay:.44s}
.js-anim [data-stagger].is-visible>*:nth-child(n+7){transition-delay:.48s}

/* ------------------------------------------------------- fundo do hero */
.hero-orb-1{animation:orbDrift 26s var(--ease) infinite alternate}
.hero-orb-2{animation:orbDrift 32s var(--ease) infinite alternate-reverse}
.hero-orb-3{animation:orbPulse 18s ease-in-out infinite}
@keyframes orbDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-6%,5%,0) scale(1.14)}
}
@keyframes orbPulse{
  0%,100%{opacity:.26;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.16)}
}

/* varredura lenta de luz, evocando a iluminação do estúdio */
.hero-sweep{
  position:absolute;inset:-40% -20%;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  animation:sweep 11s linear infinite;
}
@keyframes sweep{
  from{transform:translate3d(-38%,0,0)}
  to{transform:translate3d(38%,0,0)}
}

/* entrada da primeira dobra (uma vez, curta) */
.hero-copy>*{animation:heroIn .7s var(--ease-out) both}
.hero-copy>*:nth-child(1){animation-delay:.04s}
.hero-copy>*:nth-child(2){animation-delay:.1s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.22s}
.hero-copy>*:nth-child(5){animation-delay:.28s}
.hero-copy>*:nth-child(6){animation-delay:.34s}
.hero-copy>*:nth-child(n+7){animation-delay:.4s}
/* A foto do hero é a candidata natural a LCP. Por isso ela entra só com
   transform: animar opacidade a partir de 0 tira o elemento da medição de
   LCP no Chrome e atrasa a métrica sem ganho visual real. */
.hero-visual{animation:heroVisualIn .6s var(--ease-out) both}
@keyframes heroIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}
@keyframes heroVisualIn{
  from{transform:translate3d(0,22px,0) scale(.985)}
  to{transform:none}
}

/* crachás flutuantes sobre a foto */
.hero-float-1{animation:float1 7s ease-in-out infinite}
.hero-float-2{animation:float1 9s ease-in-out infinite reverse}
@keyframes float1{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}

/* parallax leve da foto: o JS só escreve a variável --pl (desktop) */
.hero-photo-frame{transform:translate3d(0,var(--pl,0px),0);transition:transform .12s linear}

/* indicador de rolagem */
.scroll-cue i::after{animation:cueDot 1.9s var(--ease) infinite}
@keyframes cueDot{
  0%{transform:translateY(0);opacity:0}
  28%{opacity:1}
  70%{transform:translateY(13px);opacity:0}
  100%{transform:translateY(13px);opacity:0}
}

/* rotador de bancas do hero */
.banca-rotator .rot-shell b{transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
.banca-rotator .rot-shell b.is-leaving{opacity:0;transform:translateY(-90%)}

/* ------------------------------------------------------ microinterações */
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);
  opacity:0;transition:opacity .25s var(--ease);pointer-events:none;
}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.08s}
.btn-primary:hover{box-shadow:0 16px 40px rgba(185,214,53,.44),inset 0 1px 0 rgba(255,255,255,.5)}

/* CTA magnético: o JS aplica --tx/--ty apenas com ponteiro fino */
.btn[data-magnetic]{transform:translate3d(var(--tx,0),var(--ty,0),0)}
.btn[data-magnetic]:active{transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.975)}

/* contadores: leve destaque quando terminam */
.is-counting{color:var(--accent)!important;transition:color .4s var(--ease)}

/* pulso discreto no CTA fixo ao aparecer */
.mobile-cta.is-visible .btn-primary{animation:ctaPulse 2.6s var(--ease) 1.2s 2}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 12px 32px rgba(185,214,53,.34)}
  50%{box-shadow:0 12px 32px rgba(185,214,53,.34),0 0 0 8px rgba(185,214,53,.12)}
}

/* abertura suave do accordion */
.faq-list details[open] summary~*{animation:faqOpen .34s var(--ease-out)}
.syllabus-details[open] .syllabus-columns{animation:faqOpen .34s var(--ease-out)}
@keyframes faqOpen{
  from{opacity:0;transform:translate3d(0,-6px,0)}
  to{opacity:1;transform:none}
}

/* ================================================== prefers-reduced-motion */
/* Sem parallax, sem loops e sem entradas longas — tudo permanece visível.    */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js-anim [data-reveal],
  .js-anim [data-stagger]>*,
  .hero-copy>*,
  .hero-visual{opacity:1!important;transform:none!important}
  .hero-photo-frame{transform:none!important}
  .btn[data-magnetic]{transform:none!important}
  .hero-sweep,.hero-orb-1,.hero-orb-2,.hero-orb-3{animation:none!important}
  .hero-orb-3{opacity:.34}
  .scroll-cue i::after{animation:none!important;opacity:1}
  .banca-rotator .rot-shell{height:auto;overflow:visible}
  .banca-rotator .rot-shell b{position:static;opacity:1;transform:none}
  .banca-rotator .rot-shell b:not(.is-active){display:none}
}

/* Dispositivos sem hover (celular): nada depende de passar o mouse. */
@media (hover:none){
  .btn:hover{transform:none}
  .btn::after{display:none}
  .topic-grid a:hover,.banca-grid a:hover,.problem-card:hover,
  .testimonial-card:hover,.video-card:hover{transform:none}
  .btn:active,.topic-grid a:active,.banca-grid a:active,
  .problem-card:active,.testimonial-card:active{transform:scale(.985);transition-duration:.08s}
}

/* Em telas pequenas o movimento é mais curto e o blur, mais barato. */
@media (max-width:760px){
  .js-anim [data-reveal]{transform:translate3d(0,16px,0);transition-duration:.42s}
  .js-anim [data-stagger]>*{transition-duration:.36s}
  .hero-bg span{filter:blur(48px)}
  .hero-orb-3{display:none}
  .hero-sweep{animation-duration:16s;opacity:.6}
  .hero-photo-frame{transform:none!important}
  .hero-copy>*{animation-duration:.5s}
  .hero-visual{animation-duration:.55s}
}