/* NORDIX — Eröffnungs-Choreografie
   Video zuerst, dann das Logo groß darauf, dann fliegt es in den Header,
   dann Menüleiste, dann ordnet sich das Video in seinen Rahmen, dann der Inhalt.
   Alle Zeiten stehen als Variablen in der jeweiligen Seite. */

html.intro-on{overflow:hidden}
html.intro-on body{cursor:default}

/* --- Menüleiste: startet oberhalb des Bildrands --- */
header{transition:transform .65s cubic-bezier(.2,.7,.3,1),opacity .5s ease}
html.intro-on header{transform:translateY(-115%);opacity:0;pointer-events:none}
header.measure{transform:none!important;transition:none!important}

/* Das Logo im Header animiert NICHT, solange die Eröffnung läuft — dort
   übernimmt das Bühnenlogo, das anschließend an seinen Platz fliegt.

   Die Bedingung `html.intro-laeuft` ist der Punkt. Ohne sie galt die
   Abschaltung auf der Startseite immer, auch wenn die Eröffnung gar nicht
   gespielt wurde: bei der Rückkehr aus dem Vor-/Zurück-Speicher des Browsers,
   bei übersprungener Eröffnung und im Bake-off-Rahmen. Das Logo stand dann
   einfach da, während es auf jeder anderen Seite aufrollt — genau der
   Unterschied zwischen Kontaktseite und Startseite. */
html.intro-laeuft header .brand .ring{animation:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html.intro-laeuft header .brand .word{animation:none!important;opacity:1}
html.intro-on header .brand{opacity:0}
header .brand{transition:opacity .35s ease}

/* --- Hero-Inhalt: erscheint zuletzt, gestaffelt --- */
.hero > *{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
html.intro-on .hero > *{opacity:0;transform:translateY(22px)}
.hero > *:nth-child(1){transition-delay:0s}
.hero > *:nth-child(2){transition-delay:.16s}
.hero > *:nth-child(3){transition-delay:.32s}
/* Vierter und fünfter Platz: Mit der Rufnummernzeile ist der Hero um ein
   Element gewachsen. Ohne diese beiden Zeilen erschienen die letzten Teile
   ohne Verzögerung, also gleichzeitig — genau das, was die Staffelung
   vermeiden soll. */
.hero > *:nth-child(4){transition-delay:.46s}
.hero > *:nth-child(5){transition-delay:.58s}

/* --- Video: startet bildfüllend, wandert in seinen Rahmen --- */
.bandslot{position:relative}
.band.staged{position:fixed;z-index:80;margin:0;
  transition:top var(--t-video) var(--e-video),left var(--t-video) var(--e-video),
             width var(--t-video) var(--e-video),height var(--t-video) var(--e-video),
             border-color var(--t-video) linear}
.band.staged video{transition:transform var(--t-video) var(--e-video)}
.band.staged .tag{opacity:0;transition:opacity .6s ease}
.band.staged.landing .tag{opacity:1;transition-delay:.35s}

/* --- Bühnenlogo: groß über dem Video, fliegt danach in den Header --- */
.stagebrand{position:fixed;z-index:90;transform-origin:0 0;will-change:transform;pointer-events:none;
  transition:transform var(--t-fly) var(--e-fly),opacity .3s ease}
.stagebrand img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stagebrand .ring{
  -webkit-mask-image:conic-gradient(from 180deg at 34% 50%,#000 var(--unroll),transparent var(--unroll));
  mask-image:conic-gradient(from 180deg at 34% 50%,#000 var(--unroll),transparent var(--unroll))}
.stagebrand.rolling .ring{animation:unroll var(--t-unroll) cubic-bezier(.25,.8,.25,1) forwards}
/* Der Schriftzug zündet, er blendet nicht ein.
   Fassung 5 aus `_lab/logo.html`: erst mehrere Fehlzündungen mit echten
   Dunkelphasen, dann zwei Nachzucker, wenn man denkt, es stünde schon.

   `steps(1,end)` ist der Kern: Es wird zwischen den Stützstellen GESCHALTET,
   nicht überblendet. Eine Röhre dimmt nicht — ein weicher Verlauf sieht sofort
   nach Software aus statt nach Technik.

   Ohne `filter`: kein Aufstrahlen, nur das Schaltverhalten. Deshalb geht auch
   kein Wert über die Endhelligkeit hinaus.

   Der letzte Zucker sitzt bei 83 % — bei 2,4 s Dauer also nach rund 2,0 s.
   Genau dann startet der Flug in die Kopfzeile (`word:2000` in window.INTRO).
   Das Logo fliegt los, sobald es steht. */
.stagebrand .word{opacity:0}
.stagebrand.worded .word{animation:zuenden 2.4s steps(1,end) forwards}
/* Die Stützstellen stehen in tokens.css — dieselbe Kurve trägt auch das
   Logo in der Kopfzeile, dort in 1,3 s. Eine zweite Definition hier wäre
   eine zweite Stelle, an der man sie pflegen müsste. */
.stagebrand.gone{opacity:0}

/* Abkürzen erlaubt */
.skipnote{position:fixed;z-index:95;right:22px;bottom:20px;font-family:var(--font-body);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:0;transition:opacity .6s ease;pointer-events:none}
html.intro-on .skipnote{opacity:1;transition-delay:1.4s}

@media(prefers-reduced-motion:reduce){
  html.intro-on{overflow:auto}
  html.intro-on header,html.intro-on .hero > *,html.intro-on header .brand{transform:none;opacity:1}
  .stagebrand,.skipnote{display:none}
  .band.staged{position:relative!important;inset:auto!important;width:auto!important;height:auto!important}
}