/* Die Bühne, bevor Flutter da ist.
 *
 * Zwischen dem ersten Byte und dem ersten Flutter-Bild liegen je nach
 * Leitung ein bis zwei Sekunden: CanvasKit, main.dart.js, zwanzig
 * Schriftschnitte. Vorher sah man eine leere Fläche — weiß oder schwarz, je
 * nach Browser — und wusste nicht, ob überhaupt etwas passiert.
 *
 * Dieselben Lichtspuren wie drinnen, aber in reinem CSS: kein Skript, kein
 * Bild ausser der Wortmarke, nichts, worauf man warten müsste. Die Vorlage
 * ist der Hero von chroniclestudio.cloud.
 *
 * Die Wortmarke liegt als eigene, verkleinerte Datei in `web/`
 * (`boot-logo.png`, rund 77 kB). Die gebündelte Fassung hat 918 kB und läge
 * damit auf genau dem kritischen Weg, den dieser Bildschirm überbrücken
 * soll.
 */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0b0806;
}

#boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(120% 75% at 50% 18%, #241608, #0b0806 62%);
  transition: opacity 0.45s ease-out;
}

/* Wenn Flutter sein erstes Bild gemalt hat, blendet die Bühne aus. Kein
   Wegnehmen ohne Überblendung: genau der harte Schnitt, um den es geht. */
#boot.boot--weg {
  opacity: 0;
  pointer-events: none;
}

/* Das feine Raster, zur Mitte hin freigegeben. */
#boot::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 214, 150, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 214, 150, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 38%, #000 30%, transparent 75%);
  mask-image: radial-gradient(75% 60% at 50% 38%, #000 30%, transparent 75%);
}

.boot__spuren {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 18%, #000 82%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 18%, #000 82%, transparent 98%);
}

.boot__spuren svg {
  width: 100%;
  height: 100%;
}

/* Schein ohne Weichzeichner: eine breite blasse Lage unter dem Kern. */
.boot__spur {
  fill: none;
  stroke: url(#bootGrad);
  stroke-linecap: round;
  stroke-dasharray: 0.32 0.68;
  stroke-dashoffset: 1;
  animation: bootlauf 7s linear infinite;
}

.boot__spur--2 { animation-duration: 9s; animation-delay: -3.5s; }
.boot__spur--3 { animation-duration: 5.5s; animation-delay: -1.8s; }
.boot__spur--4 { animation-duration: 11s; animation-delay: -6s; }

.b1c { stroke-width: 2.5; opacity: 0.85; }
.b1g { stroke-width: 10; opacity: 0.2; }
.b2c { stroke-width: 1.8; opacity: 0.6; }
.b2g { stroke-width: 8; opacity: 0.13; }
.b3c { stroke-width: 3; opacity: 0.85; }
.b3g { stroke-width: 12; opacity: 0.22; }
.b4c { stroke-width: 1.4; opacity: 0.45; }
.b4g { stroke-width: 6; opacity: 0.1; }

@keyframes bootlauf {
  from { stroke-dashoffset: 1.32; }
  to { stroke-dashoffset: -0.68; }
}

.boot__mitte {
  position: relative;
  text-align: center;
}

/* Höhe, Atem und Zeile sind mit `ChronicleBreathingLogo` und
   `_BootScreen.bootInhalt` abgeglichen — dieselbe Logohöhe (100), derselbe
   Rhythmus (1,6 s hin, 1,6 s zurück), dieselben Werte für Deckkraft und
   Maßstab. Nur so ist der Wechsel von dieser Bühne auf die von Flutter
   nicht zu sehen. */
.boot__marke {
  height: 100px;
  width: auto;
  max-width: 76vw;
  display: block;
  margin: 0 auto;
  animation: bootatem 3.2s ease-in-out infinite;
}

@keyframes bootatem {
  0%, 100% { opacity: 0.72; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.015); }
}

.boot__zeile {
  margin-top: 22px;
  font-family: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a89e8f;
}

@media (prefers-reduced-motion: reduce) {
  .boot__spur,
  .boot__marke {
    animation: none;
  }
}