/* ============================================================
   stxrm808 — FLOW MOTION  (Phase 03 / Plan 01, additiv)
   Scroll-gekoppelte Erweiterung des statischen flow.css panel-grip:
   js/section-flow.js fährt pro Boundary --grip-p (0→1) + --grip-vel,
   dieses Stylesheet animiert daraus AUSSCHLIESSLICH GPU-Properties
   (transform / opacity der warmen Oberkante) auf den drei sichtbaren
   Boundary-Panels.

   HARTE REGELN:
   - flow.css / style.css werden NICHT editiert; rein additive Schicht.
   - KEINE Layout-Property (margin/height/top/width/left/right) wird
     animiert oder gesetzt — der panel-grip bleibt flow.css-Sache.
   - transform-Regel NUR in @media (prefers-reduced-motion: no-preference);
     außerhalb existiert keine transform-Regel → reduced-motion/Mobile
     fallen sauber auf den statischen flow.css panel-grip zurück.
   - Default --grip-p: 1 = Ruhelage / kein Versatz (Pitfall 7).
   - 2D-only: keine 3D-Transform-Tricks zur Tiefen-Fälschung
     (reines 2D translate/scale — gehört sonst in die Spline-Schiene).
   ============================================================ */

/* Default-Ruhelage: --grip-p:1 (gegriffen, kein Versatz), --grip-vel:0.
   NUR auf den drei sichtbaren Boundary-Panels — KEIN :root/global. */
.home-playlist,
.home-gateway,
.footer {
  --grip-p: 1;
  --grip-vel: 0;
}

/* Owner-Redirect (P3-Visual-Check): die Boundaries sollen sichtbar
   "von der Seite reinkommen" / sich zusammensetzen — nicht nur dezent
   hochgreifen. --grip-x = horizontale Einflug-Richtung pro Panel
   (alternierend → Assemble-Gefühl). Das bestehende body{overflow-x:hidden}
   (style.css) clippt den Einflug-Versatz → keine horizontale Scrollbar,
   style.css bleibt byte-identisch. */
.home-playlist { --grip-x: -1; } /* von links rein */
.home-gateway  { --grip-x:  1; } /* von rechts rein */
.footer        { --grip-x: -1; } /* von links rein */

/* will-change wird NICHT permanent gelegt (Pitfall 4): section-flow.js
   setzt diese Klasse nur, solange ein Boundary aktiv durchquert wird,
   und entfernt sie danach wieder. Default = kein eigener Compositor-Layer. */
.is-gripping {
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  /* p=0 (Boundary tritt in die Viewport-Unterkante): seitlich versetzt
     (±56px, Richtung = --grip-x, alternierend) + leicht abgesenkt/kleiner
     → die Section fliegt von der Seite herein und greift. p=1 (gegriffen):
     exakte Ruhelage (identity). NUR transform → Compositor, kein Reflow. */
  .home-playlist,
  .home-gateway,
  .footer {
    transform:
      translate3d(
        calc((1 - var(--grip-p)) * var(--grip-x, 0) * 56px),
        calc((1 - var(--grip-p)) * 14px),
        0)
      scale(calc(1 - (1 - var(--grip-p)) * 0.012));
    transform-origin: 50% 0%;
  }

  /* Warme Oberkante glüht beim Greifen stärker und folgt dezent dem
     Scroll-Tempo (--grip-vel, JS-seitig auf 0..1 normiert/gedeckelt).
     Korrekte Pseudo-Element-Selektoren (verifiziert gegen flow.css):
       .home-playlist::after  (::before ist style.css-Grid-Textur)
       .home-gateway::before
       .footer::before
     Nur opacity wird moduliert — Geometrie/Gradient bleiben flow.css. */
  .home-playlist::after,
  .home-gateway::before,
  .footer::before {
    opacity: calc(0.55 + var(--grip-p) * 0.45 + var(--grip-vel) * 0.25);
  }
}