/* Intro beim Öffnen (boot.js). Zeiten passen zu intro.wav.
   Nur transform und opacity werden animiert: Das rechnet die Grafikeinheit allein, auch während die
   App dahinter ihre Startseite aufbaut. Farbwechsel und clip-path liefen früher auf dem Hauptthread
   und ruckelten genau dann, wenn die App lud – der Farbwechsel des J ist deshalb eine Überblendung
   zweier J, und den Schriftzug deckt ein schwarzer Vorhang auf, der zur Seite gleitet. */
@font-face {
  font-family: "Jellyflix Intro";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}
/* Schon vor dem App-Stylesheet dunkel, damit beim Laden nichts weiß aufblitzt. */
body {
  margin: 0;
  background: #141414;
}
.boot-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
  font-family: "Jellyflix Intro", "Inter Variable", system-ui, sans-serif;
  --accent: #ee4055;
  /* Chromium zoomt vw mit: die TV-Skalierung (zoom, --vz) hier wieder herausrechnen. */
  --bvw: calc(1vw / var(--vz, 1));
  will-change: opacity;
}
.boot-logo {
  display: flex;
  align-items: baseline;
  font-size: clamp(56px, calc(9 * var(--bvw)), 220px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  will-change: transform, opacity;
}
/* Alle bewegten Teile liegen von Anfang an auf eigenen Ebenen: Beim Start muss nichts mehr
   gerastert werden, das erste Bild der Bewegung ist sofort da.
   Je Element genau eine Animation: Zwei Animationen auf transform am selben Element (Aufspringen
   und Wegfahren des J) kann Chromium nicht auf der Grafikeinheit laufen lassen – das J lief deshalb
   auf dem Hauptthread und stockte, sobald die App dahinter lud. Außen fährt, innen springt. */
.boot-j {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateX(var(--shift, 0));
  will-change: transform;
}
.boot-j-pop {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: scale(0.55);
  will-change: transform, opacity;
}
.boot-j-red {
  color: var(--accent);
}
.boot-j-white {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  opacity: 0;
  will-change: opacity;
}
.boot-rest {
  /* Fährt mit dem J nach links und wird dabei von links her aufgedeckt. */
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transform: translateX(var(--shift, 0));
  will-change: transform;
}
.boot-flix {
  color: var(--accent);
}
/* Deckt den Schriftzug ab und gleitet nach rechts weg – wirkt wie ein wanderndes clip-path,
   läuft aber vollständig auf der Grafikeinheit. Schwarz wie der Hintergrund. */
.boot-curtain {
  position: absolute;
  top: -0.15em;
  bottom: -0.15em;
  left: 0;
  width: 100%;
  background: #000;
  will-change: transform;
}
.boot-sweep {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(40px, calc(6.2 * var(--bvw)), 150px));
  width: clamp(240px, calc(46 * var(--bvw)), 1100px);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}
.boot-intro.run .boot-j-pop {
  animation: boot-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.15s forwards;
}
.boot-intro.run .boot-j {
  animation: boot-slide 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}
.boot-intro.run .boot-j-white {
  animation: boot-fade-in 0.5s ease 0.8s forwards;
}
.boot-intro.run .boot-rest {
  animation: boot-rest 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}
.boot-intro.run .boot-curtain {
  animation: boot-curtain 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}
.boot-intro.run .boot-sweep {
  animation: boot-sweep 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) 1s forwards;
}
/* Startseite lädt noch: Logo bleibt stehen, die Linie atmet ruhig. */
.boot-intro.run.wait .boot-sweep {
  animation: boot-breathe 1.6s ease-in-out infinite;
}
.boot-intro.out .boot-logo {
  animation: boot-grow 0.7s cubic-bezier(0.6, 0, 0.9, 0.3) forwards;
}
.boot-intro.out {
  animation: boot-out 0.45s ease-in 0.25s forwards;
}
.boot-intro.skip {
  animation: boot-out 0.25s ease-in forwards;
}
@keyframes boot-pop {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes boot-fade-in {
  to {
    opacity: 1;
  }
}
@keyframes boot-slide {
  to {
    transform: none;
  }
}
@keyframes boot-rest {
  to {
    transform: none;
  }
}
@keyframes boot-curtain {
  to {
    transform: translateX(100%);
  }
}
@keyframes boot-sweep {
  40% {
    opacity: 1;
  }
  to {
    transform: translateX(-50%) scaleX(1);
    opacity: 0;
  }
}
@keyframes boot-breathe {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(-50%) scaleX(0.3);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) scaleX(0.85);
  }
}
@keyframes boot-grow {
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
/* Nur Deckkraft (visibility ließe sich nicht auf der Grafikeinheit animieren); boot.js entfernt das Intro danach. */
@keyframes boot-out {
  to {
    opacity: 0;
  }
}