/* ═══════════════════════════════════════════
   UNIFIED ANIMATIONS — entrance + page-window load
   Part of #11 front-end unification.
   • Pure CSS (no JS dependency) → safe if JS fails.
   • Additive: does NOT override the .reveal scroll system.
   • Respects prefers-reduced-motion.
   ═══════════════════════════════════════════ */

:root {
  --anim-fast: 400ms;
  --anim-base: 600ms;
  --anim-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Page-window load animation ─────────────
   The hero fades + lifts in on every full page load.
   Runs automatically (targets .page-hero by class). */
.page-hero {
  animation: pageHeroIn var(--anim-base) var(--ease-out-expo) both;
}
@keyframes pageHeroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reusable entrance utilities ────────────
   Apply directly to above-the-fold static elements. */
.anim-fade-up  { animation: fadeUp  var(--anim-base) var(--ease-out-expo) both; }
.anim-fade-in  { animation: fadeIn  var(--anim-base) ease both; }
.anim-scale-in { animation: scaleIn var(--anim-base) var(--ease-spring) both; }

/* Staggered container: direct children animate in sequence.
   Pair with grids/lists for a polished cascade. */
.anim-stagger > * {
  animation: fadeUp var(--anim-base) var(--ease-out-expo) both;
}
.anim-stagger > *:nth-child(1) { animation-delay: 60ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 300ms; }
.anim-stagger > *:nth-child(n+6) { animation-delay: 360ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Lazy image soft reveal ─────────────────
   Global safety: any lazy <img> that finishes decoding
   gets a gentle fade so content never "pops". */
img[loading="lazy"] {
  animation: imgSoftIn var(--anim-fast) ease both;
}
@keyframes imgSoftIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* ── Accessibility: honor reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
  .page-hero,
  .anim-fade-up,
  .anim-fade-in,
  .anim-scale-in,
  .anim-stagger > *,
  img[loading="lazy"] {
    animation: none !important;
  }
}