/* =============================================================================
   COMPONENT — BOOT SEQUENCE
   A brief "system boot" overlay shown once per browser tab session before
   the hero settles in. Deliberately dark-themed regardless of the active
   light/dark toggle — a splash screen is its own moment, not subject to the
   site's chosen theme. Fully CSS-driven: the reveal itself needs no JS,
   only the reduced-motion killswitch (motion.css) and sessionStorage/skip
   enhancements (js/main.js initBootSequence) sit on top.
   Depends on: tokens.css, base/motion.css (boot-halo-pulse, boot-line-in,
   boot-progress-fill, boot-wipe keyframes).
   ============================================================================= */
.boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(12% 0.015 265);
  animation: boot-wipe 1.9s var(--ease-out-expo) forwards;
}

/* Manual skip (click/keydown, see main.js) or a repeat visit within the
   same tab session (sessionStorage, see the inline script in index.html)
   both just hide the overlay outright — no need to replay any part of it. */
.boot--skip {
  display: none !important;
}

.boot.is-skipped {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.boot__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.boot__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot__logo-halo {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(74% 0.17 210 / 0.35) 0%, transparent 72%);
  animation: boot-halo-pulse 1.6s ease-in-out infinite;
}

.boot__logo {
  position: relative;
}

.boot__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.6em;
}

.boot__line {
  font-family: var(--font-mono);
  font-size: var(--text-label-md);
  letter-spacing: var(--ls-label-2xl);
  text-transform: uppercase;
  color: oklch(70% 0.02 265);
  opacity: 0;
  animation: boot-line-in 0.45s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--boot-index, 0) * 0.35s + 0.1s);
}

.boot__line--final {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.boot__progress {
  width: 200px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.1);
  overflow: hidden;
}

.boot__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-holographic);
  background-color: var(--color-accent);
  animation: boot-progress-fill 1.5s linear forwards;
  animation-delay: 0.1s;
}