/* ============================================================================
   Motion — keyframes, scroll-reveal states, reduced-motion + no-JS fallbacks.
   Driven by /static/js/motion.js (IntersectionObserver). No external library.
   ============================================================================ */

/* ── scroll reveal ──────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-4) var(--ease-out),
              transform var(--dur-4) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── hero entrance (pure CSS, plays on load) ────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-enter {
  animation: rise 700ms var(--ease-out) both;
}
.hero-enter--badge   { animation-delay: 0ms; }
.hero-enter--title   { animation-delay: 80ms; }
.hero-enter--lede    { animation-delay: 180ms; }
.hero-enter--cta     { animation-delay: 260ms; }
.hero-enter--micro   { animation-delay: 340ms; }
.hero-enter--diagram { animation-delay: 450ms; }

.hero .horizon { animation: fade-in 1100ms var(--ease-out) both; }

/* ── pulsing dot (badges, build status) ─────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── route diagram ──────────────────────────────────────────────────────── */
@keyframes dash {
  to { stroke-dashoffset: 0; }
}
@keyframes node-glow {
  0%, 100% { filter: none; }
  40%      { filter: drop-shadow(0 0 6px rgba(221, 150, 54, 0.85)); }
}
@keyframes layer-blink {
  0%, 100% { opacity: 0.35; }
  45%      { opacity: 1; }
}

/* ── build console shimmer ──────────────────────────────────────────────── */
@keyframes shimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(420%); }
}

/* ── marquee ────────────────────────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── reduced motion: cut everything decorative ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none !important; transform: none !important; }
  .route-pulse { opacity: 0 !important; }
}