:root {
	--paper: #fcf6ea;
	--ink: #1f2a5a;
	--card: #fffdf8;
	--indigo: #1f3a8a;
	--pomegranate: #d63d66;
	--saffron: #e9b62d;
	--muted: #5c6280;
	--border: #d9cba9;
	--input-border: #cbbd9a;
	--destructive: #b8322f;
	--secondary: #f3e9d4;
	--press-scale: 0.98;
	--press-duration: 120ms;
	--press-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--content-fade-duration: 220ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100svh;
	background: var(--paper);
	color: var(--ink);
	font-family: "Assistant", sans-serif;
	font-weight: 400;
}

.sheen {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 70% at 0% 0%, rgb(255 252 246 / 0.95), transparent 58%),
		radial-gradient(80% 60% at 100% 100%, rgb(31 42 90 / 0.07), transparent 52%);
}

.grain {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

main {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1rem;
}

.hero-stage {
	display: grid;
	place-items: center;
	width: 100%;
}

.hero-stage > .wreath-wrap,
.hero-stage > .card-stage {
	grid-area: 1 / 1;
}

.card-stage {
	position: relative;
	z-index: 50;
	width: 100%;
	max-width: 28rem;
}

html:not(.reveal) .wreath-wrap {
	display: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	transition: transform var(--press-duration) var(--press-ease);
}

button:active {
	transform: scale(var(--press-scale));
}

button:disabled {
	opacity: 0.5;
	cursor: default;
}

.language-switcher {
	position: fixed;
	top: 1rem;
	inset-inline-end: 1rem;
	z-index: 60;
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgb(31 42 90 / 0.12);
}

.language-switcher button {
	min-width: 2.25rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--indigo);
}

.language-switcher button[aria-pressed="true"] {
	background: var(--indigo);
	color: var(--paper);
}

.wreath-wrap {
	display: flex;
	justify-content: center;
	max-height: min(88vw, 520px, 52svh);
}

.wreath {
	display: block;
	width: min(88vw, 520px);
	max-height: min(88vw, 520px, 52svh);
	object-fit: contain;
	mix-blend-mode: multiply;
	mask-image: radial-gradient(
		ellipse 50% 50% at 50% 50%,
		black 78%,
		transparent 100%
	);
	-webkit-mask-image: radial-gradient(
		ellipse 50% 50% at 50% 50%,
		black 78%,
		transparent 100%
	);
	opacity: 0;
}

.card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
	padding: 2.5rem 1.75rem;
	background: var(--card);
	border: 1px solid color-mix(in srgb, var(--indigo) 22%, var(--card));
	border-radius: 0.5rem;
	box-shadow:
		inset 0 0 0 1px var(--card),
		inset 0 0 0 2px var(--saffron),
		0 1px 2px rgb(31 42 90 / 0.08),
		0 12px 28px -12px rgb(31 42 90 / 0.28),
		0 32px 64px -32px rgb(31 42 90 / 0.25);
	overflow: visible;
}

.card-stage .card-confetti-layer {
	position: absolute;
	inset-inline: 0;
	top: -55vh;
	bottom: -35vh;
	z-index: 0;
	pointer-events: none;
}

.card-confetti {
	display: block;
	width: 100%;
	height: 100%;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	transition:
		opacity var(--content-fade-duration) var(--ease-out),
		transform var(--content-fade-duration) var(--ease-out);
}

.card-body.is-exiting {
	opacity: 0;
	transform: scale(0.97);
}

.card-body.is-entering {
	opacity: 0;
	transform: scale(0.97);
}

.card-body.is-entering.is-entering-active {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.card-body {
		transition: opacity 0.2s ease;
	}

	.card-body.is-exiting,
	.card-body.is-entering {
		transform: none;
	}

	.card-body.is-entering.is-entering-active {
		transform: none;
	}
}

.reveal .wreath {
	animation: wreath-arrival 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.reveal .card {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.97);
}

