/* ═══════════════════════════════════════════════════════════════
   MOTION — entrance effects & scroll reveals (shared, all pages)
   Gated behind html.motion-enabled (set by assets/motion.js), so
   content stays fully visible without JS or with reduced motion.
   Keyframe-based on purpose: pages define their own `transition`
   shorthands inline, and animations never clobber those.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html.motion-smooth {
    scroll-behavior: smooth;
  }
}

/* ─── Scroll reveals ───────────────────────────────────────────── */

.motion-enabled [data-reveal] {
  opacity: 0;
}

.motion-enabled [data-reveal].is-inview {
  opacity: 1;
  animation: motion-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.motion-enabled [data-reveal="fade"].is-inview {
  animation-name: motion-fade;
}

.motion-enabled [data-reveal="scale"].is-inview {
  animation-name: motion-scale;
}

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes motion-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes motion-scale {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}

/* ─── Hero entrance (plays when the page loader releases) ──────── */

.motion-enabled [data-hero-reveal] {
  opacity: 0;
}

.motion-enabled body:not(.is-loading) [data-hero-reveal] {
  opacity: 1;
  animation: motion-hero 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes motion-hero {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

/* full-bleed hero media (index): fade + settle instead of rise */
.motion-enabled body:not(.is-loading) [data-hero-reveal="media"] {
  animation-name: motion-hero-media;
  animation-duration: 1.4s;
}

@keyframes motion-hero-media {
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: none; }
}

/* ─── Nav slide-in after loader ────────────────────────────────── */

.motion-enabled body:not(.is-loading) .nav {
  animation: motion-nav 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes motion-nav {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}