/* =====================================================================
   P4b · PROZESS ALS FAHRT AUS DER FAHRERPERSPEKTIVE
   Die fünf Stationen liegen auf einer SVG-Strecke. Die Kamera sitzt auf
   der Strecke und blickt in Fahrtrichtung: die Strecke ist eine EBENE, die
   per CSS-3D (perspective + rotateX) gekippt wird, und rollt in Kurven.
   Am Ende richtet sich die Ebene auf, die Kamera steigt heraus und zeigt
   die vollständige Strecke; am Endpunkt zeichnet sich die Würfel-Marke.

   Aufbau der Buehne (.pathline__stage, sticky):
     .pathline__view    rollt um den Anker (Kamera-Rollen)
       .pathline__persp perspective-Container, Auge auf dem Anker
         .pathline__svg die Ebene, groesser als die Buehne, rotateX(tilt)
       .pathline__haze  Gluehen am Fluchtpunkt (Nebel liegt in der Ebene)
     .pathline__steps   HUD: die fuenf Textbloecke in Bildschirmebene
   Den Scrollweg geben Spacer vor (.pathline__track), nicht die Texte.

   Vom JS gesetzte Custom Properties:
     --pl-ride  1 waehrend der Fahrt, 0 am Ende des Auslaufs
     --pl-late  0 waehrend der Fahrt, 1 wenn der Ueberblick steht

   Statischer Ersatz: .pathline.is-static — Buehne wird Fluss, Ebene und
   Spacer weg, Schritte als lesbare vertikale Liste mit Bahn und Punkten.
   Greift bei prefers-reduced-motion, ohne GSAP und ohne Fullpage-Modus.
   Steuerung: js/timeline.js
   ===================================================================== */

.pathline {
  position: relative;
  --pl-ride: 1;
  --pl-late: 0;
  /* dvh-Werte fliessen in die ScrollTrigger-Rechnung → dort
     invalidateOnRefresh: true, damit ein Resize neu vermisst wird. */
}

/* ---------- Buehne (klebt im Bild, waehrend die Spacer laufen) ---------- */
.pathline__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
}

.pathline__view {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  /* transform (Rollen) und transform-origin setzt das JS je Frame. */
}

.pathline__persp {
  position: absolute;
  inset: 0;
  transform-style: flat;
  /* perspective und perspective-origin setzt das JS aus der Vermessung. */
}

.pathline__svg {
  position: absolute;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  /* Groesse, Lage, viewBox, rotateX und transform-origin setzt das JS:
     die Ebene ist 2,4 x 1,9 Buehnen gross, ihr Ankerpunkt liegt auf dem
     Buehnen-Anker. Eine Welteinheit = ein CSS-Pixel bei Kamerafaktor 1. */
}

/* Gluehen am Fluchtpunkt: buehnengrosses Div, rollt mit der Sicht. Der
   Distanznebel selbst liegt als Verlauf in der Ebene (.pathline__fog), damit
   er keinen eigenen Layer kostet. Radien setzt das JS in Pixeln. */
.pathline__haze {
  position: absolute;
  inset: 0;
  opacity: var(--pl-ride);
  pointer-events: none;
}

/* Distanznebel in der Ebene: Farbe = Hintergrund, Verlauf in Fahrtrichtung
   (Stops setzt das JS in Welteinheiten). Blendet im Auslauf aus. */
.pathline__fog { opacity: var(--pl-ride); }
.pathline__fog-stop { stop-color: var(--bg); }

/* ---------- Boden ---------- */
/* Raster auf der Ebene: parallele Linien, die auf den Fluchtpunkt zulaufen —
   der staerkste Perspektiv-Hinweis zum kleinsten Preis. Liegt in der Welt
   (dreht und faehrt mit), aber ausserhalb der Szene, damit es die
   Auszoom-Rechnung nicht beruehrt. Blendet im Auslauf aus. */
.pathline__grid {
  opacity: var(--pl-ride);
}
.pathline__grid-line {
  stroke: rgb(255 255 255 / 0.055);
  stroke-width: 1;
  fill: none;
}

