/* ============ BIOS boot screen + CRT effects ============ */

#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  color: #e8e8e8;
  font-family: var(--mono);
  font-size: clamp(11px, 2.2vw, 15px);
  line-height: 1.45;
  cursor: pointer;
  overflow: hidden;
  animation: crt-on .45s cubic-bezier(.2, .8, .3, 1.1) both;
}
#boot.off { animation: crt-off .35s ease-in both; }
#boot pre { margin: 0; font-family: inherit; white-space: pre-wrap; }

.bios-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3vh 4vw;
}
.bios-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.energy-star { flex: 0 0 auto; }
.energy-star svg { width: clamp(72px, 14vw, 120px); height: auto; display: block; }

#bios-lines { margin-top: 2.2vh; flex: 1; }
#bios-lines .bline { min-height: 1.45em; }
#bios-lines .ok { color: #29d829; }
#bios-lines .val { color: #ffe14a; }

.bios-footer { margin-top: auto; color: #9a9a9a; }
#bios-prompt { color: #fff; margin-top: 1.2vh; }

/* --- staged fade-in with CRT flicker (Energy Star logo + system text) --- */
.bios-fade {
  opacity: 0;
  animation:
    bios-fade-in 1.1s ease-out var(--d, 0s) forwards,
    crt-flicker-in 1.1s steps(1, end) var(--d, 0s);
}
@keyframes bios-fade-in {
  from { opacity: 0; filter: brightness(2.2) blur(1.5px); }
  60%  { opacity: 1; filter: brightness(1.35) blur(.4px); }
  to   { opacity: 1; filter: brightness(1) blur(0); }
}
/* irregular brightness drops, like a tube struggling to hold the image */
@keyframes crt-flicker-in {
  0%   { opacity: 0; }
  8%   { opacity: .65; }
  11%  { opacity: .12; }
  16%  { opacity: .8; }
  21%  { opacity: .35; }
  26%  { opacity: .95; }
  33%  { opacity: .55; }
  39%  { opacity: 1; }
  47%  { opacity: .75; }
  54%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --- scanlines --- */
.crt-scanlines {
  position: absolute;
  inset: -8px;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .28) 0px, rgba(0, 0, 0, .28) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  animation: scan-roll 7s linear infinite;
}
/* a brighter band drifting down the tube */
.crt-scanlines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14vh;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.045), transparent);
  animation: scan-band 4.5s linear infinite;
}
@keyframes scan-roll { from { transform: translateY(0); } to { transform: translateY(6px); } }
@keyframes scan-band { from { top: -16vh; } to { top: 110vh; } }

/* --- vignette + global flicker --- */
.crt-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 10, 0, .45) 100%);
  animation: crt-hum .12s steps(2, end) infinite;
}
@keyframes crt-hum {
  0%   { opacity: 1; }
  50%  { opacity: .93; }
  100% { opacity: 1; }
}

/* --- power on/off --- */
@keyframes crt-on {
  0%   { transform: scaleY(.004) scaleX(.6); filter: brightness(6); }
  55%  { transform: scaleY(1.02) scaleX(1); filter: brightness(2.4); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}
@keyframes crt-off {
  0%   { transform: scaleY(1); filter: brightness(1); opacity: 1; }
  60%  { transform: scaleY(.012); filter: brightness(8); opacity: 1; }
  100% { transform: scaleY(.001) scaleX(.1); filter: brightness(10); opacity: 0; }
}

.blink { animation: blink-cursor 1s steps(1, end) infinite; }
@keyframes blink-cursor { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .crt-scanlines, .crt-scanlines::after, .crt-vignette { animation: none; }
  .bios-fade { animation: bios-fade-in 1.1s ease-out var(--d, 0s) forwards; }
  #boot { animation-duration: .01s; }
}