/* ============================================================
   v10 only — Line-Up laeuft zeitgesteuert statt am Scrollrad.
   Geladen nach v1 + v8 + v9, erbt also alle dortigen Korrekturen.
   ============================================================ */

/* Benutzerdefinierte Eigenschaften sind fuer den Browser bis auf Weiteres
   nur Zeichenketten und daher nicht animierbar. Erst @property gibt ihnen
   einen Typ -- ab da interpoliert der Browser sie wie jede andere Zahl.
   Ohne diese drei Bloecke wuerde die Sequenz hart von 0 auf 1 springen. */
@property --grow   { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fan    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --settle { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Kein Pin, kein ueberlanger Track: die Section ist genau eine Bildschirmhoehe
   hoch und wird normal durchscrollt. Der Track aus v8.css (380svh, in v9 auf
   240svh gekuerzt) hatte nur den Zweck, Scrollstrecke fuer die Steuerung zu
   liefern -- die braucht v10 nicht mehr. */
.v10 .lineup__track { height: auto; }
.v10 .lineup__stage {
  position: static;
  height: 100svh;
}

/* Die Phasenfenster stammen unveraendert aus v8.js, dort als Anteile der
   Scrollstrecke notiert: grow 0–0.34, fan 0.28–0.78, settle 0.72–0.94. Sie
   ueberlappen mit Absicht, damit Wachsen und Auffaechern als eine Geste lesen
   und nicht als zwei Schritte.

   Die Anteile stehen als calc() auf --v10-dur, nicht als feste Millisekunden:
   so aendert eine einzige Zahl das Tempo der gesamten Sequenz, ohne dass die
   Phasenverhaeltnisse verrutschen. Die Kurve bildet das smoothstep aus v8.js
   nach (t*t*(3-2t)). */
.v10 .lineup {
  --v10-dur: 2600ms;
  --v10-ease: cubic-bezier(.4, 0, .6, 1);
}

/* Langform statt Kurzschreibweise, weil drei parallele Listen aus Name, Dauer
   und Verzoegerung so untereinander lesbar bleiben; in der Kurzform stuenden
   die calc()-Ausdruecke verschraenkt in einer Zeile. */
.v10 .lineup.is-playing {
  animation-name: v10-grow, v10-fan, v10-settle;
  animation-duration:
    calc(var(--v10-dur) * .34),
    calc(var(--v10-dur) * .50),
    calc(var(--v10-dur) * .22);
  animation-delay:
    0ms,
    calc(var(--v10-dur) * .28),
    calc(var(--v10-dur) * .72);
  animation-timing-function: var(--v10-ease);
  animation-fill-mode: both;
}

/* Mobil zuegiger: auf dem Handy fuellt die Section den Bildschirm sofort und
   man wartet die Sequenz aktiv ab, statt sie beilaeufig mitzunehmen. */
@media (max-width: 860px) {
  .v10 .lineup { --v10-dur: 1800ms; }
}

@keyframes v10-grow   { to { --grow: 1; } }
@keyframes v10-fan    { to { --fan: 1; } }
@keyframes v10-settle { to { --settle: 1; } }

/* Eyebrow und Headline bekommen einen eigenen Auftritt, damit die Section als
   eine ausgeloeste Sequenz liest und nicht als Becher, die vor fertigem Text
   losgehen. Sie laufen vor den Bechern. Die Headline behaelt ihren --grow-Drift
   aus v8.css und ihre volle Deckkraft aus v9.css -- hier kommt nur der
   Eintritt dazu. */
.v10 .lineup__eyebrow,
.v10 .lineup__title {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .65s var(--v10-ease),
    transform .65s var(--v10-ease);
}
.v10 .lineup.is-playing .lineup__eyebrow { opacity: 1; transform: none; transition-delay: 60ms; }
.v10 .lineup.is-playing .lineup__title   { opacity: 1; transform: none; transition-delay: 200ms; }

/* Ticker: v1.css laeuft in 50s durch die verdoppelte Liste. Auf der
   Live-Startseite ist das zu zuegig -- eine Drittel-Laengerung, nur hier. */
.v10 .marquee__track { animation-duration: 75s; }

/* Die Fusszeile haengt in v8.css bereits an --settle und laeuft damit von
   allein mit. Nichts zu tun. */

/* Reduzierte Bewegung: v8.css loest die Section ohnehin in eine statische
   Reihe auf. Hier zusaetzlich sicherstellen, dass weder Sequenz noch Eintritt
   laufen und alles sofort im Endzustand steht -- v10.js setzt die Klasse dann
   gar nicht erst, das hier ist der Guertel zum Hosentraeger. */
@media (prefers-reduced-motion: reduce) {
  .v10 .lineup.is-playing { animation: none; }
  .v10 .lineup { --grow: 1; --fan: 1; --settle: 1; }
  .v10 .lineup__eyebrow,
  .v10 .lineup__title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}