/* =========================================================================
   Die Fahrszene

   Prinzip: Das Auto steht still, die Welt bewegt sich. Jede Ebene läuft mit
   eigener Geschwindigkeit – ferne Berge kriechen, die Fahrbahnmarkierung
   fliegt vorbei. Daraus entsteht die Tiefe, die dem alten Video gefehlt hat.

   Richtung: Der Wagen fährt nach links, also wandert die Welt nach rechts.
   Alles in dieser Datei hängt daran – siehe die Anmerkung bei .scene__layer.

   Nahtlosigkeit: Jede Ebene ist fünf Kacheln breit und beginnt zwei Kacheln
   links außerhalb der Bühne. Weil sie nach rechts wandert, braucht sie links
   den Vorrat; ganze Kacheln, damit die Phase des Musters stimmt. Die Bewegung
   läuft als transform auf der GPU.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Die Szene
   ------------------------------------------------------------------------- */

.scene {
  /* Verhaeltnis zwischen dargestelltem Rad und Vorlage: daraus errechnet
     main.js, wie oft sich das Rad auf der gefahrenen Strecke dreht. */
  --wheel-scale: calc(var(--car-width) * 0.1527 / 64);

  position: relative;
  width: 100%;
  height: var(--scene-height);
  margin: 0;
  overflow: hidden;
  isolation: isolate;

  /* setzt exakt die Himmelfarbe fort, in der der Verlauf darüber endet */
  background: linear-gradient(180deg, var(--sky) 0%, #a2c2d5 22%, #c0d8e4 62%, #dae7e7 100%);

  /* Das Fahrtempo steuert main.js über die playbackRate der Animationen.
     Über die Dauer zu gehen würde die Zeitposition umrechnen und die
     Fahrbahnmarkierung beim Scrollen springen lassen. */
}

.scene__layer {
  /* --h  Anteil der Buehnenhoehe, den die Ebene einnimmt
     --b  Abstand von unten, ebenfalls als Anteil
     --ar Seitenverhaeltnis der Grafik (Breite geteilt durch Hoehe)

     Die Kachelbreite folgt aus Hoehe mal Seitenverhaeltnis. Wuerde man die
     Breite fest setzen, waere die Grafik hoeher als ihr Container und die
     Kirchtuerme wuerden oben abgeschnitten. */
  --tile: calc(var(--scene-height) * var(--h) * var(--ar));

  position: absolute;

  /* Die Ebene wandert nach rechts, also muss links Vorrat liegen, sonst reißt
     die Kulisse gegen Ende der Strecke am eigenen Rand ab. Der Versatz ist
     bewusst eine GANZE Kachel mal zwei: Bei einem krummen Wert verschiebt sich
     die Phase des wiederholten Musters und Stadt und Straßenrand stünden nicht
     mehr übereinander. */
  left: calc(var(--tile) * -2);
  bottom: calc(var(--scene-height) * var(--b));
  height: calc(var(--scene-height) * var(--h));
  width: calc(var(--tile) * 5);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;

  /* Die Strecke wird gefahren, nicht geloopt: main.js setzt --shift von 0
     bis zur vollen Kachelbreite. Jede Ebene bewegt sich mit ihrem eigenen
     Faktor, daraus entsteht die Tiefe.

     Vorzeichen: Der Wagen fährt nach links, das steht so im Originalvideo und
     lässt sich nicht spiegeln, sonst stünde die Beschriftung seitenverkehrt.
     Ein nach links fahrendes Auto schiebt die Welt nach rechts, deshalb ist
     die Verschiebung positiv. Die Bauten liegen dafür in den SVGs von rechts
     nach links, damit das Löfflerhaus zuerst kommt. */
  transform: translate3d(calc(var(--shift, 0px) * var(--par, 1)), 0, 0);
  will-change: transform;
}



/* Ebenen von hinten nach vorn. Je näher, desto kürzer die Dauer. */
.scene__layer--mountains {
  --ar: 6.923;   /* 1800 / 260 */
  --h: 0.34;
  --b: 0.27;
  --par: 0.18;
  background-image: url("../img/scene/mountains.svg");
  opacity: 0.55;
}

.scene__layer--city {
  --ar: 11.064;  /* 5200 / 470 */
  --h: 0.68;
  --b: 0.25;
  --par: 1;
  background-image: url("../img/scene/city.svg");
}

.scene__layer--roadside {
  --ar: 13.0;    /* 5200 / 400, identische Kachelbreite wie die Stadtebene */
  --h: 0.579;    /* damit ergibt h * ar denselben Wert wie bei der Stadt */
  --b: 0.24;
  --par: 1;      /* gleiche Geschwindigkeit, sonst wandern Schilder und Haeuser
                    gegeneinander und keine Zuordnung haelt */
  background-image: url("../img/scene/roadside.svg");
  filter: url("#motion-near");
}

/* Wolken: eigenes Tempo, driften unabhängig vom Rest */
.scene__clouds {
  position: absolute;
  top: 0;
  --ar: 5.333;   /* 1600 / 300 */
  --h: 0.42;
  --tile: calc(var(--scene-height) * var(--h) * var(--ar));
  height: calc(var(--scene-height) * var(--h));
  left: calc(var(--tile) * -2);   /* gleicher Vorrat nach links wie bei den Ebenen */
  width: calc(var(--tile) * 5);
  background-image: url("../img/scene/clouds.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left top;
  transform: translate3d(calc(var(--shift, 0px) * 0.05), 0, 0);
  opacity: 0.85;
  will-change: transform;
}

/* -------------------------------------------------------------------------
   Straße
   ------------------------------------------------------------------------- */

.scene__ground {
  position: absolute;
  inset: auto 0 0 0;
  height: 24%;
  background:
    linear-gradient(180deg, #3c4447 0%, #2b3134 30%, #232829 100%);
  border-top: 3px solid #5c6668;
}

/* Grünstreifen zwischen Häuserzeile und Asphalt */
.scene__verge {
  position: absolute;
  inset: auto 0 24% 0;
  height: 3.5%;
  background: linear-gradient(180deg, #4a6b4a 0%, #35513a 100%);
}

.scene__markings {
  position: absolute;
  bottom: 4%;
  height: 5px;
  --tile: 220px;
  left: calc(var(--tile) * -2);   /* Vorrat nach links, sie wandert nach rechts */
  width: calc(var(--tile) * 14);
  background-image: linear-gradient(
    90deg,
    rgb(240 244 245 / 0.92) 0 96px,
    transparent 96px 220px
  );
  background-size: var(--tile) 100%;
  background-repeat: repeat-x;
  border-radius: var(--radius-full);

  /* --mark kommt aus main.js und ist bereits auf eine Kachel heruntergerechnet.
     In calc() ginge das nicht: `%` ist dort kein Modulo, sondern schlicht
     ungültig - die ganze Deklaration fiel weg und die Markierung stand still. */
  transform: translate3d(var(--mark, 0px), 0, 0);
  filter: url("#motion-fast");
  will-change: transform;
}

/* Randlinie am Fahrbahnrand, läuft im gleichen Takt */
.scene__edge-line {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 3px;
  background: rgb(240 244 245 / 0.45);
}

/* -------------------------------------------------------------------------
   Das Auto
   ------------------------------------------------------------------------- */

.scene__car {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: var(--car-width);
  transform: translateX(-50%);
  z-index: 3;
}

/* Karosserie: zwei überlagerte Bewegungen. Das kurze Federn kommt von der
   Fahrbahn, das langsame Nicken von Lastwechseln. Zusammen wirkt es
   unregelmäßig, ohne dass eine Zufallsfunktion nötig wäre. */
.scene__car-inner {
  animation:
    body-bounce 0.9s ease-in-out infinite,
    body-pitch 4.3s ease-in-out infinite;
  animation-play-state: var(--motion, running);
  transform-origin: 60% 90%;
}

@keyframes body-bounce {
  0%, 100% { translate: 0 0; }
  30%      { translate: 0 -1.4px; }
  55%      { translate: 0 0.9px; }
  78%      { translate: 0 -0.5px; }
}

@keyframes body-pitch {
  0%, 100% { rotate: 0deg; }
  35%      { rotate: -0.45deg; }
  70%      { rotate: 0.35deg; }
}

.scene__car-inner { position: relative; }

.scene__car-body {
  width: 100%;
  height: auto;
}

/* Die Räder liegen als eigene Bilder in den offenen Radhäusern der
   freigestellten Karosserie. Position und Größe stammen aus der Freistellung,
   deshalb die krummen Prozentwerte. `translate` und `rotate` sind eigene
   Eigenschaften, dadurch kollidiert das Zentrieren nicht mit der Drehung. */
.scene__wheel {
  position: absolute;
  width: 15.27%;
  height: auto;
  translate: -50% -50%;
  rotate: calc(var(--spin, 0) * 1deg);
}

.scene__wheel--rear  { left: 15.51%; top: 85.76%; }
.scene__wheel--front { left: 80.12%; top: 85.76%; }



/* Fahrtwind: dünne Schlieren, die am Auto vorbeiziehen. main.js setzt
   .is-fast, sobald spürbar Gas gegeben wird. */
.scene__speedlines {
  position: absolute;
  inset: auto 0 24% 0;
  height: 60px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.scene.is-fast .scene__speedlines { opacity: 0.7; }

.scene__speedlines i {
  position: absolute;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.85), transparent);
  animation: speedline 0.75s linear infinite;
  animation-play-state: var(--motion, running);
}

.scene__speedlines i:nth-child(1) { top: 6px;  width: 90px;  animation-delay: 0s; }
.scene__speedlines i:nth-child(2) { top: 26px; width: 140px; animation-delay: -0.28s; }
.scene__speedlines i:nth-child(3) { top: 44px; width: 70px;  animation-delay: -0.52s; }

@keyframes speedline {
  from { transform: translateX(-30vw); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translateX(105vw); opacity: 0; }
}

/* -------------------------------------------------------------------------
   Layout ab Tablet
   ------------------------------------------------------------------------- */

/* Der Textblock bleibt einspaltig und linksbündig. Die Breite begrenzen
   Titel und Fließtext selbst, die Szene darunter nimmt die volle Bühne. */

/* -------------------------------------------------------------------------
   Bewegung reduziert: Szene wird zum ruhigen Standbild
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .scene__layer,
  .scene__clouds,
  .scene__markings,
  .scene__car-inner,
  .scene__wheel,
  .scene__speedlines i {
    animation: none !important;
  }

  .hero__title em::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* -------------------------------------------------------------------------
   Probefahrt

   Kleiner Simulator in der Szene: Vorname eingeben, dann traegt der Wagen
   ein Dachschild mit dem Namen und faehrt die Stationen ab. Gas und Bremse
   steuern das Tempo der gesamten Szene ueber die playbackRate.
   ------------------------------------------------------------------------- */

/* Dachschild mit dem Namen. Sitzt mittig ueber dem Dach, mit zwei kurzen
   Haltern, damit es aufgesetzt wirkt und nicht aufgeklebt. */
.scene__sign {
  position: absolute;
  left: 45%;
  bottom: 84.5%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  padding: 0.26rem 0.85rem 0.32rem;
  background: var(--gray-0);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgb(0 0 0 / 0.25),
    0 3px 7px rgb(8 16 18 / 0.3);
  opacity: 0;
  scale: 0.9;
  transform-origin: 50% 120%;
  transition: opacity 240ms var(--ease-out), scale 240ms var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}

/* zwei Halter zum Dach */
.scene__sign::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 22%;
  right: 22%;
  height: 0.28rem;
  background:
    linear-gradient(90deg, #8d9498 0 22%, transparent 22% 78%, #8d9498 78% 100%);
}

.scene__sign.is-on { opacity: 1; scale: 1; }

/* Nur der Name, dafuer gross genug zum Lesen */
.scene__sign-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--gray-900);
  line-height: 1.1;
}

/* Bedienfeld */
/* Das Band sitzt direkt unter der Buehne - dort, wo die Strasse aufhoert
   und das, was es steuert, unmittelbar darueber liegt. */
.driveband {
  background: #1b1f20;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding-block: var(--space-4);
}

.drive { display: flex; justify-content: center; }

.drive__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  width: 100%;
  max-width: 46rem;
}

