/*
 * scrubber-fade — the dark scrim at the top of the video scrubber, easing the
 * cut from the black section above into the brighter video.
 *
 * Two problems with a plain black→transparent linear-gradient: the eye sees a
 * band where the ramp ends (a linear ramp has a kink at 0 — Mach band), and a
 * scrim that sits outside the sticky stage scrolls away while the stage stays.
 *
 * So: (1) the gradient is an eased ramp (smootherstep, zero slope at both
 * ends) — no visible edge; (2) the element lives INSIDE the scrubber
 * container, so mount() lifts it onto the sticky stage, and it dissolves with
 * the scrub progress instead of sliding out of frame.
 *
 * Webflow: keep the existing .dark-fade-scrubber element, but move it into
 * the #hero-scrubber container (first child). Height stays a Webflow setting.
 * --fade-end: progress (0..1) at which the scrim is fully gone. 0.16 ≈ the
 * first ~1350 px of the 8400 px desktop scrub.
 */
#hero-scrubber .dark-fade-scrubber {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none; z-index: 1; /* above video + embers, below captions (z 2) */
  --fade-end: 0.16;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.998) 6.25%,
    rgb(0 0 0 / 0.984) 12.5%,
    rgb(0 0 0 / 0.951) 18.75%,
    rgb(0 0 0 / 0.896) 25%,
    rgb(0 0 0 / 0.82) 31.25%,
    rgb(0 0 0 / 0.725) 37.5%,
    rgb(0 0 0 / 0.616) 43.75%,
    rgb(0 0 0 / 0.5) 50%,
    rgb(0 0 0 / 0.384) 56.25%,
    rgb(0 0 0 / 0.275) 62.5%,
    rgb(0 0 0 / 0.18) 68.75%,
    rgb(0 0 0 / 0.104) 75%,
    rgb(0 0 0 / 0.049) 81.25%,
    rgb(0 0 0 / 0.016) 87.5%,
    rgb(0 0 0 / 0.002) 93.75%,
    rgb(0 0 0 / 0) 100%);
  opacity: clamp(0, 1 - var(--scrubber-progress, 0) / var(--fade-end), 1);
}

/* Mobile + tablet portrait (≤ 991px = Webflow tablet breakpoint = scrubber
 * `breakpoint: 992`): the scrim becomes the permanent dark ground behind the
 * text block. It does not dissolve. It is solid black only as far down as the
 * video's top edge needs (fit: 'bottom' puts that edge at 18–20lvh on phones;
 * --scrim-solid keeps a margin), then eases out ACROSS the text — the copy
 * sits on the fading glow, not on flat black, like the mockups.
 * Tune: --scrim-solid = where the fade starts (never below the video edge),
 * --scrim-ramp = how long it takes. */
@media (max-width: 991px) {
  #hero-scrubber .dark-fade-scrubber {
    --scrim-solid: 21vh; --scrim-solid: 21lvh;
    --scrim-ramp: 17vh; --scrim-ramp: 17lvh;
    height: calc(var(--scrim-solid) + var(--scrim-ramp));
    opacity: 1;
    background: linear-gradient(to bottom,
    #000 0,
    #000 var(--scrim-solid),
    rgb(0 0 0 / 0.998) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.0625),
    rgb(0 0 0 / 0.984) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.125),
    rgb(0 0 0 / 0.951) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.1875),
    rgb(0 0 0 / 0.896) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.25),
    rgb(0 0 0 / 0.820) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.3125),
    rgb(0 0 0 / 0.725) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.375),
    rgb(0 0 0 / 0.616) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.4375),
    rgb(0 0 0 / 0.500) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.5),
    rgb(0 0 0 / 0.384) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.5625),
    rgb(0 0 0 / 0.275) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.625),
    rgb(0 0 0 / 0.180) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.6875),
    rgb(0 0 0 / 0.104) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.75),
    rgb(0 0 0 / 0.049) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.8125),
    rgb(0 0 0 / 0.016) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.875),
    rgb(0 0 0 / 0.002) calc(var(--scrim-solid) + var(--scrim-ramp) * 0.9375),
    rgb(0 0 0 / 0.000) calc(var(--scrim-solid) + var(--scrim-ramp) * 1));
  }
}

