/* ════════════════════════════════════════════════
   12 — ANIMATIONS
   Fade-in, stagger, mask reveal, count-up, parallax
   ════════════════════════════════════════════════ */

/* Base fade-in (kept from old main.css) */
.fade-in {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Stagger via custom property */
.fade-in[data-delay="1"] { transition-delay: 0.08s; }
.fade-in[data-delay="2"] { transition-delay: 0.16s; }
.fade-in[data-delay="3"] { transition-delay: 0.24s; }
.fade-in[data-delay="4"] { transition-delay: 0.32s; }
.fade-in[data-delay="5"] { transition-delay: 0.4s; }
.fade-in[data-delay="6"] { transition-delay: 0.48s; }

/* Stagger via index — set --i on parent of children */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stagger.visible > * { opacity: 1; transform: translateY(0); }

/* Mask reveal — for feature section photos */
.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.3, 1);
}
.mask-reveal.in-view { clip-path: inset(0 0 0 0); }

/* Hero parallax (applied via JS scroll listener) */
.hero-composite__portrait { will-change: transform; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .stagger > *,
  .mask-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}