/* ==========================================================================
   Nucleo Avalanche · camada de movimento
   Fica POR CIMA do layout "papel recortado" sem mudar layout, paleta nem fonte.
   Regras: cor solida sempre, so transform (translate/rotate/scale) e opacity,
   prefers-reduced-motion desliga tudo. Os valores finais de toda animacao sao
   identidade, entao o layout em repouso e exatamente o de styles.css.
   ========================================================================== */

/* ---------- fundo vivo (canvas atras de tudo, dentro do body) ---------- */
#m-bg{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:-1;pointer-events:none;display:block;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.m-bg-on #m-bg{opacity:1}
/* video tocando: o fundo congela e recua */
.m-bg-on.m-video-on #m-bg{opacity:.28;transition:opacity .6s var(--ease)}

/* ---------- entradas coreografadas ---------- */
@keyframes m-rise{
  from{opacity:0;translate:0 18px;rotate:-.7deg;scale:.985}
  to{opacity:1;translate:0 0;rotate:0deg;scale:1}
}
@keyframes m-slide{
  from{opacity:0;translate:-16px 0;rotate:-1.2deg}
  to{opacity:1;translate:0 0;rotate:0deg}
}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.m-wait{opacity:0}
.m-in{animation:m-rise .66s var(--ease) both;animation-delay:var(--m-d,0ms)}
.m-in-x{animation:m-slide .5s var(--ease) both;animation-delay:var(--m-d,0ms)}
/* o player entra so com opacidade: nada se mexe em cima do video */
.m-in.video-wrap,.m-in.skills-intro{animation-name:m-fade;animation-duration:.55s}

/* item ativo do menu: papel que assenta */
@keyframes m-pop{
  0%{scale:1}
  35%{scale:1.035;rotate:-.8deg}
  70%{scale:.992;rotate:.3deg}
  100%{scale:1;rotate:0deg}
}
@keyframes m-num{
  0%{rotate:0deg;scale:1}
  40%{rotate:-12deg;scale:1.18}
  100%{rotate:0deg;scale:1}
}
.nav-item.m-pop{animation:m-pop .55s var(--ease) both}
.nav-item.m-pop .num{animation:m-num .6s var(--ease) both}

/* ---------- hover e press com fisica ---------- */
.btn-primary,.btn-ghost,.btn-google,.btn-go,.btn-copy,.lf-done,.lf-star,.nav-item,
.skill-download,.skill-upgrade,.comm-activate,.comm-wa,.support-submit,.sched-confirm,
.pay-btn,.prem-offer-cta,.plan__cta,.naia-sales-cta,.nav-section-head{
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease),
    translate .32s var(--ease), scale .16s var(--ease), rotate .32s var(--ease);
}
.btn-primary:not(:disabled):active,.btn-ghost:active,.btn-google:active,.btn-go:active,
.btn-copy:active,.lf-done:active,.lf-star:active,.nav-item:active,.skill-download:active,
.skill-upgrade:active,.comm-activate:not(:disabled):active,.comm-wa:active,
.support-submit:not(:disabled):active,.sched-confirm:not(:disabled):active,.pay-btn:active,
.prem-offer-cta:active,.plan__cta:active,.naia-sales-cta:active,.nav-section-head:active{
  scale:.972;
}

/* cartoes que levantam como papel e inclinam na direcao do cursor */
.m-tilt{
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .2s var(--ease),
    translate .45s var(--ease), rotate .45s var(--ease), scale .2s var(--ease);
}
.m-tilt.m-hov{
  translate:0 -4px;
  rotate:var(--m-r,0deg);
  box-shadow:var(--m-sx,7px) var(--m-sy,11px) 0 rgba(78,48,23,.24), 1px 2px 2px rgba(78,48,23,.18);
}
.m-tilt:active{scale:.985}

/* rotulo do campo acompanha o foco */
.field label{transition:translate .3s var(--ease)}
.field:focus-within label{translate:3px 0}

/* ---------- esqueleto com brilho em cor solida ---------- */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:40%;
  background:var(--paper-cream);opacity:.6;
  transform:skewX(-18deg);
  animation:m-shimmer 1.35s var(--ease) infinite;
}
@keyframes m-shimmer{from{translate:0 0}to{translate:420% 0}}

/* ---------- celebracao ao concluir a aula ---------- */
@keyframes m-check{
  0%{scale:1;rotate:0deg}
  30%{scale:1.45;rotate:-14deg}
  60%{scale:.9;rotate:6deg}
  100%{scale:1;rotate:0deg}
}
@keyframes m-done{
  0%{scale:1}
  25%{scale:1.05}
  55%{scale:.985}
  100%{scale:1}
}
.lf-done.m-celebrate{animation:m-done .6s var(--ease) both}
.lf-done.m-celebrate .lf-check{animation:m-check .7s var(--ease) both}
@keyframes m-star{
  0%{scale:1}
  40%{scale:1.28}
  100%{scale:1}
}
.lf-star.m-star{animation:m-star .45s var(--ease) both;animation-delay:var(--m-d,0ms)}
.m-confetti{
  position:fixed;left:0;top:0;z-index:300;pointer-events:none;
  border-radius:2px;will-change:transform,opacity;
}

/* ---------- login: entrada marcante ---------- */
@keyframes m-art{
  from{opacity:0;translate:-28px 0;scale:1.03}
  to{opacity:1;translate:0 0;scale:1}
}
@keyframes m-drop{
  0%{opacity:0;translate:0 46px;rotate:5deg;scale:.93}
  60%{opacity:1;translate:0 -4px;rotate:-.6deg;scale:1.005}
  100%{opacity:1;translate:0 0;rotate:0deg;scale:1}
}
@keyframes m-float{
  from{translate:0 0}
  to{translate:0 -5px}
}
.m-login .login-art{animation:m-art 1.1s var(--ease) both}
.m-login .login-card{
  animation:rise .6s var(--ease) both, m-drop 1s var(--ease) .18s both,
    m-float 6.5s ease-in-out 1.4s infinite alternate;
}
.m-login .login-card:focus-within{animation-play-state:running, running, paused}
@media (max-width:980px){
  .m-login .login-card{animation:rise .6s var(--ease) both, m-drop .9s var(--ease) .1s both}
}

/* modal "esqueceu a senha": o cartao entra como papel */
.fp-modal.is-open .fp-card{animation:m-drop .6s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  #m-bg,.m-confetti{display:none !important}
  .m-wait{opacity:1 !important}
  .skeleton::after{display:none}
}