/* ==========================================================================
   VANTIX SYSTEMS — animations.css
   Initial states and helpers for the GSAP/ScrollTrigger effects.

   Everything hidden here is revealed by JavaScript. If scripts fail, or the
   visitor prefers reduced motion, the `no-motion` class (set on <html>) and the
   `anim-failsafe` class restore the final state so content is never lost.
   ========================================================================== */

/* Word-mask headline reveal (split by core.js) */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.split-word__inner {
  display: inline-block;
  will-change: transform;
}

/* Headlines wait for the split before showing */
html.js [data-split]:not(.is-split) {
  opacity: 0;
}

/* Hero supporting elements wait for the intro */
html.js [data-hero-item] {
  opacity: 0;
}

/* Scrubbed statement words */
.scrub-word {
  display: inline;
}

/* Approach steps (dim until the progress line reaches them) */
html.js .step {
  opacity: 0.35;
  transition: opacity 0.7s var(--ease);
}
html.js .step.is-in {
  opacity: 1;
}

/* ---------- Failsafes ---------- */
/* !important: these must beat the hiding rules above regardless of specificity */
html.no-motion [data-split],
html.anim-failsafe [data-split] {
  opacity: 1 !important;
}

html.no-motion [data-hero-item],
html.anim-failsafe [data-hero-item] {
  opacity: 1 !important;
}

html.no-motion .step,
html.anim-failsafe .step {
  opacity: 1 !important;
}

html.no-motion .steps__line span {
  transform: none;
}

html.no-motion .scroll-progress {
  transition: none;
}

html.no-motion .site-header,
html.anim-failsafe .site-header {
  opacity: 1 !important;
  transform: none !important;
}

html.no-motion .hero__more,
html.no-motion .hero__card,
html.anim-failsafe .hero__more,
html.anim-failsafe .hero__card {
  opacity: 1 !important;
  transform: none !important;
}