/* ============================================================
   ZMG GROUP — css/animations.css
   Reveal-on-scroll utilities and shared keyframes.
   Every animation here has a purpose: guide attention, create
   hierarchy or give feedback. No idle/decorative loops.
   Base = hidden state; .is-in = revealed. GSAP upgrades these
   in js/animations.js when available; it works without it too.
   ------------------------------------------------------------ */

/* ---------- Reveal (single elements) ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="scale"]{transform:scale(.95)}

/* ---------- Reveal (staggered children) ---------- */
[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(1){transition-delay:.04s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.10s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.22s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.28s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.34s}
[data-stagger].is-in>*:nth-child(7){transition-delay:.40s}
[data-stagger].is-in>*:nth-child(8){transition-delay:.46s}
[data-stagger].is-in>*:nth-child(9){transition-delay:.52s}
[data-stagger].is-in>*:nth-child(10){transition-delay:.58s}
[data-stagger].is-in>*:nth-child(11){transition-delay:.64s}
[data-stagger].is-in>*:nth-child(12){transition-delay:.70s}
[data-stagger].is-in>*:nth-child(13){transition-delay:.76s}

/* ---------- Clip reveal (media) ---------- */
.mask-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-out)}
.mask-reveal.is-in{clip-path:inset(0 0 0 0)}

/* ---------- Shared keyframes (used by main.js / data) ---------- */
@keyframes hero-line{to{transform:translateY(0)}}
@keyframes cue{0%{top:-50%}100%{top:100%}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes hero-grid{to{background-position:64px 64px,64px 64px}}
@keyframes wiz-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------
   Everything above is neutralised by prefers-reduced-motion in
   responsive.css, so the page is fully readable with motion off.
   ------------------------------------------------------------------ */