/* motion-thunder.css · kit de motion aprendido do Grupo Thunder, ajustado às regras do projeto CLIENTES.
   Sem JS os elementos ficam visíveis (os estados iniciais só valem com html.m-js). */
:root{
  --m-ease:cubic-bezier(.22,1,.36,1);     /* a curva única das entradas (Thunder) */
  --m-ease-ui:cubic-bezier(.4,0,.2,1);    /* hover: regra do projeto */
  --m-ease-pop:cubic-bezier(.34,1.56,.64,1); /* leve passada, no lugar da mola */
  --m-dur:.7s;          /* fadeUp */
  --m-dur-item:.6s;     /* staggerItem, scaleIn */
  --m-y:18px;           /* Thunder usa 40px; regra do projeto: 10 a 20px */
  --m-y-item:14px;      /* Thunder usa 30px */
  --m-stagger:120ms;
  --m-stagger-start:150ms;
  --m-hover:180ms;
}

/* ---------- entradas ---------- */
.m-js [data-m="fade-up"]{opacity:0;transform:translate3d(0,var(--m-y),0)}
.m-js [data-m="scale-in"]{opacity:0;transform:scale(.85)}
.m-js [data-m="pop"]{opacity:0;transform:scale(.3)}
.m-js [data-m="stagger"] > [data-m-item]{opacity:0;transform:translate3d(0,var(--m-y-item),0)}

.m-js [data-m="fade-up"],
.m-js [data-m="scale-in"]{transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
.m-js [data-m="scale-in"]{transition-duration:var(--m-dur-item)}
.m-js [data-m="pop"]{transition:opacity .4s var(--m-ease),transform .6s var(--m-ease-pop)}
.m-js [data-m="stagger"] > [data-m-item]{
  transition:opacity var(--m-dur-item) var(--m-ease),transform var(--m-dur-item) var(--m-ease);
  transition-delay:calc(var(--m-stagger-start) + var(--i,0) * var(--m-stagger))}

.m-js [data-m].m-in,
.m-js [data-m="stagger"].m-in > [data-m-item]{opacity:1;transform:none}
/* depois da entrada, aposenta os atrasos para o hover responder na hora (mesma especificidade + 1) */
.m-js [data-m="stagger"].m-in.m-done > [data-m-item]{transition-delay:0s}

/* ---------- hover e toque ---------- */
.m-lift{transition:transform var(--m-hover) var(--m-ease-ui),box-shadow var(--m-hover) var(--m-ease-ui),border-color var(--m-hover) var(--m-ease-ui)}
.m-lift:hover{transform:translate3d(0,-10px,0) scale(1.02)}
.m-js [data-m="stagger"].m-in > .m-lift:hover,
.m-js [data-m].m-in.m-lift:hover{transform:translate3d(0,-10px,0) scale(1.02)}
.m-js [data-m="stagger"].m-in.m-done > .m-lift{transition:transform var(--m-hover) var(--m-ease-ui),box-shadow var(--m-hover) var(--m-ease-ui),border-color var(--m-hover) var(--m-ease-ui)}
.m-press{transition:transform var(--m-hover) var(--m-ease-ui)}
.m-press:hover{transform:translate3d(0,-2px,0)}
.m-press:active{transform:scale(.96);transition:transform 90ms var(--m-ease-ui)}

/* ---------- parallax: o JS escreve as variáveis ---------- */
[data-m-hero]{position:relative;overflow:hidden}
[data-m-hero-bg]{transform:scale(var(--m-s,1));will-change:transform}
[data-m-hero-content]{transform:translate3d(0,var(--m-ty,0px),0);opacity:var(--m-o,1);will-change:transform,opacity}
[data-m-parallax]{transform:translate3d(0,var(--m-py,0px),0) rotate(var(--m-pr,0deg));will-change:transform}

/* ---------- loops discretos (um por seção, pausados fora da tela) ---------- */
.m-float{animation:m-float 3s ease-in-out infinite;animation-delay:-.8s}
@keyframes m-float{50%{transform:translate3d(0,-10px,0)}}
.m-pulse{position:relative}
.m-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:m-pulse 2s ease-out infinite;animation-delay:-.6s;box-shadow:0 0 0 0 currentColor}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}
.m-cue{display:inline-flex;justify-content:center;width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;padding-top:6px;opacity:.7}
.m-cue i{width:3px;height:8px;border-radius:2px;background:currentColor;animation:m-cue 1.5s ease-in-out infinite}
@keyframes m-cue{50%{transform:translate3d(0,9px,0);opacity:.4}}
.m-off,.m-off *,.m-off::after,.m-paused *,.m-paused *::after,.m-paused *::before{animation-play-state:paused!important}

/* ---------- movimento reduzido: tudo no estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .m-js [data-m],.m-js [data-m="stagger"] > [data-m-item]{opacity:1!important;transform:none!important;transition:none!important}
  .m-lift,.m-lift:hover,.m-press,.m-press:hover,.m-press:active{transform:none!important;transition:none!important}
  .m-float,.m-pulse::after,.m-cue i{animation:none!important}
  [data-m-hero-bg],[data-m-hero-content],[data-m-parallax]{transform:none!important;opacity:1!important}
}