/* Best Before: one screen in the look of the A Place for Every Potion and 100,000 Tickets pages (same palette and
   buttons), with the groceries running from the Chef 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 kitchen chase, held still behind everything and dimmed most at the edges, so the sticker and the button read
   over the bright scene. Phones in portrait get their own crop: the Chef's reach over the Cheese and the Potato. */
.backdrop { position: fixed; inset: 0; z-index: -1; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.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));
}
/* Flour dust drifting down through the lamp light, drawn by flour.js; over the dimmed kitchen, under everything else. */
.flour { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ── Sticker, 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(10px, 2svh, 18px);
}

.logo { position: relative; isolation: isolate; margin: 0; }
/* The warm lamp glow behind the sticker, 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(170%, 96vw);
	aspect-ratio: 1;
	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 672x575). */
.logo img {
	width: min(470px, 80vw, calc((100svh - 360px) * 1.169));
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .65));
}

/* The store logline's last line, in spaced-out capitals as on the 100,000 Tickets page. The scene behind it is bright
   (the Milk and the Cheese), so a tight shadow edges the letters on top of the soft one. */
.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 1px 2px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .9);
}

.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 kitchen, then the sticker, 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; }
	.flour { 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 kitchen drifts closer and back, the glow swells, the light sweeps the button. */
	.backdrop img { transform-origin: 50% 45%; 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%); }
}