/**
 * split-text.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Site-wide text animation, ported from the HyperFly reference:
 *   reference/Reference website code/…_files/a_data/hyperfly-split_kmXY.js
 *   reference/Reference website code/…_files/a_data/hyperfly_kmXY.css (L1108-1136)
 *
 * Two effects:
 *   1. `.bw-split-text`   — scroll-scrubbed line-by-line "invert" fill.
 *                           Reference: SplitText(type:"lines") + gsap.to(
 *                           backgroundPositionX: 0, scrub: 1,
 *                           start "top 90%", end "bottom center").
 *   2. `.bw-split-in-*`   — per-character entrance on the element's own
 *                           `.page-header__title` / heading, staggered 0.02s
 *                           over 1.2s. Reference: SplitText(type:"chars,words").
 *
 * The reference hard-codes the fill colour per component. Here the gradient is
 * derived from `currentColor` instead, so the effect drops onto any heading on
 * any page without a per-selector colour rule. `-webkit-text-fill-color` is
 * used rather than `color: transparent` precisely so `currentColor` still
 * resolves to the element's real colour.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Text Invert With Scroll — `.bw-split-text`
   ═══════════════════════════════════════════════════════════════════════════ */
.bw-split-text > .bw-line {
  display: block;
  position: relative;
  background-size: 200% 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  will-change: background-position;
}

@supports (background-image: linear-gradient(to left, color-mix(in srgb, red 10%, transparent) 50%, red 50%)) {
  .bw-split-text > .bw-line {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to left,
      color-mix(in srgb, currentColor 14%, transparent) 50%,
      currentColor 50%
    );
  }

  /* body copy sits at a slightly higher ghost opacity in the reference (0.2) */
  p.bw-split-text > .bw-line,
  .sec-title__text.bw-split-text > .bw-line,
  .section-subtitle.bw-split-text > .bw-line {
    background-image: linear-gradient(
      to left,
      color-mix(in srgb, currentColor 22%, transparent) 50%,
      currentColor 50%
    );
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Character entrance — `.bw-split-in-*`
   reference gsap.set() start states, animated to x/y/rotateX 0 + opacity 1
   ═══════════════════════════════════════════════════════════════════════════ */
.bw-split-in-right,
.bw-split-in-left,
.bw-split-in-up,
.bw-split-in-down,
.bw-split-in-rotate,
.bw-split-in-scale,
.bw-split-in-fade {
  perspective: 400px;
}

.bw-word {
  display: inline-block;
  white-space: nowrap;
}

.bw-char {
  display: inline-block;
  will-change: transform, opacity;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-split-in-fade .bw-char   { opacity: 0; }
.bw-split-in-right .bw-char  { opacity: 0; transform: translateX(20px); }
.bw-split-in-left .bw-char   { opacity: 0; transform: translateX(-20px); }
.bw-split-in-up .bw-char     { opacity: 0; transform: translateY(20px); }
.bw-split-in-down .bw-char   { opacity: 0; transform: translateY(-20px); }
.bw-split-in-rotate .bw-char { opacity: 0; transform: rotateX(50deg); }
.bw-split-in-scale .bw-char  { opacity: 0; transform: scale(0.6); }

.bw-in .bw-char {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Hero banner content — reference "Hero Banner Content" timeline
   (lines rotateX -80 → 0, opacity 0 → 1, delay 0.7s, stagger 0.1s)
   ═══════════════════════════════════════════════════════════════════════════ */
.bw-hero-lines {
  perspective: 400px;
}

.bw-hero-line {
  display: block;
  transform-origin: top center -50px;
  opacity: 0;
  transform: rotateX(-80deg);
}

.bw-hero-in .bw-hero-line {
  opacity: 1;
  transform: rotateX(0deg);
  transition: opacity 1s ease, transform 1s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Reduced motion — render everything in its finished state
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bw-split-text > .bw-line {
    background-image: none !important;
    -webkit-text-fill-color: currentColor;
  }

  .bw-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .bw-hero-line {
    opacity: 1 !important;
    transform: none !important;
  }
}