/* ===========================
   BOOT SEQUENCE OVERLAY
=========================== */

.boot-screen {
  position: fixed;
  inset: 0;

  background: black;
  color: white;

  font-family: 'JetBrains Mono', monospace;

  z-index: 99999;

  display: none; /* HIDDEN BY DEFAULT */

  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 2rem;

  overflow: hidden;
}

/* TERMINAL WINDOW */

.boot-terminal {
  width: min(800px, 95%);
  height: min(500px, 80vh);

  border: 1px solid rgba(255, 255, 255, 0.3);

  padding: 1.2rem;

  background: #020204;

  overflow: hidden;

  position: relative;
}

/* TEXT */

.boot-text {
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* CURSOR */

.boot-cursor {
  display: inline-block;
  width: 8px;
  height: 1rem;
  background: white;
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

/* SYSTEM READY */

.system-ready {
  position: absolute;
  inset: 0;

  background: black;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'VT323', monospace;
  font-size: 3rem;

  opacity: 0;

  transition: opacity 1s;
}

.system-ready.active {
  opacity: 1;
}

/* STATIC */

.static-overlay {
  position: absolute;
  inset: 0;

  background: repeating-radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 2px
  );

  opacity: 0;
  pointer-events: none;
}

/* REWIND */

.rewind {
  position: absolute;
  inset: 0;

  background: black;

  opacity: 0;

  transform: scaleY(1);

  transition: 0.6s;
}

.rewind.active {
  opacity: 1;
  transform: scaleY(0);
}

/* ANIM */

@keyframes blink {
  50% {
    opacity: 0;
  }
}