/* ============================================================
   LavaWave — Motion & accessibility fallbacks
   Progressive enhancement model:
     · No JS            → everything visible (base.css defaults).
     · html.js          → pre-animation hidden states; JS animates in.
     · html.no-motion   → JS present but motion disabled (GSAP missing
                          OR prefers-reduced-motion) → force visible.
   ============================================================ */

/* Kinetic type — hidden base states (only when motion is live).
   Opacity ONLY — GSAP owns the transform, so % and px units never mix
   (a CSS translateY here would be parsed as a stray pixel value and
   leave the element offset forever). */
html.js:not(.no-motion) .hero-line-inner { opacity: 0; }
html.js:not(.no-motion) .manifesto-line .m-word { opacity: 0; }
html.js:not(.no-motion) .cap-index,
html.js:not(.no-motion) .cap-title-inner,
html.js:not(.no-motion) .cap-desc { opacity: 0; }

/* Continuous, tasteful ambient motion (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .hero-line:nth-child(2) .hero-line-inner { animation: waveFlow 9s ease-in-out infinite alternate; }
}
@keyframes waveFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Marquee: CSS-driven fallback when JS is off; JS takes over otherwise */
html:not(.js) .marquee-track { animation: marqueeSlide 32s linear infinite; }
@keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SAFETY NET: force all deferred content visible when motion is off ── */
html.no-motion .reveal,
html.no-motion .stagger > *,
html.no-motion .hero-line-inner,
html.no-motion .manifesto-line .m-word,
html.no-motion .cap-index,
html.no-motion .cap-title-inner,
html.no-motion .cap-desc {
  opacity: 1 !important;
  transform: none !important;
}
html.no-motion .cap-row::before { transform: scaleX(1) !important; }
/* nothing should look greyed-out when the travelling highlight can't run */
html.no-motion .cap-title { color: var(--text-bright) !important; }
html.no-motion .cap-index { color: var(--lava-orange) !important; }

/* ── prefers-reduced-motion: neutralize everything non-essential ── */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .stagger > *,
  html.js .hero-line-inner,
  html.js .manifesto-line .m-word,
  html.js .cap-index,
  html.js .cap-title-inner,
  html.js .cap-desc {
    opacity: 1 !important;
    transform: none !important;
  }
  .cap-row::before { transform: scaleX(1) !important; }
  .cap-title { color: var(--text-bright) !important; }
  .cap-index { color: var(--lava-orange) !important; }
  .principle-title { color: var(--text-bright) !important; }
  .marquee-track { animation: none !important; }
  .eyebrow-dot::after, .badge-pulse { animation: none !important; }
  .scroll-line::after { display: none !important; }
  .hero-line:nth-child(2) .hero-line-inner { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
    scroll-behavior: auto !important;
  }
}