/* ============================================================================
   animations.css — scroll reveals, micro-motion, page transitions.
   EVERYTHING here is disabled / made instant under prefers-reduced-motion.
   ========================================================================== */

/* ---- Scroll reveal (JS adds .is-visible via IntersectionObserver) ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* staggered children: set --i index inline or via JS */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---- Hero text intro -------------------------------------------------- */
.hero__inner > * { animation: heroIn 800ms var(--ease-out) both; }
.hero__inner > *:nth-child(1) { animation-delay: 60ms; }
.hero__inner > *:nth-child(2) { animation-delay: 160ms; }
.hero__inner > *:nth-child(3) { animation-delay: 260ms; }
.hero__inner > *:nth-child(4) { animation-delay: 360ms; }
.hero__inner > *:nth-child(5) { animation-delay: 460ms; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---- Accent glow line (section dividers) ------------------------------ */
@keyframes shimmer { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.divider-glow::after { animation: shimmer 6s ease-in-out infinite; }

/* ---- Logo bolt pulse -------------------------------------------------- */
.nav__logo .bolt { filter: drop-shadow(0 0 0 transparent); transition: filter var(--t-med); }
.nav__logo:hover .bolt { filter: drop-shadow(0 0 6px var(--accent-glow)); }
@keyframes boltFlow { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: 0; } }

/* ---- Pulse dot (same-day response) ------------------------------------ */
.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 70%,100% { transform: scale(3); opacity: 0; } }

/* ---- Button shine on hover -------------------------------------------- */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 150% 0;
  opacity: 0; transition: opacity var(--t-fast);
}
.btn--primary:hover::after { opacity: 1; animation: shine 900ms var(--ease-out); }
@keyframes shine { to { background-position: -80% 0; } }

/* ---- Scroll-down cue -------------------------------------------------- */
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  width: 26px; height: 42px; border: 1.5px solid var(--border); border-radius: 14px;
  display: grid; justify-items: center; padding-top: 7px; z-index: 1; }
.scroll-cue::before { content: ""; width: 3px; height: 8px; border-radius: 3px; background: var(--accent);
  animation: scrollCue 1.8s var(--ease-in-out) infinite; }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---- Marquee (counties ticker) ---------------------------------------- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-7); width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500);
  color: var(--text-dim); display: inline-flex; align-items: center; gap: var(--sp-7); white-space: nowrap; }
.marquee__track span::after { content: "•"; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- View Transitions (page nav) -------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 220ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================================
   REDUCED MOTION — calm static fallback for all of the above
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > *, .hero__inner > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .scroll-cue, .pulse-dot::after { display: none; }
  @view-transition { navigation: none; }
}