/* ═══════════════════════════════════════════════════
   ZimZet Animations — CSS
   GPU-composited transforms only (opacity + transform).
   No layout/paint triggers.
   ═══════════════════════════════════════════════════ */

/* ── Base hidden state ── */
.zz-animate {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── Animation variants (hidden states) ── */
.zz-fade-up      { transform: translateY(28px); }
.zz-fade-down    { transform: translateY(-28px); }
.zz-fade-left    { transform: translateX(32px); }
.zz-fade-right   { transform: translateX(-32px); }
.zz-fade-in      { transform: none; }
.zz-zoom-in      { transform: scale(0.92); }
.zz-zoom-subtle  { transform: scale(0.97); }

/* ── Revealed state ── */
.zz-animate.zz-visible {
  opacity: 1;
  transform: none;
  will-change: auto;          /* release GPU layer after animation */
}

/* ── Transition (applied only when element is about to animate) ── */
.zz-animate.zz-ready {
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Stagger delays (children within a group) ── */
.zz-stagger > .zz-animate:nth-child(1)  { transition-delay: 0s; }
.zz-stagger > .zz-animate:nth-child(2)  { transition-delay: 0.08s; }
.zz-stagger > .zz-animate:nth-child(3)  { transition-delay: 0.16s; }
.zz-stagger > .zz-animate:nth-child(4)  { transition-delay: 0.24s; }
.zz-stagger > .zz-animate:nth-child(5)  { transition-delay: 0.32s; }
.zz-stagger > .zz-animate:nth-child(6)  { transition-delay: 0.40s; }
.zz-stagger > .zz-animate:nth-child(7)  { transition-delay: 0.48s; }
.zz-stagger > .zz-animate:nth-child(8)  { transition-delay: 0.56s; }

/* ── Slower variant for hero/large elements ── */
.zz-animate.zz-slow.zz-ready {
  transition-duration: 0.75s;
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .zz-animate,
  .zz-animate.zz-ready {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}