/* ---------- Strecke ---------- */
.pathline__road,
.pathline__ghost,
.pathline__ticks,
.pathline__halo,
.pathline__trail,
.pathline__pulse {
  fill: none;
  stroke-linecap: round;
}
/* Fahrbahn: breites, kaum sichtbares Band unter der Naht */
.pathline__road {
  stroke: rgb(255 255 255 / 0.05);
  stroke-width: 36;
  opacity: var(--pl-ride);
}
/* Naht: die volle Strecke liegt blass voraus */
.pathline__ghost {
  stroke: rgb(255 255 255 / 0.26);
  stroke-width: 3;
}
/* Marken auf der Fahrbahn, fest in der Welt: sie kommen auf den Wagen zu,
   weil die Kamera faehrt — nicht, weil sie animiert sind. */
.pathline__ticks {
  stroke: rgb(255 255 255 / 0.5);
  stroke-width: 3;
  stroke-dasharray: 6 54;
  opacity: var(--pl-ride);
}
/* Gefahrener Teil: Gold mit Gluehen */
.pathline__halo {
  stroke: rgb(200 168 120 / 0.16);
  stroke-width: 26;
}
.pathline__trail {
  stroke: var(--accent);
  stroke-width: 4;
}
/* Lichtimpulse, die dem Wagen entgegenlaufen (Offset aus t im JS) */
.pathline__pulse {
  stroke: rgb(255 255 255 / 0.7);
  stroke-width: 3;
  stroke-dasharray: 16 260;
  opacity: var(--pl-ride);
}

/* ---------- Stationen ---------- */
.pathline__gate {
  fill: none;
  stroke: rgb(200 168 120 / 0.22);
  stroke-width: 1.5;
  transition: stroke 0.4s ease;
}
.pathline__ring {
  fill: var(--bg);
  stroke: rgb(200 168 120 / 0.32);
  stroke-width: 2;
  transition: stroke 0.4s ease;
}
.pathline__core {
  fill: rgb(200 168 120 / 0.28);
  transition: fill 0.4s ease;
}
/* Zahl und Name liegen in der Welt und wuerden in der Fahrersicht gekippt
   und gedreht stehen — waehrend der Fahrt traegt das HUD. Beide blenden
   erst auf, wenn der Ueberblick steht. */
.pathline__num {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.18em;
  opacity: var(--pl-late);
  transition: fill 0.4s ease;
}
.pathline__names { opacity: 0; }
.pathline__name {
  fill: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
}

.pathline__station.is-reached .pathline__gate { stroke: rgb(200 168 120 / 0.45); }
.pathline__station.is-reached .pathline__ring { stroke: var(--accent); }
.pathline__station.is-reached .pathline__core { fill: var(--accent); }
.pathline__station.is-reached .pathline__num  { fill: var(--accent); }

/* ---------- Marker („Wagen" auf der Strecke) ---------- */
.pathline__pod-glow { fill: rgb(200 168 120 / 0.18); }
.pathline__pod-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.pathline__pod-core { fill: var(--accent); }

/* ---------- Wuerfel-Marke am Endpunkt ---------- */
.pathline__mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
}

/* ---------- HUD: die fuenf Textbloecke in Bildschirmebene ---------- */
.pathline__steps {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
  pointer-events: none;
}
.pathline__step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.pathline__inner {
  width: min(var(--container), 100% - 2 * var(--space));
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 9dvh;
}
.pathline__panel {
  width: min(38ch, 44%);
  padding: 1.4rem 1.6rem;
  border-left: 2px solid rgb(200 168 120 / 0.3);
  background: rgb(11 11 13 / 0.62);
  border-radius: 0 10px 10px 0;
  opacity: 0;
  will-change: opacity, transform;
  transition: border-color 0.4s ease;
  /* opacity und transform setzt das JS aus dem Scrollwert — sichtbar,
     solange der Wagen an der Station steht. */
}
.pathline__step.is-active .pathline__panel { border-left-color: var(--accent); }

