/* ==========================================================================
   BIOS boot screen
   ========================================================================== */

.boot {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: none;
	flex-direction: column;
	padding: clamp(18px, 3vw, 48px) clamp(16px, 4vw, 64px);
	background: #000;
	color: #d8d8d8;
	font-family: var(--f-sys);
	font-size: clamp(18px, 1.55vw, 26px);
	line-height: 1.18;
	overflow: hidden;
}

.is-booting .boot { display: flex; }
.is-booting body { overflow: hidden; }

/* Hide the OS while booting so nothing flashes under the BIOS. */
.is-booting .os,
.is-booting .taskbar { visibility: hidden; }

.boot__badge {
	position: absolute;
	top: clamp(18px, 3vw, 48px);
	right: clamp(16px, 4vw, 64px);
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--red);
	font-family: var(--f-display);
	font-size: clamp(12px, 1vw, 16px);
	line-height: 1.1;
	text-shadow: var(--text-glow);
}


.boot__screen {
	flex: 1;
	margin: 0;
	font: inherit;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: hidden;
}

.boot__screen .b-hi { color: var(--white); }
.boot__screen .b-red { color: var(--red); text-shadow: var(--text-glow); }
.boot__screen .b-ok { color: #7dff9a; }
.boot__screen .b-dim { color: #8a8a8a; }
.boot__screen .b-cursor {
	display: inline-block;
	width: 0.6em;
	height: 1em;
	vertical-align: -0.12em;
	background: currentColor;
	animation: blink 1s steps(1) infinite;
}

.boot__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	padding-top: 12px;
	color: #bdbdbd;
}

/* The CRT "power on": a bright line that opens into the picture. */
.boot.is-leaving { animation: crt-off 0.5s var(--ease-in) forwards; }

@keyframes crt-off {
	0% { transform: scale(1, 1); filter: brightness(1); opacity: 1; }
	55% { transform: scale(1, 0.006); filter: brightness(3); opacity: 1; }
	80% { transform: scale(0.3, 0.006); filter: brightness(5); opacity: 1; }
	100% { transform: scale(0, 0); filter: brightness(8); opacity: 0; }
}

.os.is-powering-on,
.phone.is-powering-on { animation: crt-on 0.7s var(--ease-out) both; }

@keyframes crt-on {
	0% { transform: scale(1, 0.004); filter: brightness(4) saturate(0); opacity: 0.6; }
	45% { transform: scale(1, 0.004); filter: brightness(4); opacity: 1; }
	100% { transform: none; filter: none; opacity: 1; }
}

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

@media (max-width: 899px) {
	.boot { font-size: 16px; padding-top: calc(18px + var(--safe-t)); }
	.boot__badge { position: static; justify-content: flex-start; margin-bottom: 14px; }
}