/* ============================================================
   motion.css — scroll reveals, hero entrance, ambient texture
   Purpose-driven motion only (see find-animation-opportunities pass).
   All motion degrades to instant under prefers-reduced-motion.
   ============================================================ */

/* ---------- SCROLL REVEAL ----------
   Hidden by attribute (works before JS marks children), revealed by
   .is-revealed. <noscript> below restores visibility without JS. */
[data-reveal],
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  /* will-change is applied by reveal.js only for the duration of the reveal,
     then cleared — so we don't keep dozens of promoted layers alive. */
}
[data-reveal].is-revealed,
[data-reveal-stagger] > .is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero image: a slightly richer reveal (scales down into place). */
.media-frame--hero[data-reveal] { transform: translateY(18px) scale(1.04); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.media-frame--hero[data-reveal].is-revealed { transform: none; }

/* ---------- HERO AMBIENT GLOW (aurora) ----------
   Decorative warm light that drifts slowly behind the hero. */
.hero { position: relative; isolation: isolate; }
.hero__media, .hero__content { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% -10%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(176, 106, 82, .18), transparent 70%),
    radial-gradient(34% 40% at 82% 22%, rgba(184, 167, 147, .28), transparent 72%),
    radial-gradient(46% 50% at 68% 82%, rgba(231, 221, 206, .40), transparent 70%);
  filter: blur(14px);
  animation: aurora-drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* ---------- FILM GRAIN ----------
   Fine paper-like texture over the page for editorial richness.
   Static (no motion), never intercepts pointer events. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- COUNT-UP ----------
   No layout shift while numbers tick (tabular-nums also set in base.css). */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- REDUCED MOTION ----------
   Show everything immediately; no drift, no grain motion (grain is static). */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > *,
  .media-frame--hero[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero::before { animation: none !important; }
}