/* The night stage: the dream backdrop's purples, spotlight amber, the logo's red */
:root {
	--bg: #0e0c16;
	--panel: #1a1627;
	--line: #2e2840;
	--text: #ebe6f2;
	--muted: #a59fb6;
	--red: #ec1c24;
	--amber: #f5b84a;
	--measure: 60ch;
	--display: "Stardos Stencil", Georgia, serif;
	--pixel: "Silkscreen", ui-monospace, monospace;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 19px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--amber);
}

h2 {
	margin: 0 0 0.6em;
	font: 700 clamp(2rem, 5vw, 3rem) / 1.1 var(--display);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

h3 {
	margin: 0 0 0.4em;
	font: 400 1.1rem / 1.2 var(--pixel);
	text-transform: uppercase;
	color: var(--amber);
}

/* Hero: the logo on the dream stage, spotlights and all */
.hero {
	position: relative;
	isolation: isolate;
	min-height: min(92svh, 900px);
	display: grid;
	place-items: center;
	padding: 48px 16px 64px;
	background: var(--bg);
	text-align: center;
}

/* The stage scrolls past right to left, as if you're running through a level: each layer
   is a 1280x720 tile (website/media.py) scaled to the hero's height and repeated
   sideways, moving at the game's own scroll scales (levels/stage_backdrop.tscn): the sky
   stays put, the crowd 0.25, the haze 0.4, the lighting truss 0.5 */
.backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	container-type: size;
}

.backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(14 12 22 / 0.1), rgb(14 12 22 / 0.4) 65%, var(--bg));
}

.layer {
	--tile: calc(100cqh * 16 / 9);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(100cqw + var(--tile) + 2px);
	background: 0 0 / auto 100% repeat-x;
	image-rendering: pixelated;
	animation: scroll-left var(--time) linear infinite;
	will-change: transform;
}

/* One tile's width every --time: the truss crosses a screen's width in 30 s */
.sky {
	background-image: url("/img/hero-sky.png");
	animation: none;
}

.arena {
	background-image: url("/img/hero-arena.png");
	--time: 60s;
}

.haze {
	background-image: url("/img/hero-haze.png");
	--time: 37.5s;
}

.rig {
	background-image: url("/img/hero-rig.png");
	--time: 30s;
}

@keyframes scroll-left {
	to {
		transform: translateX(calc(-1 * var(--tile)));
	}
}

.hero h1 {
	margin: 0 auto 16px;
	width: min(420px, 74vw);
}

.hero h1 img {
	filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.7));
}

.tagline {
	margin: 0 0 24px;
	font: 400 clamp(1rem, 2.8vw, 1.35rem) / 1.6 var(--pixel);
	color: var(--amber);
	text-shadow: 0 2px 0 #000;
}

.status-pill {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--line);
	background: rgb(14 12 22 / 0.7);
	color: var(--muted);
	font: 400 0.75rem / 1.6 var(--pixel);
	text-transform: uppercase;
}

.section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 64px 16px;
}

.story {
	max-width: calc(var(--measure) + 32px);
}

.story p {
	margin: 0 0 1.1em;
	color: var(--muted);
}

.story p:first-of-type {
	color: var(--text);
}

.story p:last-child {
	color: var(--text);
}

/* The two characters, pixel art at whole-number scales */
.cast {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 32px;
}

.character {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 0 24px 24px;
}

.character p {
	margin: 0;
	color: var(--muted);
}

.portrait {
	height: 448px;
	margin: 0 -24px 24px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 16px;
	background:
		radial-gradient(ellipse 45% 75% at 50% 100%, rgb(245 184 74 / 0.22), transparent 70%),
		linear-gradient(to bottom, #15121f, #1f1a30);
	border-bottom: 3px solid var(--amber);
}

.dark-one {
	width: 192px;
	image-rendering: pixelated;
}

/* The guitarist's idle with the Magical V: four 96 px frames, shown at 4x */
.guitarist {
	width: 384px;
	height: 384px;
	max-width: 100%;
	background: url("/img/guitarist-idle.png") 0 0 / 400% 100% no-repeat;
	image-rendering: pixelated;
	animation: idle 0.43s steps(4) infinite;
}

@keyframes idle {
	to {
		background-position: 133.333% 0;
	}
}

@media (max-width: 440px) {
	.portrait {
		height: 340px;
	}

	.dark-one {
		width: 144px;
	}

	.guitarist {
		width: 288px;
		height: 288px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.guitarist,
	.layer {
		animation: none;
	}
}

.footer {
	border-top: 1px solid var(--line);
	padding: 32px 16px 48px;
	text-align: center;
	color: var(--muted);
	font-size: 0.85rem;
}

.footer img {
	margin: 0 auto 12px;
}

.footer p {
	margin: 0;
}

/* The secret door to the playtest page (main.js): no hint until it's clicked */
.footer img.spin {
	transition: transform 0.45s ease-in;
	transform: rotate(360deg) scale(1.6);
}

/* The playtest page (website/playtest.py) */
.hero-short {
	min-height: min(56svh, 520px);
}

.hero-short h1 {
	width: min(220px, 50vw);
}

.playtest {
	max-width: calc(var(--measure) + 32px);
	color: var(--muted);
}

.playtest h3 {
	margin-top: 2em;
}

.playtest .caveats-title {
	margin-top: 0;
}

.caveats {
	margin: 0 0 3em;
	padding: 16px 20px 16px 40px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-left: 3px solid var(--amber);
}

.caveats li:last-child {
	margin-bottom: 0;
}

.playtest strong {
	color: var(--text);
}

.playtest li {
	margin-bottom: 0.4em;
}

.downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.button {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 24px;
	border: 2px solid var(--red);
	background: var(--red);
	color: #fff;
	font: 400 1rem / 1.2 var(--pixel);
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 4px 4px 0 #000;
	transition: transform 0.08s, box-shadow 0.08s;
}

.button small {
	font-size: 0.7rem;
	opacity: 0.8;
}

.button:hover,
.button:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
}

.button:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.question {
	color: var(--text);
}