/* 100,000 Tickets: one screen in the look of the A Place for Every Potion page (same palette and buttons), with the
   pile under the dome behind it and a footer. */
:root {
	--bg: #0f0b07;
	--text: #f3e7c9;
	--muted: rgba(243, 231, 201, .68);
	--line: rgba(243, 231, 201, .12);
	--line-strong: rgba(243, 231, 201, .28);
	--gold: #e3b25a;
	--gold-bright: #f1c878;
	--ink: #15100b;
	--tagline: #e3c58c;
	--sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
	--ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

/* No background on body: the fixed backdrop sits at z-index -1 and a body background would paint over it.
   Stage and footer share one screen when they fit; the footer moves below the fold when they don't. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	margin: 0;
	color: var(--text);
	font: 16px/1.5 var(--sans);
	-webkit-font-smoothing: antialiased;
}

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

/* The pile, held still behind everything and dimmed most at the edges, so the logo and the button read over its
   bright tickets. Wide screens keep the dome's window at the top. */
.backdrop { position: fixed; inset: 0; z-index: -1; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 75% 65% at 50% 45%, rgba(15, 11, 7, .42), rgba(15, 11, 7, .84)),
		linear-gradient(180deg, rgba(15, 11, 7, .2), rgba(15, 11, 7, .5));
}
/* Gold dust falling through the light from the dome, drawn by dust.js; over the dimmed pile, under everything else. */
.dust { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ── Logo, tagline and button ────────────────────────────── */
.stage {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5svh, 48px);
	padding: clamp(20px, 4svh, 40px) 16px;
}

.title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1.6svh, 14px);
}

.logo { position: relative; isolation: isolate; margin: 0; }
/* The warm glow behind the title, as on the game's main menu, which breathes once the page has settled. It stays
   inside the screen's width: on a phone, a wider glow would make the browser zoom the page out to fit it. */
.logo::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: min(130%, 92vw);
	height: 230%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 196, 96, .42), rgba(255, 170, 60, .16) 50%, rgba(255, 150, 40, 0));
	opacity: .7;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
/* As wide as fits, but never so tall that the button drops below the fold (the art is 1280x427). */
.logo img {
	width: min(640px, 90vw, calc((100svh - 320px) * 3));
	filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .6));
}

/* The main menu's line under the title, in its colour and spaced-out capitals. */
.tagline {
	margin: 0;
	color: var(--tagline);
	font: 700 clamp(12px, 1.7vw, 15px)/1.4 var(--mono);
	letter-spacing: .32em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.actions {
	display: grid;
	gap: 12px;
	width: min(100%, 340px);
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: rgba(15, 11, 7, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--text);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .15s;
}
.btn:hover { background: rgba(43, 32, 20, .78); border-color: var(--gold); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .footer a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.btn--gold { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.btn--gold:hover { border-color: var(--gold-bright); background: var(--gold-bright); color: var(--ink); }
.btn--steam {
	position: relative;
	overflow: hidden;
	min-height: 62px;
	font-size: 19px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.btn--steam:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 28px rgba(241, 200, 120, .4); }
/* A band of light that sweeps across the button now and then; parked off its left edge until motion is allowed. */
.btn--steam::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 235, .55) 50%, transparent 70%);
	transform: translateX(-130%);
	pointer-events: none;
}
/* ── Footer ──────────────────────────────────────────────── */
.footer {
	padding: 24px 16px 28px;
	border-top: 1px solid var(--line);
	background: rgba(15, 11, 7, .88);
	color: var(--muted);
	font-size: 15px;
	text-align: center;
}
.footer p { margin: 0; }
.footer strong { color: var(--text); font-weight: 600; }
.footer a { color: var(--gold-bright); text-underline-offset: .2em; }
.footer a:hover { color: #fff3d6; }
.footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin: 14px 0;
	padding: 0;
	list-style: none;
}
.footer__links a {
	color: var(--text);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}
.footer__links a:hover { color: var(--gold-bright); }
.footer__small { font-size: 13px; }

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 560px) {
	.footer__links { gap: 8px 20px; }
}

/* The launch switch: data-phase on <html> picks which label shows. */
[data-phase="prelaunch"] .post,
[data-phase="launched"] .pre { display: none; }

/* ── Motion: only for visitors who have not asked their system for less ── */
@media (prefers-reduced-motion: no-preference) {
	/* The page comes up out of the dark: the pile, then the logo, the tagline, the button, the footer. Fill mode is
	   backwards, so once an entrance ends it lets go of the transform and hover and press still move the button. */
	.backdrop { animation: fade-in 1.8s ease-out backwards; }
	.dust { animation: fade-in 3s ease-out .8s backwards; }
	.logo { animation: rise-in 1.6s var(--ease) .25s backwards; }
	.tagline { animation: rise-in 1.3s var(--ease) .6s backwards; }
	.actions > * { animation: rise-in 1.1s var(--ease) .85s backwards; }
	.footer { animation: fade-in 1.2s ease-out 1.3s backwards; }

	/* Then it keeps breathing: the pile drifts closer and back, the glow swells, the light sweeps the button. */
	.backdrop img { transform-origin: 50% 30%; animation: drift 48s ease-in-out infinite alternate; }
	.logo::before { animation: glow 5s ease-in-out 1.8s infinite; }
	.btn--steam::after { animation: shimmer 7s ease-in-out 3.2s infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.btn { transition: none; }
	.btn:hover { transform: none; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes drift {
	from { transform: scale(1.02); }
	to { transform: scale(1.08) translate(-1%, -.8%); }
}
@keyframes glow {
	0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes shimmer {
	from { transform: translateX(-130%); }
	22%, to { transform: translateX(130%); }
}