/* ============================================================
   stxrm808 — DEPTH  (Phase 04 / Plan 01, additiv)
   Räumliche 2D-Tiefe via Parallax — KEIN WebGL, KEIN 3D-Transform,
   P3-sicher. Bewegt beim Scrollen NUR echte, vom Content GETRENNTE
   Hintergrund-Layer langsamer als den Content davor (DPTH-01).

   Korrigierter Ansatz (nach Owner-Reject der ersten Fassung):
   Parallax läuft AUSSCHLIESSLICH auf Layern, die KEIN Content sind:
     • #demos .featured-producer__bg  → das Producer-<video> (absolute,
       z:0, mix-blend:screen, vom Content getrennt) — der einzige echte
       Bild-Hintergrund der Seite. Bold sichtbar.
     • .home-playlist::before         → dezenter Sekundär-Parallax auf
       dem Gradient-Layer (Parent overflow:hidden clippt → keine Lücke).
   NICHT angefasst: Produkt-Cards / .home-gateway__visual (= Card-Bild,
   Content!), .home-gateway (kein getrennter Hintergrund → bleibt flach),
   Text/fire-Elemente, #videoScrub/Hero-Scrub, .footer.

   KEIN filter:blur (DPTH-02): es gibt auf dieser Seite keinen
   content-getrennten Raster-Hintergrund, der sich sicher unscharf
   stellen ließe (#demos = Owner-Lock mix-blend/no-blur; Rest =
   Gradients → Blur unsichtbar). Focus-Pull gehört in den Spline-Track.

   Eigene Props --depth-p (distinct von Phase-3 --grip-*). Das Scroll-
   System (Lenis<->ScrollTrigger, eine rAF) wird GETEILT, nicht neu
   gebaut (siehe js/depth-parallax.js). Gleiches matchMedia-Gate wie
   Phase 3 → Mobile (<768px)/reduced-motion = exakt statisches Original.
   ============================================================ */

/* Default-State (gilt überall, auch Mobile/reduced-motion):
   --depth-p auf den TRIGGER-Elementen definiert (NICHT auf dem Child/
   Pseudo — sonst überschattet der lokale Default den von js geschriebenen,
   geerbten Wert). Der Hintergrund-Layer (.featured-producer__bg) und das
   .home-playlist::before ERBEN --depth-p. KEINE transform-Regel außerhalb
   der @media-Query → statischer Original-Zustand, kein Versatz. */
.featured-producer,
.home-playlist {
  --depth-p: 0;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* #demos ist von Haus aus overflow:visible. Der oversizete/parallaxende
     Video-Layer würde sonst (mix-blend:screen) oben in den Hero und unten in
     die Playlist BLUTEN ("komische Überlappung oben"). NUR der bg ragt über
     #demos hinaus (Carousel/Cards/Content bleiben innerhalb) → sicher zu
     clippen. Nur im Motion-Gate → Mobile/reduced-motion bleibt unberührt. */
  #demos {
    overflow: hidden;
  }

  /* #demos — Producer-Video-Hintergrund driftet langsamer als der
     Content (Parallax, DPTH-01). scale(1.22) oversized den Layer, damit
     die ±translate-Amplitude NIE eine Kante enthüllt. mix-blend:screen
     bleibt (im Markup gesetzt) — KEIN Blur (Owner-Lock #demos). */
  #demos .featured-producer__bg {
    transform: translate3d(0, calc((var(--depth-p) - 0.5) * 18%), 0) scale(1.22);
    transform-origin: center center;
  }
  #demos.is-depth-active .featured-producer__bg {
    will-change: transform;
  }

  /* .home-playlist — dezenter Sekundär-Parallax auf dem Gradient-
     ::before. Parent ist overflow:hidden → das oversizete/verschobene
     Pseudo wird sauber geclippt, keine Lücke zwischen Sektionen. */
  .home-playlist::before {
    transform: translate3d(0, calc((var(--depth-p) - 0.5) * 12%), 0) scale(1.18);
    transform-origin: center center;
  }
  .home-playlist.is-depth-active::before {
    will-change: transform;
  }
}