/* A Place for Every Potion: one screen, after the top of the Creator & Press Kit page (same palette and buttons),
   with 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;
	--sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--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 lab, held still behind everything and dimmed most at the edges, so the logo and buttons read. */
.backdrop { position: fixed; inset: 0; z-index: -1; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 75% 65% at 50% 45%, rgba(15, 11, 7, .38), rgba(15, 11, 7, .82)),
		linear-gradient(180deg, rgba(15, 11, 7, .2), rgba(15, 11, 7, .45));
}
/* Golden motes drifting up through the light, drawn by particles.js; over the dimmed lab, under everything else. */
.motes { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

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

.logo { position: relative; isolation: isolate; margin: 0; }
/* A warm halo behind the emblem, which breathes once the page has settled (the emblem sits at 50% / 31% of the art). */
.logo::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 31%;
	z-index: -1;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 196, 96, .5), rgba(255, 170, 60, .2) 42%, rgba(255, 150, 40, 0) 70%);
	opacity: .7;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
/* As wide as fits, but never so tall that the buttons drop below the fold (the art is 1120x706). */
.logo img {
	width: min(560px, 88vw, calc((100svh - 250px) * 1.586));
	filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .6));
}

/* Wishlist across the top, the two smaller doors side by side under it, all three sharing one width. */
.actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: fit-content;
}
@media (max-width: 459px) {
	.actions { grid-template-columns: 1fr; 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--wishlist {
	position: relative;
	overflow: hidden;
	grid-column: 1 / -1;
	min-height: 62px;
	font-size: 19px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.btn--wishlist: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--wishlist::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 lab, then the logo, the buttons one by one, the footer. Fill mode is
	   backwards, so once an entrance ends it lets go of the transform and hover and press still move the buttons. */
	.backdrop { animation: fade-in 1.8s ease-out backwards; }
	.motes { animation: fade-in 3s ease-out .8s backwards; }
	.logo { animation: rise-in 1.6s var(--ease) .25s backwards; }
	.actions > * { animation: rise-in 1.1s var(--ease) backwards; }
	.actions > :nth-child(1) { animation-delay: .8s; }
	.actions > :nth-child(2) { animation-delay: .95s; }
	.actions > :nth-child(3) { animation-delay: 1.1s; }
	.footer { animation: fade-in 1.2s ease-out 1.3s backwards; }

	/* Then it keeps breathing: the lab drifts closer and back, the halo swells, the light sweeps the Wishlist. */
	.backdrop img { transform-origin: 50% 40%; animation: drift 48s ease-in-out infinite alternate; }
	.logo::before { animation: glow 5s ease-in-out 1.8s infinite; }
	.btn--wishlist::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%); }
}