/* GLOBALS */
@property --fg-color {
	syntax: '<color>';
	inherits: true;
	initial-value: #4cb4e7;
}

:root {
	--pixel-opacity: 1;
	--px-ratio: 35%;
	animation: red-alert 4s ease infinite;
}

/* BASIC RESET */
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

html {
	background: radial-gradient(
			100% 80%,
			color-mix(in oklab, #000 100%, var(--fg-color) 25%) 10%,
			#00000000 75%
		),
		#000;
	height: 100dvh;
}

body {
	position: relative;
	display: block;
	font-family: 'Departure Mono', 'Courier New', Courier, monospace;
	letter-spacing: 1px;
	height: 100%;
	padding: 0 1rem;
	overflow: hidden;
	color: var(--fg-color);
}

/* OVERLAY */
body::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(
		0deg,
		rgba(20, 20, 20, 0.35) 0%,
		rgba(20, 20, 20, 0) 30%,
		rgba(20, 20, 20, 0) 70%,
		rgba(20, 20, 20, 0.35) 100%
	);
	background-size: 100% 3pt, 3pt 100%;
	pointer-events: none;
	mix-blend-mode: overlay;
	z-index: 1;
	animation: scan 750ms linear infinite;
}

/* LAYOUT */
main {
	height: 100%;
	max-width: 64rem;
	margin: 0 auto;
	gap: 3vh;
	filter: blur(clamp(0.25pt, 0.1vw, 0.5pt)); /* pedantic nonsense */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.clock {
	font-size: clamp(1.5rem, 4vw, 4rem);
	text-align: center;
	display: grid;
	letter-spacing: 10%;
	grid-template: 1fr / 1fr;

	span {
		grid-area: 1 / 1;

		&[data-layer='background'] {
			opacity: 0.15;
		}
	}

	.sep {
		animation: blink 1s ease-out infinite alternate;
	}

	.ms {
		font-size: 50%;
		vertical-align: 0.75em;
	}
}

svg {
	z-index: -2;
	fill: var(--fg-color);
	width: clamp(1.5rem, 5vw, 3rem);
	opacity: 0.25;
}

h1 {
	order: 3;
	text-transform: uppercase;
	opacity: 0.5;
	font-size: clamp(1rem, 2vw, 1.25rem);
}

@keyframes scan {
	0% {
		background-position-y: 0;
	}

	100% {
		background-position-y: 3pt;
	}
}

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

	100% {
		opacity: 0.25;
	}
}

@keyframes red-alert {
	0%,
	70%,
	100% {
		--fg-color: #4cb4e7;
	}

	74%,
	80% {
		--fg-color: #f02f2f;
	}

	76%,
	82% {
		--fg-color: #fcb9b9;
	}
}