:root {
	color-scheme: dark;
	--background: #0a0a10;
	--text: #c5c3cf;
	--muted: #8d899d;
	--red: #ff647c;
	--cyan: #75e8ee;
	--split: 2px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100svh;
	isolation: isolate;
	background: var(--background);
	color: var(--text);
	font-size: 13px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--cyan); color: var(--background); }

.signal-field, .signal-grid, .tracking-band, body::after {
	position: fixed;
	pointer-events: none;
}
.signal-field { inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .8; }
.signal-grid {
	inset: 0;
	z-index: -1;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='384' viewBox='0 0 384 384'%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%2375e8ee' stroke-opacity='.3' d='M59 128h10m-5-5v10M315 320h10m-5-5v10'/%3E%3Cpath stroke='%23ff647c' stroke-opacity='.25' d='M251 64h10m-5-5v10'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(#a89ab00c 1px, transparent 1px),
		linear-gradient(90deg, #a89ab00c 1px, transparent 1px);
	background-size: 384px 384px, 64px 64px, 64px 64px;
	mask-image: radial-gradient(ellipse at 50% 40%, #000, #0005 85%);
}
body::after {
	content: "";
	inset: 0;
	z-index: 10;
	background: repeating-linear-gradient(transparent 0 3px, #00000030 3px 4px);
	opacity: .25;
}
.tracking-band {
	inset: -80px 0 auto;
	height: 55px;
	z-index: 11;
	background: linear-gradient(transparent, #75e8ee09 45%, #ff647c0c 48%, transparent);
	animation: tracking-pass 13s linear infinite;
}

header, .content, footer { width: min(1040px, calc(100% - 96px)); margin-inline: auto; }
header { padding-top: clamp(30px, 5vh, 64px); }
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.logo {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 44px 0 32px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(64px, 9.3vw, 130px);
	font-weight: 800;
	letter-spacing: -.075em;
	line-height: .91;
}
.logo-link { display: block; color: #e6e4ee; text-decoration: none; }
.logo-link span { display: block; position: relative; width: fit-content; }
.logo-link span::before, .logo-link span::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: .75;
}
.logo-link span::before {
	color: var(--red);
	transform: translateX(calc(-1 * var(--split)));
	clip-path: polygon(0 9%, 100% 9%, 100% 31%, 0 31%, 0 58%, 100% 58%, 100% 66%, 0 66%);
}
.logo-link span::after {
	color: var(--cyan);
	transform: translateX(var(--split));
	clip-path: polygon(0 31%, 100% 31%, 100% 58%, 0 58%, 0 77%, 100% 77%, 100% 86%, 0 86%);
}
.logo-link:hover span::before, .logo-link:hover span::after,
.logo-link:focus-visible span::before, .logo-link:focus-visible span::after { animation: title-tear .55s steps(1) both; }
.s { position: absolute; left: calc(100% + 14px); top: 0; font-size: .46em; color: var(--red); font-weight: 400; transform-origin: 50% 45%; }

.content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-block: 38px 20px; counter-reset: entry; }
.chat {
	position: relative;
	min-width: 0;
	counter-increment: entry;
	padding: 30px 0 32px 38px;
	border-top: 1px solid #35313f;
	transition: background-color .2s, border-color .2s;
}
.chat:first-child { grid-column: 1 / -1; padding-block: 26px; border-top: 0; font-size: 15px; }
.chat::before {
	content: counter(entry, decimal-leading-zero);
	position: absolute;
	top: 34px;
	left: 0;
	color: #90869c;
	font-size: 9px;
}
.chat:first-child::before { top: 31px; color: var(--red); }
.chat::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--red), transparent 40%, var(--cyan));
	opacity: 0;
	transition: opacity .2s;
}
.chat:hover::after, .chat:focus-within::after { opacity: 1; }
.chat:hover, .chat:focus-within { background-color: #a99cbd04; }
.chat h2 { margin: 0 0 14px; color: #e6e4ee; font: 500 25px/1.2 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.chat p { margin: 0; }
.chat p + p { margin-top: 14px; }
.chat s { color: var(--muted); }
a { color: var(--cyan); text-underline-offset: 5px; }
.chat:hover h2, a:not(.logo-link):hover, a:not(.logo-link):focus-visible { animation: channel-slip .45s steps(1) both; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--cyan); outline-offset: 6px; }
footer { margin-bottom: 35px; padding-top: 20px; border-top: 1px solid #35313f; font-size: 9px; }
.cursor { color: var(--red); animation: blink 2.5s steps(1) infinite; }

/* Keep the original cat as the signal's troublemaker. */
.kote {
	position: fixed;
	left: -70px;
	bottom: 12px;
	z-index: 20;
	width: 100px;
	height: 87px;
	padding: 0;
	border: 0;
	background: url("../images/frogcat.png") top left no-repeat;
	cursor: pointer;
	filter: grayscale(1) brightness(.8) drop-shadow(2px 0 #75e8ee60) drop-shadow(-2px 0 #ff647c60);
	transition: left .65s ease;
}
.kote.is-awake { left: 0; }
.kote.is-running { left: calc(100% + 100px); transition: left 2s ease-in; }
.weee, .pur { display: none; pointer-events: none; }
.weee { margin-left: -70px; }
.pur { position: absolute; left: 100%; top: 0; }
.kote.is-awake .pur, .kote.is-running .weee { display: block; }
body.signal-glitch .chat, body.signal-glitch .logo { animation: signal-break .6s steps(1); }
body.signal-glitch .tracking-band { animation: tracking-burst .6s steps(1); }

@keyframes blink { 50% { opacity: .25; } }
@keyframes tracking-pass { 0%, 65% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 160px)); } }
@keyframes title-tear { 15%, 45% { translate: 7px 0; } 30%, 60% { translate: -5px 0; } 100% { translate: 0; } }
@keyframes channel-slip { 0%, 40% { text-shadow: -3px 0 #ff647ca0, 3px 0 #75e8eea0; translate: 1px 0; } 20%, 60% { text-shadow: 2px 0 #ff647ca0, -2px 0 #75e8eea0; } 100% { text-shadow: none; translate: 0; } }
@keyframes signal-break { 10%, 40% { translate: 5px 0; text-shadow: -5px 0 #ff647c90, 5px 0 #75e8ee90; } 25%, 55% { translate: -3px 0; } 100% { translate: 0; } }
@keyframes tracking-burst { 0%, 30% { transform: translateY(25vh) scaleY(2); } 15%, 50% { transform: translateY(65vh); } 100% { transform: translateY(110vh); } }

@media (max-width: 700px) {
	header, .content, footer { width: calc(100% - 40px); }
	.logo { font-size: clamp(52px, 13vw, 90px); margin-block: 44px 28px; }
	.s { left: calc(100% + 8px); }
	.content { grid-template-columns: 1fr; margin-top: 20px; }
	.chat { padding-block: 26px; }
	.chat:first-child { font-size: 13px; }
	.chat h2 { font-size: 23px; }
	.chat::before { top: 30px; }
	footer { font-size: 8px; letter-spacing: .03em; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.signal-field, .tracking-band { display: none; }
	.logo-link span::before, .logo-link span::after { transform: none; opacity: .3; }
}
html.is-paused *, html.is-paused *::before, html.is-paused *::after { animation-play-state: paused !important; }