/*
 * boot.css — kurzer Boot-Bildschirm: Logo zeichnet sich selbst,
 * Fortschrittslinie, Boot-Protokoll. Ablauf steuert js/boot.js.
 */

.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  background: #000;
  cursor: pointer;
  transition: opacity 420ms ease;
}

.boot.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot .logo-mark {
  width: 96px;
  height: 96px;
}

/* Linien zeichnen sich (Strichlaenge groesser als jeder Pfad) */
.boot .logo-mark path {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: draw 900ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

.boot .mark-ground { animation-delay: 0ms; }
.boot .mark-castle { animation-delay: 150ms; }
.boot .mark-door   { animation-delay: 550ms; }
.boot .mark-air    { animation-delay: 700ms; }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.boot .logo-word,
.boot .logo-rule,
.boot .logo-sub {
  opacity: 0;
  animation: fade-up 600ms ease forwards;
}

.boot .logo-word { animation-delay: 700ms; }
.boot .logo-rule { animation-delay: 850ms; }
.boot .logo-sub  { animation-delay: 950ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.boot-bar {
  width: 160px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.boot-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 160ms linear;
}

.boot-log {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--safe-bottom) + var(--gutter));
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--bar-fg-faint);
  white-space: pre;
}

.boot-skip {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--safe-bottom) + var(--gutter));
  margin: 0;
  font-size: 11px;
  color: var(--bar-fg-faint);
}

@media (max-width: 720px) {
  .boot-skip {
    display: none;
  }
}