.reveal.reveal-leaving .wreath {
	animation: wreath-leave 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.reveal.reveal-leaving .card {
	pointer-events: auto;
	animation: card-arrival 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes wreath-arrival {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes wreath-leave {
	to {
		opacity: 0;
		transform: scale(1.04);
	}
}

@keyframes card-arrival {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.stack:focus {
	outline: none;
}

h1,
.party-label,
.table-number,
.lead,
.echo,
.table-word {
	margin: 0;
	text-align: center;
}

h1 {
	font-weight: 300;
	font-size: 2.25rem;
	line-height: 1.15;
	color: var(--indigo);
}

.rule {
	width: 4rem;
	height: 1px;
	margin-inline: auto;
	background: var(--pomegranate);
}

.lead,
.echo,
.table-word {
	color: var(--muted);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

label {
	font-weight: 600;
}

input {
	width: 100%;
	height: 3rem;
	padding: 0 0.75rem;
	border: 1px solid var(--input-border);
	border-radius: 0.25rem;
	background: var(--card);
	color: var(--ink);
	font:
		400 1.125rem / 1 "Assistant",
		sans-serif;
}

input:focus {
	outline: 2px solid var(--indigo);
	outline-offset: 1px;
}

.alert {
	margin: 0;
	color: var(--destructive);
}

.primary,
.outline,
.members {
	width: 100%;
	border-radius: 0.25rem;
}

.primary {
	height: 3rem;
	border: 0;
	background: var(--indigo);
	color: var(--paper);
	font-weight: 300;
	font-size: 1.125rem;
}

.outline {
	height: 3rem;
	border: 1px solid var(--indigo);
	background: transparent;
	color: var(--indigo);
	font-weight: 300;
	font-size: 1.125rem;
}

.members {
	min-height: 2.75rem;
	border: 1px solid var(--border);
	background: var(--secondary);
	color: var(--ink);
	font-weight: 400;
	font-size: 1rem;
}

.choice {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}

.table-word {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.table-number {
	font-weight: 300;
	font-size: clamp(2rem, 10vw, 3.5rem);
	line-height: 1.15;
	color: var(--indigo);
	text-wrap: balance;
	hyphens: auto;
}

.choice-table {
	margin: 0;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--indigo);
	text-align: center;
}

.audience-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.audience-fieldset legend {
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.audience-options {
	display: flex;
	gap: 0.75rem;
}

.audience-choice {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--input-border);
	border-radius: 0.375rem;
	background: var(--card);
	color: var(--ink);
	font-size: 1rem;
	cursor: pointer;
	transition:
		border-color 160ms ease,
		background-color 160ms ease,
		color 160ms ease;
}

.audience-choice:hover {
	border-color: color-mix(in srgb, var(--indigo) 60%, var(--input-border));
}

.audience-choice:has(:checked) {
	border-color: var(--indigo);
	background: var(--indigo);
	color: var(--card);
}

.audience-choice:has(:focus-visible) {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
}

.audience-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.audience-dot {
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: 999px;
	flex-shrink: 0;
}

.audience-choice:has(:checked) .audience-dot {
	border-color: var(--saffron);
	background: var(--saffron);
}

.party-label {
	font-weight: 300;
	font-size: 1.875rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.member-list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.member-list li {
	padding: 0.25rem 0;
}

@media (min-width: 768px) {
	h1 {
		font-size: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal .wreath {
		animation: none;
		opacity: 1;
	}

	.reveal .card {
		opacity: 0;
		transform: none;
		pointer-events: none;
	}

	.reveal.reveal-leaving .card {
		pointer-events: auto;
	}

	.reveal.reveal-leaving .wreath {
		animation: wreath-leave-reduced 0.01ms forwards;
	}

	.reveal.reveal-leaving .card {
		animation: card-arrival-reduced 0.25s ease forwards;
	}

	@keyframes wreath-leave-reduced {
		to {
			opacity: 0;
		}
	}

	@keyframes card-arrival-reduced {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	button {
		transition: none;
	}

	button:active {
		transform: none;
	}
}