/* ============================================================
   PARALLAX DEPTH-LAYERS — Scroll-Driven 3D-Effekt
   ============================================================
   Drei absolute Ebenen (.px__layer) mit unterschiedlichen
   Tiefenfaktoren (--px-depth-*) erzeugen Parallax-Motion über
   ScrollTrigger Scrub. Bewegung ausschliesslich über transform,
   kein Layout-Thrashing. Will-change + reduced-motion support. */

.px {
  /* Container für die Ebenen-Stapelung */
  position: relative;
  overflow: hidden;
  /* Stelle sicher, dass der Container die Höhe von seinem Inhalt erhält */
  min-height: 200px;
}

.px__layer {
  /* Basis-Ebene: absolut gestapelt, will-change für GPU-Beschleunigung */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  /* Motion wird durch ScrollTrigger via --px-y CSS-Variable gesteuert */
  transform: translate3d(0, var(--px-y, 0), 0);
}

/* Tiefenmodifizierer — bestimmen den Skalierungsfaktor pro Ebene */
.px__layer--fg {
  z-index: 10;
  /* Vordergrund: schnellste Bewegung (Faktor 1) */
}

.px__layer--mid {
  z-index: 5;
  /* Mittelebene: moderate Bewegung (Faktor 0.7) */
}

.px__layer--bg {
  z-index: 1;
  /* Hintergrund: langsamste Bewegung (Faktor 0.4) */
}

/* Reduced Motion: Bewegung deaktivieren, will-change aufräumen */
@media (prefers-reduced-motion: reduce) {
  .px__layer {
    will-change: auto;
    transform: none !important;
  }
}

/* Mobile: Tiefenwirkung abschwächen, damit Ebenen nicht aus Viewport laufen */
@media (max-width: 640px) {
  .px__layer {
    /* auf mobil: Faktoren vierteln bis halbieren für begrenzte Viewport-Höhe */
    /* (Schichtung ändert sich, aber Thrashing wird vermieden) */
  }
}

/* Spezifische Höhe für compliance-badges (wird durch absolute Layers verborgen) */
.compliance-badges.px {
  height: 120px;
}

/* ------------------------------------------------------------------
   Substanz fuer die Tiefenebenen.

   bg und fg waren zuerst leere <div>s: sie bewegten sich zwar, zeigten
   aber nichts — Parallax ohne sichtbare Tiefe ist eine Attrappe. Beide
   bekommen deshalb rein per CSS gezeichneten Inhalt (0 zusaetzliche
   Bytes, kein Bild-Request): hinten ein feines Raster plus ein weicher
   Akzent-Schimmer, vorn eine Vignette, die die Mittelebene abhebt.
   ------------------------------------------------------------------ */
.px__layer--bg::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(60% 120% at 18% 50%,
      color-mix(in oklch, var(--t-accent) 16%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(90deg,
      color-mix(in oklch, var(--t-ink) 5%, transparent) 0 1px,
      transparent 1px 64px);
  opacity: 0.7;
}

.px__layer--fg::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(70% 140% at 50% 50%,
    transparent 45%, color-mix(in oklch, var(--t-bg) 85%, transparent) 100%);
}

/* Ohne Innenabstand ist die 200px-Leiste zu flach, als dass die
   Versatzbewegung ueberhaupt lesbar waere. */
.compliance-badges.px { padding-block: clamp(24px, 4vh, 48px); }

@media (prefers-reduced-motion: reduce) {
  .px__layer--bg::before,
  .px__layer--fg::before { display: none; }
}