/* ── Drain swirl ─────────────────────────────────────────────────────────── */

@keyframes boco-drain-swirl {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  99% {
    transform: scale(0.01) rotate(1440deg);
    opacity: 0.1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Black backdrop fades in behind the spinning wrapper over the same 2.5s */
#boco-backdrop {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99997;
  opacity: 0;
  transition: opacity 2.5s linear;
  pointer-events: none;
}

#boco-backdrop.boco-backdrop-active {
  opacity: 1;
}

/* position + z-index keep the wrapper stacked above the backdrop */
#boco-drain-wrapper {
  position: relative;
  z-index: 99998;
  transform-origin: center center;
}

.boco-go-down-drain {
  animation: boco-drain-swirl 2.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
  transform-origin: center center;
}

/* Page restore fade-in when X is clicked */
@keyframes boco-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.boco-fade-in {
  animation: boco-fade-in 0.4s ease forwards;
}

/* ── Full-screen overlay ─────────────────────────────────────────────────── */

#boco-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  overflow: hidden;
}

/* ── BIOS terminal (phase 1) ─────────────────────────────────────────────── */

#boco-terminal {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}

#boco-terminal::-webkit-scrollbar {
  display: none;
}

#boco-terminal .Typewriter__cursor {
  color: #fff;
}

/* ── Binary output (phase 2) ─────────────────────────────────────────────── */

#boco-binary {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 80px;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.8;
  color: #FF6400;
}

#boco-binary::-webkit-scrollbar {
  display: none;
}

/* Prompt header — inherits font/color/weight from #boco-binary */
#boco-prompt {
  display: block;
}

#boco-prompt .Typewriter__cursor {
  color: #FF6400;
}

/* Binary bytes — sparkles wrap only this element; inline-block keeps width tight to text */
#boco-binary sparkly-text {
  --sparkly-text-color: #FF6400;
  display: inline-block;
}

/* Animated orange→white→orange gradient text for the final binary reveal */
@keyframes boco-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.boco-gradient-text {
  background: linear-gradient(90deg, #FF6400 0%, #ffffff 50%, #FF6400 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: boco-gradient-shift 3s linear infinite;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  display: inline-block; /* required for background-clip: text */
}

/* ── Close button ────────────────────────────────────────────────────────── */

#boco-close {
  position: absolute;
  top: 14px;
  right: 22px;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
  user-select: none;
  z-index: 100000;
}

#boco-close.visible {
  opacity: 0.45;
}

#boco-close.visible:hover {
  opacity: 1;
}