/* ==========================================================================
   REVERON EMPIRE — Motion
   CSS handles entrances, hovers and ambient loops. GSAP (animations.js)
   handles scroll-linked storytelling. Everything is disabled under
   prefers-reduced-motion, and content is never hidden without JavaScript.
   ========================================================================== */

/* ---------- Hero entrance (CSS only — works without JS) ---------- */
@keyframes re-rise {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes re-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.hero__title .line__inner,
.page-hero__title .line__inner { animation: re-rise 1s var(--ease-out) both; }
.page-hero__title .line { overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line:nth-child(1) .line__inner,
.page-hero__title .line:nth-child(1) .line__inner { animation-delay: 150ms; }
.hero__title .line:nth-child(2) .line__inner,
.page-hero__title .line:nth-child(2) .line__inner { animation-delay: 260ms; }
.hero__title .line:nth-child(3) .line__inner,
.page-hero__title .line:nth-child(3) .line__inner { animation-delay: 370ms; }

.reveal-hero { animation: re-fade-up 900ms var(--ease-out) both; animation-delay: 520ms; }
.hero__eyebrow.reveal-hero,
.page-hero .eyebrow.reveal-hero { animation-delay: 60ms; }
.hero__aside.reveal-hero { animation-delay: 640ms; }
.hero__meta.reveal-hero { animation-delay: 900ms; }

/* ---------- Scroll reveals (staged only once main.js is running) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Directional micro-interactions ---------- */
/* Arrows leave to the right and re-enter from the left: movement, not scale. */
@keyframes re-arrow-through {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(110%); opacity: 0; }
  46% { transform: translateX(-110%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@media (hover: hover) {
  .btn:hover .btn__icon,
  .arrow-link:hover .arrow-link__icon { transform: none; animation: re-arrow-through 520ms var(--ease-out); }
}

/* ---------- Ambient loops ---------- */
@keyframes re-lane-flow { to { stroke-dashoffset: -48; } }
@keyframes re-lane-approach { to { stroke-dashoffset: 56; } }
@keyframes re-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes re-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.route-lines__lane { animation: re-lane-flow 2.6s linear infinite; }
.hero__fallback-road .is-lane { animation: re-lane-approach 1.6s linear infinite; }
.media-slot__lane { animation: re-lane-approach 1.4s linear infinite; }

.map-node__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: re-pulse 2.8s var(--ease-out) infinite;
}
.us-map__nodes circle:nth-of-type(4n + 1) { animation-delay: 0.7s; }
.us-map__nodes circle:nth-of-type(4n + 3) { animation-delay: 1.4s; }

/* ---------- Smooth anchor scrolling ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}