/* ─────────────────────────────────────────────────────────────────────────────
   e2-kinetic-type.css — VYBLY hero kinetic typography enhancement
   Depends on: e2-kinetic-type.js (sets --mx, --my, .kt-ready, .kt-char-in,
               .kt-line2-in, .kt-sub-in, .kt-btn-in)
───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Initial visibility: hide animatable pieces until JS arms them ── */
.hero-content {
  --mx: 50%;
  --my: 50%;
}

/* The h1 starts hidden; JS makes it visible once split is ready */
.hero h1 {
  opacity: 0;
}
.hero h1.kt-ready {
  opacity: 1;
}

/* ── 2. Character wrappers emitted by the splitter ── */
.kt-line1-wrap {
  display: block;
  overflow: hidden;          /* masks the slide-up travel */
  padding-bottom: 0.06em;   /* prevent descender clip */
}

.kt-char {
  display: inline-block;
  will-change: transform, opacity;
  /* start state — JS removes this inline style on trigger */
  transform: translateY(110%) rotate(8deg);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Preserve whitespace character width */
.kt-char[data-space="true"] {
  display: inline-block;
  width: 0.32em;   /* explicit word gap — matches Unbounded at this weight */
}

.kt-char.kt-char-in {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

/* ── 3. Line-2 whole-line slide ── */
.hero h1 .line-2 {
  will-change: transform, opacity;
  transform: translateX(-20px);
  opacity: 0;
  margin-top: 0.1em;    /* breathing room between lines — keep in sync with base CSS */
  transition:
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    opacity   0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero h1 .line-2.kt-line2-in {
  transform: translateX(0);
  opacity: 1;
}

/* ── 4. Hero sub fade-up ── */
.hero-sub {
  will-change: transform, opacity;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    opacity   0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-sub.kt-sub-in {
  transform: translateY(0);
  opacity: 1;
}

/* ── 5. CTA button pop-in ── */
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  will-change: transform, opacity;
  transform: scale(0.88);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-actions .btn-primary.kt-btn-in,
.hero-actions .btn-ghost.kt-btn-in {
  transform: scale(1);
  opacity: 1;
}

/* ── 6. Cursor-tracking shimmer overlay on the h1 ── */
.hero h1 {
  position: relative;
}

.hero h1::after {
  content: '';
  position: absolute;
  inset: -24px;                /* slightly overshoots the headline bounds */
  pointer-events: none;
  border-radius: 4px;
  background: radial-gradient(
    circle 280px at var(--mx) var(--my),
    oklch(93% 0.27 122 / 0.06) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}

.hero h1.kt-shimmer-on::after {
  opacity: 1;
}

/* Keep char spans above shimmer */
.kt-line1-wrap,
.hero h1 .line-2 {
  position: relative;
  z-index: 1;
}

/* ── 7. Reduced-motion: everything appears immediately, no movement ── */
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .kt-char,
  .hero h1 .line-2,
  .hero-sub,
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero h1.kt-ready {
    opacity: 1;
  }

  .hero h1::after {
    display: none;
  }
}