/* The colours of the game's main menu: its gold lines, see gui/pregame/sprites.xml. */
:root {
	--gold: rgb(156 113 55);
	--gold-light: rgb(240 212 138);
	--text: #ece6d8;
	--muted: #b3a990;
	--bg: #141210;
	/* Scale of the logo plaque, laid out in the game's own units: 316 by 100. */
	--s: 1.9;
	/* The plaque's gold edges. */
	--edge: max(1px, calc(var(--s) * 0.8px));
}

@media (max-width: 700px) {
	:root { --s: 1.05; }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--gold-light); }

/* The background: the preview picture under the video, which fades in once it plays. */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--bg) url("img/preview.jpg") center / cover no-repeat;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-video.playing { opacity: 1; }

.hero-shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgb(0 0 0 / 0.15) 0%, rgb(0 0 0 / 0.55) 75%),
		linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.7) 100%);
}

.hero-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 16px;
	text-align: center;
}

/* The logo plaque of the main menu, see gui/pregame/ProjectInformation.xml: layers of the top bar's texture edged
   in gold, stepped toward the sides, with a dark panel and gold lines inside. */
.plaque {
	position: relative;
	width: calc(316px * var(--s));
	height: calc(100px * var(--s));
	margin: 0 0 calc(18px * var(--s));
	filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.6));
}

.plaque-layer { position: absolute; }

.plaque-layer.gold {
	background: #2b2b2b url("img/plaque.png") center / cover;
	border: var(--edge) solid var(--gold);
}

.plaque-layer.dark { background: rgb(30 30 30 / 0.9); }

.plaque-layer.lines {
	border-left: var(--edge) solid var(--gold);
	border-right: var(--edge) solid var(--gold);
}

/* Insets in the game's units: left and right, top and bottom; the dark panels sit 2 inside their boxes. */
.a { inset: 0 calc(4px * var(--s)); }
.b { inset: calc(4px * var(--s)) calc(8px * var(--s)); }
.c { inset: calc(14px * var(--s)) calc(-10px * var(--s)); }
.d { inset: calc(18px * var(--s)) calc(-6px * var(--s)); }
.e { inset: calc(6px * var(--s)) calc(22px * var(--s)); }
.f { top: calc(5px * var(--s)); bottom: calc(5px * var(--s)); left: calc(17px * var(--s)); width: calc(5px * var(--s)); }
.g { top: calc(5px * var(--s)); bottom: calc(5px * var(--s)); right: calc(17px * var(--s)); width: calc(5px * var(--s)); }
.h { inset: calc(19px * var(--s)) calc(10px * var(--s)); }
.i { top: calc(20px * var(--s)); bottom: calc(20px * var(--s)); left: calc(4px * var(--s)); width: calc(5px * var(--s)); }
.j { top: calc(20px * var(--s)); bottom: calc(20px * var(--s)); right: calc(4px * var(--s)); width: calc(5px * var(--s)); }

/* The logo with its breathing gold halo behind and light over its letters, as LogoGlow.js draws them. */
.logo, .logo-halo, .logo-light {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.logo {
	width: calc(176px * var(--s));
	height: calc(88px * var(--s));
}

.logo-halo {
	width: calc(226px * var(--s));
	height: calc(112px * var(--s));
	background: rgb(255 184 72);
	-webkit-mask: url("img/logo-glow.png") center / 100% 100% no-repeat;
	mask: url("img/logo-glow.png") center / 100% 100% no-repeat;
	animation: halo 4s ease-in-out infinite;
}

.logo-light {
	width: calc(176px * var(--s));
	height: calc(88px * var(--s));
	background: rgb(255 226 150);
	-webkit-mask: url("img/logo.png") center / 100% 100% no-repeat;
	mask: url("img/logo.png") center / 100% 100% no-repeat;
	animation: light 4s ease-in-out infinite;
}

@keyframes halo {
	0%, 100% { opacity: 0.06; }
	50% { opacity: 0.31; }
}

@keyframes light {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.14; }
}

.status {
	margin: 0 0 22px;
	color: var(--text);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-shadow: 0 0 6px rgb(0 0 0 / 0.95), 0 1px 2px rgb(0 0 0 / 0.95);
}

/* The download buttons, in the plaque's texture and gold; the visitor's system is lit, see main.js. */
.downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.download {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 168px;
	padding: 12px 22px;
	background: #2b2b2b url("img/plaque.png") center / cover;
	border: 1px solid var(--gold);
	text-decoration: none;
	color: var(--text);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.5);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.download:hover, .download:focus-visible {
	border-color: var(--gold-light);
	box-shadow: 0 0 0 1px var(--gold-light), 0 0 22px rgb(240 190 90 / 0.35);
	transform: translateY(-2px);
	outline: none;
}

.download-name {
	font-family: "Cinzel", Georgia, serif;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--gold-light);
	letter-spacing: 0.04em;
}

.download-kind {
	font-size: 0.85rem;
	color: var(--muted);
}

.download.current {
	background: linear-gradient(180deg, rgb(226 192 113 / 0.28), rgb(156 113 55 / 0.28)), #2b2b2b url("img/plaque.png") center / cover;
	border-color: var(--gold-light);
}

.all-releases {
	margin-top: 16px;
	font-size: 0.9rem;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

footer {
	padding: 18px 16px 22px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--muted);
	border-top: 1px solid var(--gold);
}

@media (prefers-reduced-motion: reduce) {
	.logo-halo, .logo-light { animation: none; }
	.logo-halo { opacity: 0.18; }
	.download { transition: none; }
}