/* =========================================================
   NORTHBOUND — animations.css
   Reveal, marquee, keyframes. All gated by prefers-reduced-motion.
   ========================================================= */

/* ---------- Scroll reveal (hidden ONLY when JS is present to un-hide) ---------- */
/* Gated behind .js so that with JS disabled/blocked/failed the page renders fully
   visible instead of a blank white screen. main.js also has a failsafe timeout. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* Stagger children of a revealed row via inline --i (set by JS) */
.js [data-reveal] { transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Hero line reveal (staggered fade-up) ---------- */
.js .hero__title .line {
  transform: translateY(42px);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  will-change: transform, opacity;
}
.js .hero__title.in .line { transform: none; opacity: 1; }
.js .hero__title .line:nth-child(2) { transition-delay: 0.12s; }

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

/* ---------- Background structure drift (one full tile = seamless loop) ---------- */
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(84px, 146px, 0); }
}

/* ---------- Float for wordmark mark idle (subtle) ---------- */
@keyframes pulse-mark {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.82); }
}

/* ---------- Reduced motion: collapse everything to static ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal],
  .hero__title .line { opacity: 1 !important; transform: none !important; transition: none !important; }

  .founder__photo .drape, .hero__photo .drape { display: none !important; }
  .founder__photo img, .hero__photo img { transform: none !important; }
  .hero__photo { transform: none !important; }

  .marquee__track { animation: none !important; transform: none !important; }
  body::before { animation: none !important; transform: none !important; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}