/* motion.css — Reveal system, scroll-driven animations, and reduced-motion rules */
/* NOT for design tokens (tokens.css) or component layout styles (main.css) */

/* ---------- Reveal system ---------- */
/* Elements with [data-reveal] start hidden and settle in when they enter the viewport. */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal=""], [data-reveal="fade-up"] { transform: translateY(22px); }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="scale-in"] { transform: scale(0.94); }
[data-reveal="slide-left"] { transform: translateX(28px); }
[data-reveal="slide-right"] { transform: translateX(-28px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger steps: transition-delay = step * 70ms */
[data-reveal-delay="1"] { transition-delay: 70ms; }
[data-reveal-delay="2"] { transition-delay: 140ms; }
[data-reveal-delay="3"] { transition-delay: 210ms; }
[data-reveal-delay="4"] { transition-delay: 280ms; }
[data-reveal-delay="5"] { transition-delay: 350ms; }
[data-reveal-delay="6"] { transition-delay: 420ms; }
[data-reveal-delay="7"] { transition-delay: 490ms; }
[data-reveal-delay="8"] { transition-delay: 560ms; }

/* ---------- Hero entrance (runs on page load) ---------- */
.hero__kicker, .hero__role, .hero__chips, .hero__logos, .hero__actions, .hero__media {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-in 0.8s var(--ease-out) forwards;
}
.hero__kicker { animation-delay: 0.05s; }
.hero__role { animation-delay: 0.35s; }
.hero__chips { animation-delay: 0.45s; }
.hero__logos { animation-delay: 0.55s; }
.hero__actions { animation-delay: 0.65s; }
.hero__media { animation-delay: 0.5s; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Headline words rise one by one (spans injected by script.js) */
.hero__title .word {
  opacity: 0;
  transform: translateY(0.5em);
  animation: hero-word 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.1s + var(--word-i, 0) * 90ms);
}
@keyframes hero-word {
  to { opacity: 1; transform: translateY(0); }
}
/* If JS did not split words, show the title normally */
.hero__title:not(.is-split) { opacity: 1; }

.hero__scroll-cue { animation: hero-in 0.8s var(--ease-out) 1s forwards; opacity: 0; }
.hero__scroll-cue svg { animation: cue-bounce 1.8s ease-in-out 1.8s infinite; }
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Marquee ---------- */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ---------- Scroll-driven enhancement (modern browsers only) ---------- */
@supports (animation-timeline: view()) {
  .hero .dot-pattern {
    animation: dots-drift linear both;
    animation-timeline: view(block);
    animation-range: exit 0% exit 100%;
  }
  @keyframes dots-drift {
    to { transform: translateY(60px); }
  }
}

/* ---------- Reduced motion: show everything, stop all movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__kicker, .hero__role, .hero__chips, .hero__logos, .hero__actions,
  .hero__media, .hero__scroll-cue { opacity: 1; transform: none; animation: none; }
  .hero__title .word { opacity: 1; transform: none; animation: none; }
  .timeline-entry::before { transform: scaleY(1); }
  .timeline-entry::after { transform: scale(1); }
  .testimonials-row { animation: none !important; }
}