/* ============================================================
   BOOT SEQUENCE — signature load moment
   Mimics powering on precision hardware: scanline sweep,
   blade-mark assembly, three-stage status readout, then
   the loader blades part like the logo itself to reveal page.
   ============================================================ */

#boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#boot[data-stage="done"] {
  pointer-events: none;
}

.boot-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0;
  animation: gridFadeIn 1.2s var(--ease-blade) forwards;
  animation-delay: 0.1s;
}
@keyframes gridFadeIn { to { opacity: 0.35; } }

.boot-core {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Mark assembly: two blade halves that slide together */
.boot-mark {
  position: relative;
  width: 120px;
  height: 92px;
}
.boot-mark svg { width: 100%; height: 100%; }

.blade-top, .blade-bottom {
  opacity: 0;
  transition: none;
}
.blade-top {
  transform: translate(-40px, -30px) rotate(-8deg);
}
.blade-bottom {
  transform: translate(40px, 30px) rotate(8deg);
}
#boot[data-stage="assemble"] .blade-top,
#boot[data-stage="status"] .blade-top,
#boot[data-stage="lift"] .blade-top {
  animation: bladeInTop 0.7s var(--ease-snap) forwards;
}
#boot[data-stage="assemble"] .blade-bottom,
#boot[data-stage="status"] .blade-bottom,
#boot[data-stage="lift"] .blade-bottom {
  animation: bladeInBottom 0.7s var(--ease-snap) forwards;
  animation-delay: 0.08s;
}
@keyframes bladeInTop {
  0% { opacity: 0; transform: translate(-40px, -30px) rotate(-8deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes bladeInBottom {
  0% { opacity: 0; transform: translate(40px, 30px) rotate(8deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

.boot-core-glow {
  opacity: 0;
  filter: drop-shadow(0 0 0px var(--red));
}
#boot[data-stage="assemble"] .boot-core-glow,
#boot[data-stage="status"] .boot-core-glow,
#boot[data-stage="lift"] .boot-core-glow {
  animation: coreGlow 1.6s ease-in-out 0.5s forwards;
}
@keyframes coreGlow {
  0% { opacity: 0; filter: drop-shadow(0 0 0px var(--red)); }
  60% { opacity: 1; filter: drop-shadow(0 0 18px var(--red-glow)); }
  100% { opacity: 1; filter: drop-shadow(0 0 8px var(--red)); }
}

/* Status readout: three stage words ignite in sequence */
.boot-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-dim);
  display: flex;
  gap: 18px;
  height: 16px;
}
.boot-status span { position: relative; transition: color 0.35s ease; }
.boot-status span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-snap);
}
.boot-status span.is-active { color: var(--white); }
.boot-status span.is-active::after { transform: scaleX(1); }
.boot-status span.is-done { color: var(--red); }

/* Progress hairline */
.boot-progress {
  width: 220px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.boot-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s linear;
}

/* Final lift: blades separate outward like the logo's negative space, whole boot rises and fades */
#boot[data-stage="lift"] .boot-core {
  animation: coreLift 0.6s var(--ease-snap) forwards;
}
@keyframes coreLift {
  to { opacity: 0; transform: scale(1.08) translateY(-14px); }
}
#boot[data-stage="lift"] .boot-grid {
  animation: gridOut 0.6s ease forwards;
}
@keyframes gridOut { to { opacity: 0; } }

#boot[data-stage="lift"] {
  animation: bootOut 0.7s var(--ease-snap) 0.5s forwards;
}
@keyframes bootOut {
  to { opacity: 0; visibility: hidden; }
}

/* Curtain blades that wipe away — echoes the logo's diagonal cut */
.boot-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
#boot[data-stage="lift"] .boot-curtain { opacity: 1; }
.boot-curtain .panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 52%;
  background: var(--void);
}
.boot-curtain .panel--l { left: 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.boot-curtain .panel--r { right: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }

#boot[data-stage="lift"] .boot-curtain .panel--l {
  animation: curtainL 0.8s var(--ease-snap) forwards;
}
#boot[data-stage="lift"] .boot-curtain .panel--r {
  animation: curtainR 0.8s var(--ease-snap) forwards;
}
@keyframes curtainL { to { transform: translateX(-105%); } }
@keyframes curtainR { to { transform: translateX(105%); } }

body.boot-active { overflow: hidden; height: 100vh; }

@media (max-width: 600px) {
  .boot-mark { width: 92px; height: 70px; }
  .boot-status { font-size: 10px; gap: 12px; }
  .boot-progress { width: 160px; }
}