.drive__panel[hidden] { display: none; }

.drive__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--gray-0);
}

.drive__row { display: flex; gap: 0.4rem; flex: 0 1 22rem; min-width: 15rem; }

.drive__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 0.7rem;
  background: var(--gray-0);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-input);
  font-size: var(--text-sm);
}

.drive__input:focus-visible { outline: none; box-shadow: var(--ring); }

.drive__go, .drive__cta, .drive__again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--brand-700);
  color: var(--gray-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.drive__go:hover, .drive__cta:hover { background: var(--brand-800); }

/* laufende Fahrt */
.drive__now {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--gray-0);
  min-width: 14rem;
}

.drive__bar {
  flex: 1 1 10rem;
  height: 4px;
  background: rgb(255 255 255 / 0.18);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.drive__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand-400);
  border-radius: inherit;
  transition: width 200ms linear;
}

.drive__pedals { display: flex; gap: 0.4rem; }

.drive__pedal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding-inline: 0.9rem;
  border: var(--border-width) solid rgb(255 255 255 / 0.24);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--gray-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.drive__pedal:active { background: rgb(255 255 255 / 0.12); }
.drive__pedal--go { border-color: var(--brand-400); color: var(--brand-300); }

/* Ziel erreicht */
.drive__done { font-size: var(--text-base); color: var(--gray-0); }
.drive__done b { font-family: var(--font-display); }

.drive__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  margin-right: 0.35rem;
}

.drive__again {
  background: transparent;
  color: rgb(255 255 255 / 0.6);
  padding: 0 0.4rem;
  font-weight: var(--weight-medium);
}

.drive__again:hover { color: var(--gray-0); }

@media (max-width: 40rem) {
  .scene__sign { display: none; }
  .drive__panel { flex-direction: column; align-items: stretch; }
  .drive__row, .drive__pedals { width: 100%; }
  .drive__pedal { flex: 1; }
}