/* FODL SHIFT — the pivot statement between the problems grid and the topic banners.
   Full-bleed lockup: FODL upright over SHIFT in synthesized italic, the bottom of
   SHIFT filled brand yellow as you scroll, a dimmed storyboard photo behind it.

   Pinned with CSS sticky rather than a ScrollTrigger pin — same pattern as the
   vaxel CTA (.about-block.for-cta / .about-sticky-block in vaxel-depth.css), which
   keeps GSAP to property scrubbing only and stays out of Lenis's way. */

.fsh-section{background-color:#0A0A0A;height:250vh;position:relative}
.fsh-sticky{height:100vh;justify-content:center;align-items:center;display:flex;position:sticky;top:0;overflow:hidden}

/* --- background ---
   The image is oversized vertically so the parallax drift (yPercent -8 -> 8) never
   exposes an edge. Grayscale + dim because the source is warm-toned and this has to
   read as texture under the type, not as a photograph. */
.fsh-bg{position:absolute;inset:-10% 0;pointer-events:none}
.fsh-bg-img{object-fit:cover;filter:grayscale(.8) contrast(1.05) brightness(1.15);width:100%;height:100%;display:block}
.fsh-veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%, #0a0a0a66 0%, #0a0a0ad1 62%, #0a0a0af7 100%),
    #0a0a0ab3}

/* --- lockup ---
   Sized in vw on purpose: fixed rem stepped by breakpoint stops holding the comp's
   proportion once the viewport moves (the depth-section statements learned this the
   hard way). Comp targets: FODL ~71% of the frame wide, SHIFT ~83%, the pair filling
   ~73% of the frame's height. The vh term in the min() is what enforces that last
   number — on a wide, short window (1920x950) the vw sizes alone push SHIFT off the
   bottom of the viewport, so whichever axis is tighter wins. */
.fsh-lockup{z-index:2;flex-flow:column;align-items:center;width:90vw;display:flex;position:relative}
.fsh-word{color:#fff;font-family:"Funnel Display",sans-serif;font-weight:800;line-height:.82;letter-spacing:-.045em;text-transform:none;white-space:nowrap;margin:0}
.fsh-fodl{font-size:min(29vw,46.5vh)}
.fsh-shift{font-size:min(30vw,48vh);letter-spacing:-.05em;transform:skewX(-9deg);position:relative}

/* --- yellow fill ---
   A second copy of the word sits over the first, bottom-anchored inside a clip box
   whose height GSAP scrubs 0 -> 36%. Animating a height keeps the cut a straight
   horizontal line (skewX leaves horizontals horizontal) and avoids tweening
   clip-path strings. Both copies must share every metric or the fill drifts. */
.fsh-shift-text{display:block}
.fsh-shift-clip{position:absolute;inset:auto 0 0 0;height:0;display:block;overflow:hidden}
.fsh-shift-text.is-fill{color:#EEB603;position:absolute;bottom:0;left:0}

/* --- bottom gradient tail ---
   Rises to a black/yellow blend that now runs all the way to the section's bottom
   edge: the FODL WAY section below opens with the mirrored gradient (.fway-seam in
   fodl-way.css), so the two sections read as one glow centered on the seam. */
.fsh-glow{opacity:0;z-index:1;position:absolute;inset:auto 0 0 0;height:46vh;pointer-events:none;
  background:linear-gradient(to top, #eeb60347 0%, #eeb60300 78%)}

@media screen and (max-width:991px){
  .fsh-section{height:210vh}
  .fsh-shift{transform:skewX(-7deg)}
}

@media screen and (max-width:767px){
  /* The comp's proportion is desktop-only — at phone widths it leaves the screen
     mostly empty, so the lockup takes more of the viewport (same call as the hero). */
  .fsh-section{height:180vh}
  .fsh-lockup{width:92vw}
  .fsh-fodl{font-size:min(34vw,46.5vh)}
  .fsh-shift{font-size:min(36vw,48vh)}
  .fsh-glow{height:32vh}
}