.pathline__period {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.pathline__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}
.pathline__text {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Scrollweg ---------- */
.pathline__track {
  position: relative;
  z-index: 0;
  /* zieht die Spacer exakt ueber die klebende Buehne — die Gesamthoehe
     der .pathline ist damit Spacer + Auslauf. */
  margin-top: -100dvh;
  pointer-events: none;
}
.pathline__spacer { height: var(--pl-spacer, 100dvh); }

/* Auslauf: der Scrollweg, auf dem die Kamera aus der Strecke steigt. */
.pathline__outro { height: 120dvh; }

/* Rail-Safe-Zone wie bei .container: der Text darf den festen Rail-Streifen
   links nie erreichen (layout.css setzt dieselbe Breite fuer .container). */
@media (min-width: 901px) {
  body.fp-active .pathline__inner { width: min(var(--container), 100% - 24rem); }
}

/* ---------- Mobil hochkant: HUD oben, Strecke darunter ----------
   Nur bis 5:4 (js/timeline.js wählt dort die hohe Strecke); quer bleibt das Feld unten rechts.
   Oben mindestens 3.2rem: mit 5dvh lag „Schritt 0X“ 4–24 px unter dem 65-px-Header
   (gemessen 320–474 px Breite, Mobil-Check 04.10.2026). */
@media (max-width: 760px) and (max-aspect-ratio: 5/4) {
  .pathline__step { align-items: flex-start; }
  .pathline__inner { padding-top: max(5dvh, 3.2rem); padding-bottom: 0; }
  /* Das Panel liegt hier ueber dem Horizont-Gluehen. Eine harte Unterkante des
     0.8-Schwarz zeichnet sich dort als Linie ab (Benjamin 21.09.: „eine klare Kante
     da hinten"; gemessen 738x836: Zeilenmittel 13,1 -> 19,9 an einer Zeile). Darum
     laeuft der Hintergrund samt Rand in einer 2.4rem-Auslaufzone unter dem Text auf
     0 aus (Maske); der Text selbst steht komplett im voll deckenden Teil. */
  .pathline__panel {
    width: 100%;
    padding: 1.1rem 1.2rem 3.5rem;
    background: rgb(11 11 13 / 0.8);
    border-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent);
  }
  .pathline__outro { height: 100dvh; }
}

/* =====================================================================
   STATISCHER ERSATZ
   prefers-reduced-motion, kein GSAP, kein Fullpage-Modus: keine Fahrt,
   sondern die fuenf Schritte als ruhige, vollstaendig lesbare Liste.
   ===================================================================== */
.pathline.is-static .pathline__view,
.pathline.is-static .pathline__track,
.pathline.is-static .pathline__outro { display: none; }

.pathline.is-static .pathline__stage {
  position: static;
  height: auto;
  overflow: visible;
}
.pathline.is-static .pathline__steps {
  position: relative;
  inset: auto;
  max-width: 640px;
  margin-inline: auto;
  padding-left: 3.25rem;
  pointer-events: auto;
}
.pathline.is-static .pathline__steps::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), rgb(200 168 120 / 0.5));
}
.pathline.is-static .pathline__step {
  position: relative;
  inset: auto;
  display: block;
  padding-bottom: clamp(1.5rem, 4.5vh, 2.8rem);
}
.pathline.is-static .pathline__step:last-child { padding-bottom: 0; }
.pathline.is-static .pathline__step::before {
  content: '';
  position: absolute;
  left: -3.25rem;
  top: 0.3rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.pathline.is-static .pathline__inner { width: auto; display: block; padding: 0; }
.pathline.is-static .pathline__panel {
  width: auto;
  opacity: 1;
  transform: none;
  padding: 0;
  border-left: 0;
  background: none;
  transition: none;
  will-change: auto;
}
.pathline.is-static .pathline__text { max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .pathline__panel,
  .pathline__gate,
  .pathline__ring,
  .pathline__core,
  .pathline__num { transition: none; }
}