/* ==========================================================================
   HERO SCROLL CINEMATIC — webndo

   Desktop only. Scroll progress fades the hero copy and narrows the frame
   to the product-card row. The hero starts at full viewport height.
   Nothing plays on after the user stops scrolling.
   ========================================================================== */

.hero-scroll-scene {
  --hero-frame-w: 100%;
  --hero-frame-h: 100dvh;
  --hero-shift: 0px;
  --hero-shrink: 0;
  --hero-copy: 0;
  --hero-spots: 0;
  --hero-grade: 0;
  background: #F9FAFC;
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll-scene {
    height: 180vh;
  }

  .hero-scroll-sticky {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: clip;
  }

  .hero-scroll-scene .hero {
    height: 100%;
    overflow: visible;
    background: transparent;
  }

  .hero-scroll-scene.is-cinematic .hero__stage {
    width: var(--hero-frame-w);
    height: var(--hero-frame-h);
    margin-inline: auto;
    transform: translate3d(0, var(--hero-shift), 0);
    border-radius: calc(var(--hero-shrink) * var(--radius-xs));
    overflow: hidden;
  }

  /* Scrubbed copy. No CSS transition, so it stops with the scroll. */
  .hero-scroll-scene.is-cinematic .hero__panel {
    opacity: calc(1 - var(--hero-copy));
    transform: translate3d(0, calc(var(--hero-copy) * 14px), 0);
  }

  .hero-scroll-scene.is-cinematic.is-copy-gone .hero__content a {
    pointer-events: none;
  }

  /* Hotspot chrome, connectors, labels, and spotlight shades.
     Parent opacity scrubs them. Their own hover timings stay intact at rest. */
  .hero-scroll-scene.is-cinematic .hero-spots {
    opacity: calc(1 - var(--hero-spots));
  }

  .hero-scroll-scene.is-cinematic.is-spots-gone .hero-spots {
    pointer-events: none;
  }

  /* Cinematic gradient lifts with scroll. No brightness filter — only less veil. */
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__veil {
    opacity: calc(1 - var(--hero-grade));
    transition: none;
  }

  /* Spotlight layers stay off unless a chair hotspot is still open.
     transition: none so clearing one cannot keep fading after the scroll stops. */
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__veil-focus,
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__veil-keep {
    opacity: 0;
    transition: none;
  }

  /* An open Sicherheitsstuhl spotlight clears with the hotspot fade,
     while the base veil eases in at the already-reduced grade. */
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__stage:has(.hero-spots.is-stuhl) .hero__veil {
    opacity: calc((1 - var(--hero-grade)) * var(--hero-spots));
    transition: none;
  }

  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__stage:has(.hero-spots.is-stuhl) .hero__veil-focus {
    opacity: calc((1 - var(--hero-spots)) * (1 - var(--hero-grade)));
    transition: none;
  }

  .hero-scroll-scene.is-cinematic.is-scrubbing .hero__stage:has(.hero-spots.is-stuhl) .hero__veil-keep {
    opacity: calc(0.9 * (1 - var(--hero-spots)) * (1 - var(--hero-grade)));
    transition: none;
  }

  .hero-scroll-scene.is-cinematic.is-scrubbing .hero-spots__shade,
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero-spot__label,
  .hero-scroll-scene.is-cinematic.is-scrubbing .hero-spots__lines path {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-scene,
  .hero-scroll-sticky {
    height: auto;
  }

  .hero-scroll-sticky {
    position: static;
  }
}