/* Das Bildmotiv der Marke: Schimmer, Höhenlinien, Bergzug (#473, #557).
 *
 * ================================================================================
 * Warum diese Regeln in einer EIGENEN Datei stehen
 * ================================================================================
 * Sie standen bis #557 in `einstieg.css` — also in der Hülle der Bildschirme VOR der App.
 * Das war richtig, solange nur diese Bildschirme das Motiv trugen. Seit #557 trägt es auch
 * der App-Rahmen: Luis' Entwürfe legen es hinter JEDEN der 19 Bildschirme, und im Code kam
 * es nur bei vieren an.
 *
 * 🔴 Genau das ist der Fund, aus dem #557 entstanden ist: Was in allen Entwürfen gleich
 * drinsteckt, gehört keinem einzelnen von ihnen — und wird deshalb vergessen. Ein geteiltes
 * Bauteil bekommt eine eigene Datei, damit es einen Ort hat, an dem man es findet.
 *
 * Eingebunden wird die Datei in `base.html` für BEIDE Rahmen. Das Markup dazu steht in
 * `_einstieg_deko.html`.
 *
 * ⚠️ Im App-Rahmen steht das Motiv STILL. Die Regel dafür steht nicht hier, sondern in
 * `app_rahmen.css` — hier bleibt der Einstiegs-Zustand, dort wird er überschrieben. Der
 * Grund: Auf dem Anmeldebildschirm ist die Bewegung ein Empfang von Sekunden, auf dem
 * Verstehen-Bildschirm säße sie zwanzig Minuten hinter dem Lesetext.
 *
 * 🔴 KEIN FESTER FARBWERT (#468). Alles kommt aus den Tokens im <style>-Block von
 * `base.html` — sonst folgt das Motiv dem hellen/dunklen Modus nicht, und zwar ohne dass
 * irgendwo etwas rot wird.
 */

/* Alles rein dekorativ, `aria-hidden` im Markup, `pointer-events: none` hier — nichts
   davon darf einen Klick abfangen. */

.lp-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(680px 480px at 50% -6%,
      color-mix(in srgb, var(--violet) 30%, transparent), transparent 62%),
    radial-gradient(520px 420px at 88% 108%,
      color-mix(in srgb, var(--violet-2) 12%, transparent), transparent 65%);
}
/* Im hellen Modus trägt der Schimmer weniger — sonst liegt ein violetter Schleier über
   der ganzen Seite. Geschrieben als „ohne die Klasse dark", weil das der helle Zustand
   ist (Polarität siehe base.html). */
html:not(.dark) .lp-glow { opacity: .5; }

.lp-contours {
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(150vw / var(--seitenzoom, 1)));  /* Seitenzoom: base.html */
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
}
.lp-contours circle { fill: none; stroke: var(--violet-2); stroke-width: 1.1; }

/* Drei Ketten hintereinander. Jede zieht seitwärts, die vordere schneller als die
   hintere — dadurch verschieben sie sich gegeneinander, und es entsteht Zug, ohne dass
   sich die Bergform ändert. Dazu ein leichtes Auf und Ab.
 *
 * 🔴 Hier bewusst `vh` und NICHT `dvh` (#482 §5): Der Bergzug steht fest am unteren Rand.
 * Mit `dvh` wüchse und schrumpfte er beim Scrollen, sobald die Adressleiste ein- und
 * ausfährt — eine Dekoration, die ständig zappelt. Überall sonst gilt `dvh`.
 * Geteilt durch den Seitenzoom (#525), sonst wüchse der Bergzug ab 1900 px über seinen
 * Anteil am Fenster hinaus; Regel im Seitenzoom-Block von base.html.
 *
 * 🔴 Bewegt wird ausschließlich per `transform`. Das macht die Grafikkarte; jede andere
 * Eigenschaft (`left`, `background-position`) löste bei jedem Bild ein neues Layout aus. */
.lp-range {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: min(calc(32vh / var(--seitenzoom, 1)), 290px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-lane { position: absolute; inset: 0; }
.lp-range svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  display: block;
  will-change: transform;
}
.lp-range path { fill: var(--violet); }
/* Auf hellem Grund sind die Ketten sonst kaum zu sehen — sie bekommen dort den dunkleren
   der beiden Markentöne.

   ⚠️ Der Entwurf löst das mit `opacity: 1.6` an der Spur. Das ist wirkungslos: CSS deckelt
   die Deckung bei 1, und 1 ist ohnehin der Ausgangswert. Die Tiefenstaffelung steckt in
   den drei Pfaden selbst (.085 / .13 / .17) — sie über eine gemeinsame Regel anzuheben
   würde sie einebnen. Deshalb der Farbwechsel statt der Deckung. */
html:not(.dark) .lp-range path { fill: var(--violet-2); }

/* Wer Ruhe verlangt, bekommt einen stehenden Bergzug (#482 §2). Die Animation steht
   deshalb VOLLSTÄNDIG in dieser Abfrage — nicht als Regel mit einer Ausnahme daneben. */
@media (prefers-reduced-motion: no-preference) {
  .lp-lane { animation: lp-wiegen var(--wdur) ease-in-out infinite alternate; }
  .lp-range svg { animation: lp-ziehen var(--dur) linear infinite; }
  @keyframes lp-ziehen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes lp-wiegen { from { transform: translateY(0); } to { transform: translateY(var(--amp)); } }
}