/* Tablet portrait (768–991px): same treatment as phones - the 9:16 mobile video
 * fills the whole stage. scrubber.js anchors it at the bottom (fit: 'bottom',
 * inline styles, hence !important); on a 3:4 tablet that would push the watch
 * (starts at ~45 % of the frame) up to ~27 lvh, into the caption block. So the
 * tablet uses a centred cover crop instead: the frame loses ~12 % top and
 * bottom (both outside the safe zone) and the watch sits at ~43 lvh, below the
 * captions. Applies to the <video> and the WebCodecs canvas (direct child of
 * the sticky stage; the ember canvas sits deeper). */
@media (min-width: 768px) and (max-width: 991px) {
  /* Top scrim, tuned by eye (Sebastian, 2026-09-09): no solid band, just the
   * ramp - element height = -12 + 58 = 46lvh. The negative solid value is
   * valid CSS: stops placed before 0 are clamped to 0 by the spec, so the
   * gradient starts ~21 percent into the ramp - the top edge is alpha 0.984
   * (the 1 / .998 stops collapse onto 0). -14 showed a faint edge against
   * the black section above (alpha 0.95); -12 does not. */
  #hero-scrubber .dark-fade-scrubber {
    --scrim-solid: -12vh; --scrim-solid: -12lvh;
    --scrim-ramp: 58vh; --scrim-ramp: 58lvh;
  }
  #hero-scrubber video,
  #hero-scrubber > div > canvas {
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important;
    transform: none;
    object-fit: cover !important;
    object-position: 50% 50%;
  }
}

/* Mobile + tablet portrait: a second, smaller scrim at the BOTTOM of the stage,
 * easing the video's lower edge into the black backstory section that follows.
 * Webflow: .dark-fade-scrubber-bottom is a plain div inside #hero-scrubber, so
 * mount() lifts it onto the sticky stage like the top scrim. Display (none on
 * desktop), position, height (17vh) and z-index are Webflow settings; only the
 * gradient lives here.
 * Curve: NOT the symmetric smootherstep of the top scrim. The dark part should
 * cost as little video as possible: no solid seam at all (only the very bottom
 * row is black), then a steep quintic ease-out (alpha = (1-t)^5) - half
 * transparent after ~1/8 of the height, under 10 percent after 3/8, then a
 * long soft tail. Tune the tail length with the element height in Webflow,
 * the steepness with the exponent here. (A two-part knee/tail curve with a
 * 0.22 plateau was tried 2026-09-09 and judged too faint.) */
#hero-scrubber .dark-fade-scrubber-bottom {
  background: linear-gradient(to top,
    #000 0%,
    rgb(0 0 0 / 0.724) 6.25%,
    rgb(0 0 0 / 0.513) 12.50%,
    rgb(0 0 0 / 0.354) 18.75%,
    rgb(0 0 0 / 0.237) 25.00%,
    rgb(0 0 0 / 0.154) 31.25%,
    rgb(0 0 0 / 0.095) 37.50%,
    rgb(0 0 0 / 0.056) 43.75%,
    rgb(0 0 0 / 0.031) 50.00%,
    rgb(0 0 0 / 0.016) 56.25%,
    rgb(0 0 0 / 0.007) 62.50%,
    rgb(0 0 0 / 0.003) 68.75%,
    rgb(0 0 0 / 0.001) 75.00%,
    rgb(0 0 0 / 0.000) 81.25%,
    rgb(0 0 0 / 0.000) 87.50%,
    rgb(0 0 0 / 0.000) 93.75%,
    rgb(0 0 0 / 0.000) 100.00%);
}