/* ============================================================
   KINETIC WORD BAND  (Automated Tasks / Priorities Extraction)
   Scroll-scrubbed on desktop AND mobile: the section is a tall pinned
   track whose scroll progress drives the animation (title slides in ->
   word-wall -> flip -> resolved title -> drifts down and fades out).
   Driven by /js/landing-kinetic.js.

   Sticky needs a non-scroll-container ancestor chain: hero-lindy.css sets
   body.lp{overflow-x:clip}; this file uses overflow:clip (never hidden).
   ============================================================ */

.kx {
  position: relative;
  overflow-x: clip;
  padding: 0;                            /* flush with the section above - no top gap */
  margin-top: -96px;                     /* absorb the previous section's bottom padding */
  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 55%, #ffffff 100%);
}

/* the bright title rides in a wrapper so it can slide down from the top on its
   own, while the faint word-wall behind it always stays full (no dead space) */
.kx-hero-wrap {
  display: inline-block;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);         /* own compositor layer -> no repaint flicker as it moves */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Default (no-JS / reduced-motion): a normal centred band. */
.kx-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 56vh, 560px);
}

/* Scroll-scrubbed mode (JS adds .kx-scroll): tall track + pinned stage.
   Mobile gets a longer track so there's more scroll to feel the effect. */
.kx.kx-scroll { height: 320vh; }         /* long track -> the effect plays out slowly */
.kx.kx-scroll .kx-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;                        /* STABLE viewport height: unlike dvh it does
                                            not resize when mobile Safari hides its URL
                                            bar mid-scroll -> no jump/flicker on the
                                            first scroll gesture */
  min-height: 0;
  overflow: clip;                        /* clip the marquee / drift at the viewport */
}

.kx-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  will-change: transform, opacity;       /* JS slides/fades it on enter + exit */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.kx.kx-scroll .kx-stage { height: 100%; }

.kx-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 10px);
  will-change: transform;
}

.kx-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 44px);
  white-space: nowrap;
  will-change: transform;
}

.kx-word {
  font-family: var(--font-display, 'Hanken Grotesk', system-ui, sans-serif);
  font-weight: 800;
  /* small enough that the longest title fits narrow (mobile) widths as one
     line; row count adapts in JS to fill the height */
  font-size: clamp(22px, min(6vw, 12vh), 92px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #cdd6ee;                        /* faint periwinkle - reads as a word-wall */
  display: inline-block;
  will-change: opacity, transform;
  -webkit-user-select: none;
          user-select: none;
}
.kx-word.kx-hero {
  color: var(--al-blue, #335CFF);        /* the surviving title */
  transform-origin: center center;
  will-change: transform;                /* stable GPU layer -> scaled title stays
                                            crisp instead of shimmering as it grows */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* No-JS / reduced-motion static state: the two phrases, no motion. */
.kx-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  text-align: center;
}

/* Dark variant: add class "kx--dark" to <section class="lp-sec kx">. */
.kx.kx--dark { background: #0b0e17; }
.kx.kx--dark .kx-word { color: rgba(255, 255, 255, 0.14); }
.kx.kx--dark .kx-word.kx-hero { color: #ffffff; }

/* Mobile: keep the scroll-scrub, a longer track so the same finger-flick covers
   less of the animation -> it reads slower and the smoothing has room to glide. */
@media (max-width: 820px) {
  .kx.kx-scroll { height: 460vh; }
  .kx { margin-top: -68px; }              /* previous section's mobile bottom padding */

  /* Mobile Safari anti-flicker: the edge-fade mask forces WebKit to repaint the
     whole stage every frame as the words move under it, and promoting 150+ words
     /rows to their own layers thrashes the compositor. Drop both on mobile - the
     stage still animates, just without the extra per-frame compositing cost. */
  .kx-stage { -webkit-mask-image: none; mask-image: none; }
  .kx-row, .kx-word { will-change: auto; }
}