@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Grenze+Gotisch:wght@400;600&display=swap");

:root {
	--text-color: oklch(98.5% 0 0);
	--bg-color: oklch(14.5% 0 0);
	--surface-color: oklch(39.6% 0.141 25.723);

	--button-bg-color: oklch(40.8% 0.123 38.172);
	--button-hover-bg-color: oklch(47% 0.157 37.304);
	--button-active-bg-color: oklch(26.6% 0.079 36.259);
	--button-match-bg-color: oklch(20.5% 0 0);
	--button-match-active-bg-color: oklch(62.3% 0.214 259.815);
	--button-border-color: oklch(47% 0.157 37.304);
	--button-active-border-color: oklch(47% 0.157 37.304);
	--button-match-border-color: oklch(27.4% 0.006 286.033);
	--button-match-shine-color: oklch(64.6% 0.222 41.116);

	--font-display: "Creepster", "Grenze Gotisch", system-ui, sans-serif;
	--font-body: "Grenze Gotisch", system-ui, sans-serif;

	/* Halloween atmosphere */
	--night-color: oklch(12% 0.03 300);
	--pumpkin-color: oklch(74% 0.18 62);
	--witch-color: oklch(55% 0.19 310);
	--moon-color: oklch(96% 0.06 95);

	/* prettier-ignore */
	--ease-elastic: linear(0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%, 1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1);
	--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-in-back: cubic-bezier(0.68, -0.6, 0.32, 1);
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	min-height: 100vh;
	min-height: 100svh;
}

body {
	display: grid;
	place-items: center;
	margin: 0;
	padding-block: 4vmin;
	font-family: var(--font-body);
	color: var(--text-color);
	background: var(--bg-color);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* -------- Night sky -------- */
.atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: radial-gradient(
			ellipse 120% 80% at 75% -10%,
			oklch(30% 0.1 300 / 0.55),
			transparent 60%
		),
		radial-gradient(
			ellipse 100% 70% at 15% 110%,
			oklch(35% 0.13 55 / 0.45),
			transparent 65%
		),
		linear-gradient(to bottom, var(--night-color), var(--bg-color) 70%);
}

.moon {
	position: absolute;
	top: 6vmin;
	right: 8vmin;
	inline-size: 16vmin;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		var(--moon-color),
		oklch(82% 0.08 85) 55%,
		oklch(64% 0.09 75) 100%
	);
	box-shadow: 0 0 6vmin 2vmin oklch(85% 0.12 85 / 0.18),
		0 0 18vmin 6vmin oklch(75% 0.14 70 / 0.1);
	animation: moon-pulse 7s ease-in-out infinite;
}

/* La mansión se apoya en el borde inferior; la niebla le pasa por delante */
.mansion {
	position: absolute;
	inset-block-end: -1vh;
	left: 50%;
	translate: -50% 0;
	block-size: min(38vh, 58vw);
	inline-size: auto;
	max-inline-size: 100vw;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 0 3vmin oklch(70% 0.19 55 / 0.18));
	transition: opacity 900ms var(--ease-out), translate 900ms var(--ease-out);
}

.rain {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity 900ms var(--ease-out);
}

.rain::before,
.rain::after {
	content: "";
	position: absolute;
	inset: -300px 0 0 0;
	background: repeating-linear-gradient(
		104deg,
		transparent 0 9px,
		oklch(85% 0.03 260 / 0.07) 9px 10px,
		transparent 10px 22px
	);
	background-size: 100% 300px;
	animation: rain-fall 0.5s linear infinite;
}

.rain::after {
	background: repeating-linear-gradient(
		100deg,
		transparent 0 15px,
		oklch(85% 0.03 260 / 0.045) 15px 16px,
		transparent 16px 34px
	);
	background-size: 100% 300px;
	animation-duration: 0.8s;
}

.embers {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transition: opacity 900ms var(--ease-out);
}

.embers span {
	position: absolute;
	inset-block-end: -4vh;
	left: var(--x);
	inline-size: var(--s);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, oklch(90% 0.14 75), oklch(75% 0.19 55) 40%, transparent 70%);
	box-shadow: 0 0 calc(var(--s) * 1.5) oklch(75% 0.19 55 / 0.7);
	opacity: 0;
	animation: ember-rise var(--d) linear var(--delay) infinite;
}

.spider {
	position: absolute;
	top: -2vh;
	left: 14%;
	display: grid;
	justify-items: center;
	transform-origin: top center;
	translate: 0 -34vh;
	animation: spider-drop 5s var(--ease-out) 2.5s both,
		spider-swing 4.5s ease-in-out 7.5s infinite alternate;
	transition: opacity 900ms var(--ease-out);
}

.spider-thread {
	inline-size: 1px;
	block-size: 32vh;
	background: linear-gradient(
		to bottom,
		oklch(95% 0 0 / 0.35),
		oklch(95% 0 0 / 0.08)
	);
}

.spider-body {
	font-size: 3.4vmin;
	line-height: 1;
	translate: 0 -0.35em;
	filter: brightness(0.8);
}

/* En el juego se limpia el escenario para no distraer */
.stage-game :is(.mansion, .rain, .embers, .spider) {
	opacity: 0;
	pointer-events: none;
}

.stage-game .mansion {
	translate: -50% 12%;
}

.fog {
	position: absolute;
	inset-block-end: -10%;
	inline-size: 220%;
	block-size: 55vmin;
	filter: blur(6vmin);
	opacity: 0.35;
	will-change: transform;
	background: radial-gradient(
			ellipse 22% 60% at 10% 70%,
			oklch(70% 0.04 300 / 0.5),
			transparent
		),
		radial-gradient(
			ellipse 26% 55% at 32% 85%,
			oklch(65% 0.06 320 / 0.45),
			transparent
		),
		radial-gradient(
			ellipse 20% 65% at 55% 65%,
			oklch(72% 0.05 60 / 0.35),
			transparent
		),
		radial-gradient(
			ellipse 28% 50% at 80% 80%,
			oklch(68% 0.05 300 / 0.4),
			transparent
		);
	animation: fog-drift linear infinite;
}

.fog-1 {
	animation-duration: 48s;
}

.fog-2 {
	inset-block-end: 12%;
	opacity: 0.22;
	scale: -1 1;
	animation-duration: 76s;
	animation-delay: -20s;
}

.fog-3 {
	inset-block-end: -25%;
	block-size: 70vmin;
	opacity: 0.16;
	animation-duration: 110s;
	animation-delay: -45s;
}

.critter {
	position: absolute;
	font-size: 3vmin;
	opacity: 0.45;
	filter: grayscale(0.4) brightness(0.7);
	will-change: transform;
}

.critter-1 {
	top: 18%;
	animation: bat-fly 26s linear infinite;
}

.critter-2 {
	top: 32%;
	font-size: 2.2vmin;
	animation: bat-fly 34s linear infinite;
	animation-delay: -12s;
}

.critter-3 {
	top: 9%;
	font-size: 4vmin;
	animation: bat-fly 44s linear infinite reverse;
	animation-delay: -6s;
}

.critter-4 {
	top: -1vmin;
	left: 4vmin;
	font-size: 9vmin;
	opacity: 0.3;
	animation: web-sway 9s ease-in-out infinite;
	transform-origin: top center;
}

.critter-5 {
	bottom: 12%;
	left: 6%;
	font-size: 5vmin;
	opacity: 0.18;
	animation: ghost-float 17s ease-in-out infinite;
}

.vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 80% 70% at 50% 45%,
		transparent 40%,
		oklch(8% 0.02 300 / 0.75) 100%
	);
}

main {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 2rem;
	inline-size: 85vmin;
	margin: auto;
}

/* -------- Masthead -------- */
.masthead {
	display: grid;
	gap: 0.4rem;
	justify-items: center;
	text-align: center;
}

.gate-hint,
.invite-kicker {
	font-family: system-ui, sans-serif;
	font-weight: 500;
}


.game {
	position: relative;
	container-type: inline-size;
}

.interface {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	padding-inline: 0.2rem;
	gap: 1rem;
	font-size: calc(0.6rem + 2vmin);
}

.interface-data {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	line-height: 1;

	span {
		display: inline-block;
		position: relative;
		top: -0.1em;
		font-size: 1.8em;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.05em;
	}
}

.interface-data-best {
	display: none;

	.best-value {
		color: var(--pumpkin-color);
	}
}

.interface-btn {
	margin-inline-start: auto;
}

.interface-btn + .interface-btn {
	margin-inline-start: 0;
}

.interface-btn-icon {
	padding-inline: 0.7rem;
	line-height: 1;

	&[aria-pressed="false"] {
		opacity: 0.55;
	}
}

.interface-btn-ghost {
	font-size: 0.8em;
	opacity: 0.55;
	background: transparent;
	border-color: oklch(70% 0.02 300 / 0.4);

	&:hover {
		opacity: 1;
	}
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

button {
	appearance: none;
	font: inherit;
	line-height: 1;
	border: unset;
	color: inherit;
	padding: 0.5rem 1rem 0.6rem;
	border-radius: 0.3rem;
	background: var(--button-bg-color);
	border: 1px solid var(--button-border-color);
	cursor: pointer;
	touch-action: manipulation;

	&:focus-visible {
		outline: 1px dashed white;
		outline-offset: 2px;
	}

	&:not(:disabled):where(:hover, :focus-visible) {
		--button-bg-color: var(--button-hover-bg-color);
	}
}

.marquee {
	--deg: -6deg;
	--duration: 2.2s;
	display: none;
	place-content: center;
	position: absolute;
	inset: -5%;
	width: 110%;
	z-index: 1;
	font-size: 26cqmin;
	line-height: 1;
	white-space: nowrap;
	transform: rotate(var(--deg)) skew(var(--deg));
	pointer-events: none;
	paint-order: stroke;
	-webkit-text-stroke: 6cqmin var(--bg-color);
	animation: marquee-reveal var(--duration) var(--ease-out),
		marquee-mask-position 3s var(--ease-out);
	mask-image: linear-gradient(to left, transparent 50%, black 75%);
	mask-position: 100% center;
	mask-size: 400% 100%;
}

.marquee.is-combo {
	--duration: 600ms;
	letter-spacing: -0.05em;
}

/* El título entero no cabe de lado a lado: se parte como el logo, el 30 arriba */
.marquee.is-stacked {
	font-size: 30cqmin;
	line-height: 0.8;
	-webkit-text-stroke-width: 4.5cqmin;

	.marquee-text {
		display: grid;
		justify-items: center;
	}

	.marquee-rest {
		margin-block-start: 0.16em;
		font-size: 0.3em;
		letter-spacing: 0.07em;
		text-indent: 0.07em;
		/* El trazo no hereda en em: hay que bajarlo a mano para la línea pequeña */
		-webkit-text-stroke-width: 1.4cqmin;
	}
}

.marquee-text {
	animation: marquee-drift var(--duration) linear forwards;
}

.board {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2cqmin;
}

.card {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 0;
	font-size: 6cqmin;
	aspect-ratio: 1;
	border-radius: 10cqmin;
	corner-shape: squircle;
	will-change: transform;
	transition: opacity 300ms var(--ease-out), background 100ms var(--ease-out);
	box-shadow: inset 0 0 1cqmin 0.5cqmin var(--button-bg-color),
		inset 0 0 0 1.5cqmin hsl(0 0% 0% / 0.1);

	&[aria-pressed="true"] {
		--button-bg-color: var(--button-active-bg-color);
		--button-border-color: var(--button-active-border-color);
	}

	&:disabled {
		--button-bg-color: var(--button-match-bg-color);
		--button-border-color: var(--button-match-border-color);
		cursor: revert;
		color: currentcolor;
	}

	@supports not (corner-shape: squircle) {
		border-radius: 7cqmin;
	}
}

/* Card highlight effect */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	corner-shape: inherit;
	box-shadow: inset 0 0 4cqmin 3cqmin var(--button-match-shine-color);
	opacity: 0;
}

.content {
	position: relative;
	margin: auto;
	pointer-events: none;
	user-select: none;
	transform: translateZ(0);
}

.prop {
	position: relative;
	transition: opacity 200ms 500ms var(--ease-out);
}

.face {
	display: inline-block;
	font-size: 1.25em;
}

.face img {
	display: block;
	inline-size: 1.05em;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 0.06em solid oklch(88% 0.11 70 / 0.5);
	box-shadow: 0 0 0.3em oklch(0% 0 0 / 0.55);
	user-select: none;
	-webkit-user-drag: none;
}

.mask {
	display: inline-block;
	font-size: 1.8em;
}

.hand {
	--opacity-duration: 60ms;
	display: inline-block;
	opacity: 0;
	transform: scale(0.5);
	transition: transform 0s var(--opacity-duration) var(--ease-out),
		opacity var(--opacity-duration) var(--ease-out);
}

/* Al destapar, el retrato crece para reconocerse */
.face {
	transition: scale 250ms var(--ease-out);
}

.card[aria-pressed="true"] .face {
	scale: 2.5;
}

.card:is(:hover, :focus-visible, [aria-pressed="true"]) .hand {
	opacity: 1;
	transform: scale(1);
	transition: transform 200ms var(--ease-out), opacity 0s;
}

/* -------- Alien -------- */
.alien-mask {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	transform-origin: bottom left;
	transition: rotate 500ms var(--ease-out);
}

.alien-mask .mask {
	position: absolute;
	bottom: 100%;
	translate: -25% 10%;
}

.alien-mask .hand {
	position: relative;
}

.card[aria-pressed="true"] .alien-mask {
	rotate: 45deg;
	transition-duration: 300ms;
}

/* -------- Clown -------- */
.clown-mask {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 15%;
	transition: translate 300ms var(--ease-out);
}

.clown-mask .hand {
	--offset: 92%;
	--rotate: 10deg;
	position: absolute;
	top: 60%;
	translate: 0 -50%;

	&:first-child {
		right: var(--offset);
		rotate: calc(var(--rotate) * -1);
	}

	&:last-child {
		left: var(--offset);
		rotate: var(--rotate);
	}
}

.card[aria-pressed="true"] .clown-mask {
	translate: -50% -55%;
	transition-duration: 300ms;
	transition-timing-function: var(--ease-in-back);
}

/* -------- Cow -------- */
.cow-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	translate: -50% -80%;
	transform-origin: bottom right;
	transition: 400ms var(--ease-out);
	transition-property: translate, rotate;
}

.cow-mask .mask {
	position: absolute;
	top: 30%;
	translate: 12% 0;
}

.cow-mask .hand {
	position: relative;
	rotate: -10deg;
}

.card[aria-pressed="true"] .cow-mask {
	rotate: -15deg;
	translate: -80% -190%;
	transition-duration: 200ms;
}

/* -------- Disguise -------- */
.disguise-mask {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 15%;
	transition: 300ms var(--ease-out);
	transition-property: translate, rotate;
	transition-origin: bottom left;
}

.disguise-mask .hand {
	--offset: 92%;
	--rotate: 10deg;
	position: absolute;
	top: 60%;
	translate: 0 -50%;

	&:first-child {
		right: var(--offset);
		rotate: calc(var(--rotate) * -1);
	}

	&:last-child {
		left: var(--offset);
		rotate: var(--rotate);
	}
}

.card[aria-pressed="true"] .disguise-mask {
	translate: 10% 80%;
	rotate: 25deg;
	transition-duration: 300ms;
	transition-timing-function: var(--ease-in-back);
}

/* -------- Dragon -------- */
.dragon-mask {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	transform-origin: bottom right;
	transition: rotate 500ms var(--ease-out);
}

.dragon-mask .mask {
	position: absolute;
	bottom: 80%;
	left: -40%;
}

.dragon-mask .hand {
	position: relative;
	translate: 55% -10%;
	rotate: -30deg;
	scale: -1 1;
}

.card[aria-pressed="true"] .dragon-mask {
	rotate: -45deg;
	transition-duration: 300ms;
}

/* -------- Eye -------- */
.eye-mask {
	position: absolute;
	top: 80%;
	left: 50%;
	translate: -50% 0;
	transform-origin: bottom left;
	transition: 400ms var(--ease-out);
	transition-property: translate, rotate;
}

.eye-mask .mask {
	position: absolute;
	bottom: 0;
	translate: -25% -40%;
}

.eye-mask .hand {
	position: relative;
	translate: 100% -80%;
	rotate: 5deg;
}

.card[aria-pressed="true"] .eye-mask {
	rotate: 15deg;
	translate: 5% -90%;
	transition-duration: 200ms;
}

/* -------- Fox -------- */
.fox-mask {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	transform-origin: bottom right;
	transition: 500ms var(--ease-out);
	transition-property: translate, rotate;
}

.fox-mask .mask {
	position: absolute;
	bottom: 80%;
	left: -40%;
}

.fox-mask .hand {
	position: relative;
}

.card[aria-pressed="true"] .fox-mask {
	rotate: 15deg;
	translate: 0 100%;
	transition-duration: 300ms;
}

/* -------- Frog -------- */
.frog-mask {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -25%;
	transform-origin: bottom left;
	transition: rotate 500ms var(--ease-out);
}

.frog-mask .mask {
	position: absolute;
	bottom: 0;
	left: 0;
	translate: -24% -30%;
}

.frog-mask .hand {
	position: relative;
	translate: -75% 0;
	rotate: 30deg;
}

.card[aria-pressed="true"] .frog-mask {
	rotate: -45deg;
	transition-duration: 300ms;
}

/* -------- Ogre -------- */
.ogre-mask {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 15%;
	transition: translate 300ms var(--ease-out);
}

.ogre-mask .hand {
	--offset: 90%;
	--rotate: -10deg;
	position: absolute;
	top: 40%;
	translate: 0 -50%;

	&:first-child {
		right: var(--offset);
		rotate: calc(var(--rotate) * -1);
	}

	&:last-child {
		left: var(--offset);
		rotate: var(--rotate);
	}
}

.card[aria-pressed="true"] .ogre-mask {
	translate: -50% -60%;
	transition-duration: 300ms;
	transition-timing-function: var(--ease-in-back);
}

/* -------- Pumpkin -------- */
.pumpkin-mask {
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 10%;
	transform-origin: bottom right;
	transition: 400ms var(--ease-out);
	transition-property: rotate, translate;
}

.pumpkin-mask .hand {
	position: absolute;
	bottom: 60%;
	left: 40%;
	scale: -1 1;
	rotate: 35deg;
}

.card[aria-pressed="true"] .pumpkin-mask {
	rotate: 25deg;
	translate: -35% -35%;
	transition-duration: 250ms;
}

/* -------- Robot -------- */
.robot-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	translate: -16% 10%;
	transform-origin: bottom left;
	transition: 400ms var(--ease-out);
	transition-property: rotate, translate;
}

.robot-mask .hand {
	position: absolute;
	bottom: 70%;
	left: 8%;
	rotate: -15deg;
}

.card[aria-pressed="true"] .robot-mask {
	rotate: -25deg;
	translate: -10% -40%;
	transition-duration: 250ms;
}

/* -------- Skull -------- */
.skull-mask {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -51% -20%;
	transform-origin: bottom left;
	transition: 400ms var(--ease-out);
	transition-property: translate, rotate;
}

.skull-mask .mask {
	position: absolute;
	bottom: 60%;
	left: -40%;
}

.skull-mask .hand {
	position: relative;
	translate: 50% -40%;
	rotate: 15deg;
}

.card[aria-pressed="true"] .skull-mask {
	rotate: 15deg;
	translate: 25%;
	transition-duration: 200ms;
}

/* Card match state */
.card.is-matched {
	--duration: 1.2s;
	--delay: 50ms;
	animation: card-pop-up var(--duration) var(--delay) forwards,
		z-position 1s forwards;

	&::before {
		animation: match-shine calc(var(--duration) / 1.5) var(--delay)
			var(--ease-out) forwards;
	}

	.face,
	.prop {
		animation: pop-up var(--duration) var(--delay) forwards;
	}

	.face {
		--scale: 2.65;
	}

	.prop {
		--scale: 0.4;
		opacity: 0;
	}
}

/* Loading state */
.board.is-loading {
	cursor: wait;

	.card {
		opacity: 0;
		pointer-events: none;
		animation: load-card-scale-up 1.2s calc(var(--i, 1) * 0.033s)
				var(--ease-elastic) forwards,
			load-card-fade-in 400ms calc(var(--i, 1) * 0.033s) var(--ease-out) forwards;
	}
}

/* Waiting state */
.board.is-waiting {
	--shake-offset: 1%;
	pointer-events: none;

	.card:not([aria-pressed="true"]) {
		opacity: 0.25;
		transition-duration: 200ms;
	}

	.card[aria-pressed="true"]:not(.is-matched) {
		animation: shake 200ms 300ms ease infinite;
		transition-origin: bottom center;
	}
}

/* Completed state */
.board.is-complete {
	pointer-events: none;

	.card,
	.face {
		animation: 1.5s calc(var(--i) * 0.1s + 800ms) infinite;
	}

	.card {
		overflow: visible;
		animation-name: card-jump;
	}

	.face {
		animation-name: face-jump;
	}
}

/* Animation keyframes */
@keyframes shake {
	25% {
		translate: calc(var(--shake-offset) * -1);
	}
	75% {
		translate: var(--shake-offset);
	}
}

@keyframes z-position {
	0%,
	99% {
		z-index: 1;
	}
	100% {
		z-index: 0;
	}
}

@keyframes card-pop-up {
	0% {
		animation-timing-function: ease-out;
	}
	10%,
	40% {
		scale: 1.5;
		/* prettier-ignore */
		animation-timing-function: linear(0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%, 1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1);
	}
	100% {
		scale: 1;
	}
}

@keyframes pop-up {
	0% {
		animation-timing-function: ease-out;
	}
	25%,
	50% {
		scale: 1.2;
		/* prettier-ignore */
		animation-timing-function: linear(0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%, 1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1);
	}
	100% {
		scale: var(--scale);
	}
}

@keyframes card-jump {
	0% {
		animation-timing-function: ease;
	}
	10% {
		translate: 0 -5%;
		/* prettier-ignore */
		animation-timing-function: linear(0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%, 1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1);
	}
	75% {
		translate: 0 0;
	}
}

@keyframes face-jump {
	0% {
		animation-timing-function: ease;
	}
	15% {
		translate: 0 -120%;
		scale: calc(var(--scale, 1) * 1.2);
		/* prettier-ignore */
		animation-timing-function: linear(0, 1.114 8.5%, 1.37 12.9%, 1.315 16.2%, 0.941 24%, 0.869 27.8%, 0.882 30.7%, 1.012 38.3%, 1.046 42.7%, 0.984, 1.006 72.2%, 1);
	}
	60% {
		scale: var(--scale, 1);
	}
	75% {
		translate: 0 0;
	}
}

@keyframes match-shine {
	0%,
	25% {
		opacity: 1;
	}
	to {
		opacity: 0;
		scale: 2;
	}
}

@keyframes marquee-drift {
	from {
		translate: 0 2%;
	}
	to {
		translate: 0 -5%;
	}
}

@keyframes marquee-reveal {
	0%,
	80% {
		scale: 1;
	}
	100% {
		scale: 0.98;
	}
	0%,
	100% {
		opacity: 0;
	}
	10%,
	80% {
		opacity: 1;
	}
}

@keyframes marquee-mask-position {
	30%,
	100% {
		mask-position: 0% center;
	}
}

@keyframes load-card-scale-up {
	from {
		scale: 0.9;
	}
	to {
		scale: 1;
	}
}

@keyframes load-card-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* -------- Atmosphere keyframes -------- */
@keyframes fog-drift {
	from {
		translate: -55% 0;
	}
	to {
		translate: 0 0;
	}
}

@keyframes moon-pulse {
	50% {
		filter: brightness(1.12);
	}
}

@keyframes bat-fly {
	from {
		translate: -12vmax 0;
		rotate: -4deg;
	}
	25% {
		translate: 25vmax -6vmin;
		rotate: 6deg;
	}
	50% {
		translate: 55vmax 3vmin;
		rotate: -6deg;
	}
	75% {
		translate: 85vmax -4vmin;
		rotate: 5deg;
	}
	to {
		translate: 115vmax 0;
		rotate: -4deg;
	}
}

@keyframes web-sway {
	50% {
		rotate: 4deg;
	}
}

@keyframes ghost-float {
	0%,
	100% {
		translate: 0 0;
		opacity: 0.1;
	}
	50% {
		translate: 6vmin -8vmin;
		opacity: 0.28;
	}
}

/* ============ ESCENAS ============ */
[hidden] {
	display: none !important;
}

.fade {
	opacity: 0;
	scale: 0.98;
	transition: opacity 700ms var(--ease-out), scale 700ms var(--ease-out);
}

.fade.is-on {
	opacity: 1;
	scale: 1;
}

.scene {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1.2rem;
	inline-size: min(92vw, 85vmin);
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	margin: auto;
	text-align: center;
}

/* Relámpago */
.flash {
	position: fixed;
	inset: 0;
	z-index: 5;
	background: oklch(97% 0.03 250);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

.flash.is-striking {
	animation: lightning 1.1s ease-out;
}

/* -------- 1. Puerta -------- */
.scene-gate {
	gap: 0.6rem;
	align-self: start;
	margin-block-start: clamp(1.5rem, 6vh, 5rem);
}

.gate-year {
	margin: 0 0 0.4rem;
	font-size: min(calc(1.8rem + 12vmin), 17vw);
	line-height: 0.9;
	letter-spacing: 0.04em;
	filter: drop-shadow(0 0 2.5vmin oklch(70% 0.19 55 / 0.5));

	span {
		display: inline-block;
		background: linear-gradient(
			to bottom,
			var(--moon-color) 5%,
			var(--pumpkin-color) 55%,
			oklch(45% 0.17 30) 100%
		);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}
}

/* Cada dígito cae y rebota; luego el conjunto parpadea como un neón roto */
.scene-gate.is-on .gate-year span {
	animation: digit-drop 900ms var(--ease-elastic) calc(var(--i) * 170ms) both;
}

.scene-gate.is-on .gate-year {
	animation: neon-flicker 7s 1.9s infinite;
}

.gate-lead {
	display: grid;
	gap: 0.55em;
	margin: 0;
	inline-size: min(46ch, 100%);
	padding-inline: 0.5rem;
	font-size: calc(0.75rem + 1.95vmin);
	text-wrap: balance;
	line-height: 1.35;
	color: oklch(94% 0.01 300 / 0.85);
	text-shadow: 0 0 1.5vmin oklch(0% 0 0 / 0.95),
		0 0 0.5vmin oklch(0% 0 0 / 0.8);
}

.gate-line {
	margin: 0;
}

/* Las frases aún sin escribir no ocupan sitio */
.gate-line:empty {
	display: none;
}

.gate-line-call {
	color: var(--pumpkin-color);
}

.gate-cursor {
	display: none;
}

.gate-line .gate-cursor {
	display: inline-block;
	inline-size: 0.5ch;
	margin-inline-start: 0.15ch;
	border-block-end: 0.12em solid var(--pumpkin-color);
	translate: 0 -0.1em;
	animation: blink 900ms steps(2, start) infinite;
}

.enter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-block-start: 1.4rem;
	padding: 0.55rem 1.5rem 0.6rem 0.9rem;
	font-size: calc(0.85rem + 2vmin);
	border-radius: 100vmax;
	box-shadow: 0 0 3vmin oklch(70% 0.19 55 / 0.3);
	opacity: 0;
	pointer-events: none;
}

.scene-gate.is-ready .enter-btn {
	pointer-events: auto;
	animation: rise 800ms var(--ease-out) both,
		enter-pulse 2.8s ease-in-out 800ms infinite;
}

.enter-lantern {
	inline-size: 2.4em;
	aspect-ratio: 1;
	object-fit: contain;
	filter: drop-shadow(0 0 0.5em oklch(75% 0.19 55 / 0.7));
	animation: lantern-flicker 2.4s ease-in-out infinite;
}

.gate-hint {
	margin: 0.4rem 0 0;
	font-size: calc(0.55rem + 1.1vmin);
	letter-spacing: 0.25em;
	text-indent: 0.25em;
	text-transform: uppercase;
	color: oklch(80% 0.11 65 / 0.5);
	opacity: 0;
}

.scene-gate.is-ready .gate-hint {
	animation: rise 800ms 500ms var(--ease-out) both;
}

/* -------- 2. Títulos -------- */
.scene-titles {
	gap: 2.4rem;
	margin-block-end: 24vh;
}

.titles-card {
	display: grid;
	justify-items: center;
	line-height: 0.8;
}

.titles-num {
	font-size: min(40vmin, 46vw);
	font-weight: 600;
	letter-spacing: -0.03em;
	background: linear-gradient(
		to bottom,
		var(--moon-color) 5%,
		var(--pumpkin-color) 55%,
		oklch(45% 0.17 30) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 2.5vmin oklch(70% 0.19 55 / 0.45));
}

.titles-rest {
	font-size: min(10vmin, 11vw);
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	text-transform: uppercase;
	color: oklch(96% 0.02 90);
	text-shadow: 0 0 2vmin oklch(0% 0 0 / 0.8);
}

.titles-line {
	margin: 0;
	max-inline-size: 24ch;
	font-size: calc(0.8rem + 2.2vmin);
	line-height: 1.35;
	color: oklch(92% 0.01 300 / 0.85);
	opacity: 0;
}

.scene-titles.is-on .titles-num {
	animation: slam 900ms var(--ease-out) both;
}

.scene-titles.is-on .titles-rest {
	animation: creep 1.3s 700ms var(--ease-out) both;
}

.scene-titles.is-on .titles-line {
	animation: rise 1s 2600ms var(--ease-out) both;
}

/* -------- 4. Invitación -------- */
/* Es la única escena larga: se alinea arriba y se recorre con scroll */
.scene-invite {
	align-self: start;
	gap: clamp(2.2rem, 7vh, 4.5rem);
	margin-block-start: clamp(1rem, 4vh, 3rem);
	padding-block-end: 14vh;
}

.invite-head {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
}

.invite-kicker {
	margin: 0;
	font-size: calc(0.55rem + 1.1vmin);
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	color: oklch(80% 0.11 65 / 0.75);
}

.invite-title {
	margin: 0.3em 0 0.1em;
	font-size: calc(1.1rem + 3.4vmin);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	color: oklch(96% 0.02 90);
	text-shadow: 0 0 2vmin oklch(0% 0 0 / 0.85);
}

/* El logotipo aquí es el protagonista: más grande que en el juego */
.invite-logo .logo-num {
	font-size: clamp(5.4rem, 27vmin, 15rem);
}

.invite-logo .logo-rest {
	font-size: clamp(1.3rem, 6.6vmin, 3.5rem);
}

.invite-date {
	display: grid;
	gap: 0.15em;
	margin: 1.2rem 0 0;
	line-height: 1.05;
}

.invite-day {
	font-family: var(--font-display);
	font-size: calc(1.4rem + 4.6vmin);
	letter-spacing: 0.03em;
	color: var(--pumpkin-color);
	text-shadow: 0 0 2.5vmin oklch(70% 0.19 55 / 0.55);
}

.invite-month {
	font-size: calc(0.75rem + 1.9vmin);
	color: oklch(92% 0.01 300 / 0.75);
}

/* La norma: una placa que late en rojo */
.invite-rule {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	inline-size: min(100%, 60ch);
	padding: clamp(1.4rem, 5vmin, 2.6rem) clamp(1.2rem, 5vmin, 2.4rem);
	border: 1px solid oklch(55% 0.2 25 / 0.5);
	border-radius: 1rem;
	background: linear-gradient(
		oklch(18% 0.05 20 / 0.93),
		oklch(11% 0.03 20 / 0.96)
	);
	text-align: center;
}

.invite-rule-kicker {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(1.3rem + 3.4vmin);
	line-height: 1;
	letter-spacing: 0.03em;
	color: oklch(62% 0.24 27);
	text-shadow: 0 0 2vmin oklch(60% 0.24 27 / 0.75),
		0 0.06em 0 oklch(22% 0.1 25);
	animation: neon-flicker 5s 1.4s infinite;
}

.invite-rule-text {
	margin: 0;
	font-size: calc(0.82rem + 1.85vmin);
	line-height: 1.4;
	color: oklch(94% 0.01 300 / 0.9);
	text-wrap: balance;

	strong {
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: oklch(74% 0.2 40);
	}
}

.invite-rule-sub {
	margin: 0;
	font-size: calc(0.72rem + 1.45vmin);
	color: oklch(85% 0.08 65 / 0.75);
}

.invite-scroll-hint {
	font-size: calc(1rem + 2.2vmin);
	line-height: 1;
	color: var(--pumpkin-color);
	animation: hint-bounce 1.7s ease-in-out infinite;
}

/* Galería: fotos clavadas en la pared, aparecen al hacer scroll */
.costumes {
	display: grid;
	gap: clamp(1.6rem, 5.5vmin, 3.2rem);
	inline-size: min(100%, 40rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.costume {
	--tilt: -2.2deg;
	position: relative;
	margin: 0;
	padding: clamp(0.5rem, 1.6vmin, 0.9rem);
	background: oklch(95% 0.012 85);
	border-radius: 0.35rem;
	box-shadow: 0 1.2rem 2.8rem oklch(0% 0 0 / 0.75),
		0 0 0 1px oklch(0% 0 0 / 0.45);
	transform-origin: top center;
	rotate: var(--tilt);
	opacity: 0;
	translate: 0 8vh;

	&:nth-child(even) {
		--tilt: 2.1deg;
	}

	&:nth-child(3n) {
		--tilt: -1.3deg;
	}

	img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		max-block-size: 70vh;
		object-fit: cover;
		background: oklch(18% 0.02 300);
		filter: saturate(0.85) contrast(1.06);
	}

	/* La chincheta */
	&::before {
		content: "";
		position: absolute;
		top: -0.45rem;
		left: 50%;
		z-index: 1;
		inline-size: 0.95rem;
		aspect-ratio: 1;
		translate: -50% 0;
		border-radius: 50%;
		background: radial-gradient(
			circle at 35% 35%,
			oklch(82% 0.02 60),
			oklch(32% 0.02 60) 72%
		);
		box-shadow: 0 0.15rem 0.35rem oklch(0% 0 0 / 0.65);
	}

	/* Mancha de sangre en una esquina y sombra en la opuesta */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		background: radial-gradient(
				ellipse at 100% 100%,
				oklch(42% 0.2 25 / 0.4),
				transparent 42%
			),
			radial-gradient(ellipse at 0% 0%, oklch(0% 0 0 / 0.28), transparent 40%);
		mix-blend-mode: multiply;
	}
}

.costume.is-seen {
	animation: costume-in 950ms var(--ease-out) both,
		costume-sway 6s ease-in-out 950ms infinite alternate;
}

.costume:nth-child(even).is-seen {
	animation-duration: 950ms, 7.3s;
}

/* Entrada de la escena */
.scene-invite.is-on .invite-kicker {
	animation: rise 800ms 200ms var(--ease-out) both;
}

.scene-invite.is-on .invite-title {
	animation: rise 900ms 500ms var(--ease-out) both;
}

/* El logotipo entra después del título: se retrasan sus tres animaciones */
.scene-invite.is-on .invite-logo .logo-num {
	animation-delay: 900ms, 2300ms, 2300ms;
}

.scene-invite.is-on .invite-logo .logo-num::before {
	animation-delay: 1540ms;
}

.scene-invite.is-on .invite-logo {
	animation-delay: 1560ms;
}

.scene-invite.is-on .invite-logo .logo-rest {
	animation-delay: 1650ms;
}

.scene-invite.is-on .invite-date {
	animation: rise 900ms 2500ms var(--ease-out) both;
}

.scene-invite.is-on .invite-rule {
	animation: rise 900ms 3100ms var(--ease-out) both,
		rule-pulse 3.4s ease-in-out 4000ms infinite;
}

/* En la invitación la mansión se queda de fondo, lejana */
.stage-invite .mansion {
	opacity: 0.32;
	translate: -50% 10%;
}

/* -------- Juramento (final de la invitación) -------- */
.pledge {
	--tilt: 0deg;
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	inline-size: min(100%, 60ch);
	margin-block-start: clamp(1rem, 4vh, 2.5rem);
	padding: clamp(1.8rem, 6vmin, 3rem) clamp(1.2rem, 5vmin, 2.4rem)
		clamp(1.6rem, 5vmin, 2.6rem);
	border: 1px solid oklch(80% 0.17 85 / 0.5);
	border-radius: 1rem;
	background: linear-gradient(
		oklch(16% 0.03 60 / 0.95),
		oklch(10% 0.02 60 / 0.97)
	);
	text-align: center;
	opacity: 0;
	translate: 0 6vh;

	/* Franja de peligro */
	&::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		block-size: 0.7rem;
		border-radius: 1rem 1rem 0 0;
		background: repeating-linear-gradient(
			-45deg,
			oklch(85% 0.18 90) 0 1rem,
			oklch(10% 0 0) 1rem 2rem
		);
	}
}

.pledge.is-seen {
	animation: costume-in 950ms var(--ease-out) both,
		pledge-nervous 6s ease-in-out 2s infinite;
}

.pledge-kicker {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: calc(0.55rem + 1.1vmin);
	font-weight: 600;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	color: oklch(85% 0.18 90);

	&::before {
		content: "⚠ ";
		letter-spacing: 0;
	}
}

.pledge-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(1.3rem + 3.4vmin);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	color: oklch(62% 0.24 27);
	text-shadow: 0 0 2vmin oklch(60% 0.24 27 / 0.75),
		0 0.06em 0 oklch(22% 0.1 25);
	animation: neon-flicker 6s 2.6s infinite;
}

.pledge-text {
	margin: 0;
	font-size: calc(0.82rem + 1.85vmin);
	line-height: 1.4;
	color: oklch(94% 0.01 300 / 0.9);
	text-wrap: balance;

	strong {
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: oklch(74% 0.2 40);
	}
}

/* El concurso: un cartel torcido clavado dentro del juramento */
.contest {
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	inline-size: 100%;
	margin-block-start: 0.5rem;
	padding: clamp(1rem, 3.5vmin, 1.7rem) clamp(0.9rem, 3vmin, 1.5rem);
	border: 1px dashed oklch(80% 0.17 85 / 0.45);
	border-radius: 0.7rem;
	background: oklch(8% 0.02 60 / 0.55);
	rotate: -0.7deg;
}

.contest-kicker {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: calc(0.5rem + 1vmin);
	font-weight: 600;
	letter-spacing: 0.35em;
	text-indent: 0.35em;
	text-transform: uppercase;
	color: oklch(80% 0.17 85);

	&::before {
		content: "🏆 ";
		letter-spacing: 0;
	}
}

.contest-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(1rem + 2.6vmin);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	color: oklch(82% 0.17 85);
	text-shadow: 0 0 1.6vmin oklch(80% 0.17 85 / 0.5),
		0 0.06em 0 oklch(25% 0.09 70);
}

.contest-text,
.contest-prize {
	margin: 0;
	font-size: calc(0.72rem + 1.5vmin);
	line-height: 1.4;
	color: oklch(94% 0.01 300 / 0.88);
	text-wrap: balance;

	strong {
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: oklch(80% 0.18 70);
	}
}

.contest-prize {
	margin-block-start: 0.25rem;
}

/* El logo del restaurante: naranja sobre negro, que respire como una brasa */
.contest-logo {
	inline-size: min(64%, 14rem);
	block-size: auto;
	margin-block: 0.1rem 0.2rem;
	filter: drop-shadow(0 0 1.2vmin oklch(74% 0.18 62 / 0.45));
	animation: contest-glow 4.5s ease-in-out infinite;
}

.contest-fine {
	margin: 0;
	font-size: calc(0.6rem + 1vmin);
	line-height: 1.35;
	font-style: italic;
	text-wrap: balance;
	color: oklch(85% 0.05 60 / 0.6);
}

.pledge-btn {
	--button-bg-color: oklch(42% 0.2 27);
	--button-hover-bg-color: oklch(50% 0.22 27);
	--button-border-color: oklch(62% 0.24 27 / 0.7);
	margin-block-start: 0.6rem;
	padding: 0.75rem 2.2rem 0.85rem;
	font-size: calc(0.95rem + 2vmin);
	letter-spacing: 0.06em;
	border-radius: 100vmax;
	box-shadow: 0 0 3vmin oklch(60% 0.24 27 / 0.35);
	animation: pledge-pulse 2.4s ease-in-out infinite;

	&:disabled {
		opacity: 0.55;
		cursor: wait;
		animation: none;
	}
}

/* -------- El televisor -------- */
.tv {
	position: fixed;
	inset: 0;
	z-index: 6;
	display: grid;
	place-items: center;
	padding: 4vmin;
	background: oklch(0% 0 0 / 0.93);
	opacity: 0;
	transition: opacity 250ms var(--ease-out);
}

.tv.is-on,
.tv.is-off {
	opacity: 1;
}

.tv-frame {
	position: relative;
	inline-size: min(92vw, calc(72vh * 4 / 3));
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: oklch(0% 0 0);
	border-radius: 1.2vmin;
	box-shadow: 0 0 0 1.2vmin oklch(14% 0.01 300),
		0 0 7vmin oklch(65% 0.1 200 / 0.35),
		0 2vmin 9vmin oklch(0% 0 0 / 0.85);
	transform-origin: center;
}

.tv.is-on .tv-frame {
	animation: tv-on 750ms var(--ease-out) both;
}

.tv.is-off .tv-frame {
	animation: tv-off 600ms var(--ease-in-back) both;
}

.tv-video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: contrast(1.08) saturate(0.9);
}

.tv-scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0 2px,
		oklch(0% 0 0 / 0.22) 2px 3px
	);
}

/* Nieve al encender y al apagar */
.tv-static {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: repeating-conic-gradient(
			from 0deg,
			oklch(95% 0 0 / 0.55) 0 25%,
			transparent 0 50%
		),
		repeating-conic-gradient(
			from 90deg,
			oklch(20% 0 0) 0 25%,
			oklch(70% 0 0 / 0.5) 0 50%
		);
	background-size: 3px 3px, 5px 5px;
}

.tv.is-on .tv-static {
	animation: tv-static 800ms steps(8) both;
}

.tv.is-off .tv-static {
	animation: tv-static 600ms steps(6) reverse both;
}

body.is-watching {
	overflow: hidden;
}

/* -------- 5. Detalles -------- */
.scene-details {
	align-self: start;
	gap: clamp(1.6rem, 5vh, 3rem);
	margin-block-start: clamp(1rem, 4vh, 3rem);
	padding-block-end: 14vh;
}

.stage-details .mansion {
	opacity: 0.32;
	translate: -50% 10%;
}

.details-head {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
}

.details-kicker {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: calc(0.55rem + 1.1vmin);
	font-weight: 500;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	color: oklch(80% 0.11 65 / 0.75);
}

.details-logo .logo-num {
	font-size: clamp(4.4rem, 21vmin, 12rem);
}

.details-logo .logo-rest {
	font-size: clamp(1.15rem, 5.4vmin, 2.8rem);
}

.details-title {
	margin: 0.6em 0 0;
	font-family: var(--font-display);
	font-size: calc(1rem + 2.8vmin);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	color: oklch(96% 0.02 90);
	text-shadow: 0 0 2vmin oklch(0% 0 0 / 0.85);
}

.details-list {
	display: grid;
	gap: 0.9rem;
	inline-size: min(100%, 44rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.detail {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.3rem;
	border: 1px solid oklch(70% 0.12 60 / 0.3);
	border-radius: 0.9rem;
	background: linear-gradient(
		oklch(20% 0.03 300 / 0.93),
		oklch(13% 0.02 300 / 0.96)
	);
	text-align: left;
	opacity: 0;

	p {
		margin: 0;
	}
}

.detail-icon {
	font-size: calc(1.4rem + 2vmin);
	line-height: 1;
	filter: drop-shadow(0 0 0.5em oklch(70% 0.19 55 / 0.5));
}

.detail-label {
	font-family: system-ui, sans-serif;
	font-size: calc(0.5rem + 1vmin);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: oklch(80% 0.11 65 / 0.7);
}

.detail-value {
	font-size: calc(1rem + 1.8vmin);
	line-height: 1.15;
	color: oklch(97% 0.01 90);
}

.detail-note {
	margin-block-start: 0.15em;
	font-size: calc(0.7rem + 1.2vmin);
	color: oklch(85% 0.05 60 / 0.7);
}

.redacted {
	padding: 0 0.4em;
	font-family: system-ui, sans-serif;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: oklch(65% 0.24 27);
	background: oklch(0% 0 0);
	box-shadow: 0 0 1vmin oklch(60% 0.24 27 / 0.4);
}

/* Entrada de los detalles: logotipo primero, luego las fichas una a una */
.scene-details.is-on .details-kicker {
	animation: rise 800ms 200ms var(--ease-out) both;
}

.scene-details.is-on .details-logo .logo-num {
	animation-delay: 700ms, 2100ms, 2100ms;
}

.scene-details.is-on .details-logo .logo-num::before {
	animation-delay: 1340ms;
}

.scene-details.is-on .details-logo {
	animation-delay: 1360ms;
}

.scene-details.is-on .details-logo .logo-rest {
	animation-delay: 1450ms;
}

.scene-details.is-on .details-title {
	animation: rise 800ms 2100ms var(--ease-out) both;
}

.scene-details.is-on .detail {
	animation: rise 800ms calc(2500ms + var(--i) * 260ms) var(--ease-out) both;
}


/* -------- Formulario de asistencia -------- */
.rsvp,
.share {
	display: grid;
	gap: 1.1rem;
	inline-size: min(100%, 44rem);
	padding: clamp(1.4rem, 5vmin, 2.4rem) clamp(1.1rem, 4.5vmin, 2.2rem);
	border: 1px solid oklch(70% 0.12 60 / 0.3);
	border-radius: 1rem;
	background: linear-gradient(
		oklch(20% 0.03 300 / 0.94),
		oklch(13% 0.02 300 / 0.97)
	);
	opacity: 0;
}

.rsvp-head {
	display: grid;
	gap: 0.3rem;
	text-align: center;
}

.rsvp-kicker,
.share-kicker,
.gang-kicker,
.field-label {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: calc(0.5rem + 1vmin);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: oklch(80% 0.11 65 / 0.75);
}

.rsvp-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(1.3rem + 3.2vmin);
	font-weight: 400;
	line-height: 1;
	color: oklch(96% 0.02 90);
	text-shadow: 0 0 2vmin oklch(0% 0 0 / 0.85);
}

.rsvp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
}

.field {
	display: grid;
	gap: 0.4rem;

	input {
		inline-size: 100%;
		min-block-size: 2.9rem;
		padding: 0.55rem 0.9rem;
		font: inherit;
		font-size: calc(0.95rem + 0.9vmin);
		color: var(--text-color);
		background: oklch(10% 0.02 300 / 0.9);
		border: 1px solid oklch(70% 0.12 60 / 0.35);
		border-radius: 0.6rem;
		transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);

		&::placeholder {
			color: oklch(70% 0.02 300 / 0.45);
		}

		&:focus-visible {
			outline: none;
			border-color: var(--pumpkin-color);
			box-shadow: 0 0 0 3px oklch(74% 0.18 62 / 0.25), 0 0 2vmin oklch(74% 0.18 62 / 0.3);
		}
	}
}

/* Las dos opciones de plan son tarjetas grandes con un radio oculto detrás */
.plan {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;

	legend {
		padding: 0;
		margin-block-end: 0.4rem;
	}
}

.plan-option {
	position: relative;
	display: block;
	cursor: pointer;

	input {
		position: absolute;
		opacity: 0;
		inline-size: 1px;
		block-size: 1px;
	}
}

.plan-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 1rem;
	border: 1px solid oklch(70% 0.12 60 / 0.3);
	border-radius: 0.8rem;
	background: oklch(10% 0.02 300 / 0.7);
	transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out),
		box-shadow 150ms var(--ease-out);

	/* El marcador de selección */
	&::after {
		content: "";
		inline-size: 1.15rem;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 2px solid oklch(70% 0.12 60 / 0.5);
		transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
	}
}

.plan-option:hover .plan-card {
	border-color: oklch(74% 0.18 62 / 0.6);
}

.plan-option input:checked + .plan-card {
	border-color: var(--pumpkin-color);
	background: oklch(26% 0.07 45 / 0.8);
	box-shadow: 0 0 2.5vmin oklch(74% 0.18 62 / 0.25);

	&::after {
		border-color: var(--pumpkin-color);
		background: radial-gradient(circle, var(--pumpkin-color) 45%, transparent 52%);
	}
}

/* Quien declina no merece el naranja de la fiesta: se le apaga la luz */
.plan-option.is-no input:checked + .plan-card {
	border-color: oklch(58% 0.16 20);
	background: oklch(20% 0.06 20 / 0.85);
	box-shadow: 0 0 2.5vmin oklch(58% 0.16 20 / 0.25);

	&::after {
		border-color: oklch(58% 0.16 20);
		background: radial-gradient(circle, oklch(58% 0.16 20) 45%, transparent 52%);
	}

	.plan-icon {
		filter: grayscale(0.4);
	}

	.plan-text strong {
		color: oklch(85% 0.06 25);
	}
}

.plan-option input:focus-visible + .plan-card {
	outline: 1px dashed white;
	outline-offset: 2px;
}

.plan-icon {
	font-size: calc(1.3rem + 1.6vmin);
	line-height: 1;
}

.plan-text {
	display: grid;
	line-height: 1.15;

	strong {
		font-size: calc(0.95rem + 1.2vmin);
		font-weight: 600;
		color: oklch(97% 0.01 90);
	}

	small {
		font-size: calc(0.7rem + 0.9vmin);
		color: oklch(85% 0.05 60 / 0.7);
	}
}

.rsvp-error {
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-radius: 0.6rem;
	border: 1px solid oklch(62% 0.24 27 / 0.6);
	background: oklch(25% 0.09 25 / 0.8);
	font-size: calc(0.85rem + 0.9vmin);
	color: oklch(90% 0.06 30);
}

.rsvp-btn {
	justify-self: center;
	margin-block-start: 0.3rem;
	padding: 0.75rem 2.2rem 0.85rem;
	font-size: calc(0.95rem + 1.6vmin);
	letter-spacing: 0.05em;
	border-radius: 100vmax;
	box-shadow: 0 0 3vmin oklch(70% 0.19 55 / 0.35);
	transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out),
		color 200ms var(--ease-out);
}

.rsvp.is-declining .rsvp-btn {
	border-color: oklch(58% 0.16 20);
	color: oklch(88% 0.07 25);
	box-shadow: 0 0 3vmin oklch(58% 0.16 20 / 0.3);
}

.rsvp-fine,
.share-text,
.gang-text {
	margin: 0;
	text-align: center;
	font-size: calc(0.72rem + 1.1vmin);
	line-height: 1.4;
	color: oklch(85% 0.05 60 / 0.7);
}

/* -------- Compartir con invitados -------- */
.share {
	gap: 0.8rem;
	text-align: center;
}

.share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.share-url {
	flex: 1 1 12rem;
	min-inline-size: 0;
	min-block-size: 2.9rem;
	padding: 0.55rem 0.9rem;
	font: inherit;
	font-size: calc(0.85rem + 0.7vmin);
	color: oklch(90% 0.02 300 / 0.85);
	background: oklch(10% 0.02 300 / 0.9);
	border: 1px solid oklch(70% 0.12 60 / 0.35);
	border-radius: 0.6rem;
	text-overflow: ellipsis;
}

.share-btn {
	flex: 0 0 auto;
	padding-inline: 1.3rem;
	border-radius: 0.6rem;
}

.share-status {
	margin: 0;
	min-block-size: 1.3em;
	font-size: calc(0.75rem + 1vmin);
	color: var(--pumpkin-color);
}

/* Entran después de las fichas */
.scene-details.is-on .rsvp {
	animation: rise 800ms 3600ms var(--ease-out) both;
}

.scene-details.is-on .share {
	animation: rise 800ms 3900ms var(--ease-out) both;
}


/* -------- Desfile de los sospechosos -------- */
/* De borde a borde de la pantalla, saliéndose del ancho de la escena */
.gang {
	--gang-gap: clamp(0.8rem, 2.4vmin, 1.6rem);
	display: grid;
	gap: 0.6rem;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block-start: clamp(1rem, 3vh, 2rem);
	text-align: center;
	opacity: 0;
}

.gang-kicker,
.gang-text {
	padding-inline: 1rem;
}

.gang-rows {
	display: grid;
	gap: clamp(0.4rem, 1.5vmin, 1rem);
	margin-block-start: 0.6rem;
	/* Las filas se pierden en la niebla por los lados */
	mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.gang-row {
	overflow: hidden;
}

/* La pista lleva las caras dos veces; moverla media pista cierra el bucle sin salto */
.gang-track {
	display: flex;
	gap: var(--gang-gap);
	inline-size: max-content;
	padding-block: 0.8rem;
	padding-inline-end: var(--gang-gap);
	will-change: transform;
	animation: gang-scroll var(--speed, 60s) linear infinite;
}

.gang-row.is-reverse .gang-track {
	animation-direction: reverse;
}

.gang-face {
	--size: clamp(4.2rem, 13vmin, 7.5rem);
	flex: 0 0 auto;
	inline-size: var(--size);
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid oklch(70% 0.12 60 / 0.5);
	border-radius: 50%;
	box-shadow: 0 0.6rem 1.6rem oklch(0% 0 0 / 0.7);
	background: oklch(18% 0.02 300);
	filter: grayscale(0.55) contrast(1.1) brightness(0.85);
	user-select: none;
	-webkit-user-drag: none;
	animation: gang-bob 4.2s ease-in-out infinite,
		gang-flash 9s steps(1, end) infinite;
	animation-delay: calc(var(--i) * -0.65s), calc(var(--i) * -1.7s);
}

.gang-replay {
	justify-self: center;
	margin: clamp(0.8rem, 2.5vh, 1.6rem) 0 0;
	padding: 0.7rem 2rem 0.8rem;
	font-size: calc(0.9rem + 1.4vmin);
	letter-spacing: 0.05em;
	border-radius: 100vmax;
	box-shadow: 0 0 3vmin oklch(70% 0.19 55 / 0.3);
}

.scene-details.is-on .gang {
	animation: rise 800ms 4200ms var(--ease-out) both;
}

/* -------- Keyframes de escena -------- */
@keyframes rule-pulse {
	0%,
	100% {
		box-shadow: 0 0 5vmin oklch(50% 0.22 25 / 0.22),
			inset 0 0 4vmin oklch(50% 0.22 25 / 0.1);
	}
	50% {
		box-shadow: 0 0 9vmin oklch(55% 0.24 25 / 0.42),
			inset 0 0 6vmin oklch(55% 0.24 25 / 0.2);
	}
}

@keyframes hint-bounce {
	0%,
	100% {
		translate: 0 0;
		opacity: 0.55;
	}
	50% {
		translate: 0 0.6em;
		opacity: 1;
	}
}

/* La foto aparece con un parpadeo de bombilla floja y cae en su sitio */
@keyframes contest-glow {
	0%,
	100% {
		filter: drop-shadow(0 0 1.1vmin oklch(74% 0.18 62 / 0.4));
	}
	50% {
		filter: drop-shadow(0 0 2.6vmin oklch(82% 0.19 70 / 0.8));
	}
}

@keyframes costume-in {
	0% {
		opacity: 0;
		translate: 0 8vh;
		rotate: calc(var(--tilt) * 3);
	}
	35% {
		opacity: 0.65;
	}
	45% {
		opacity: 0.12;
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		translate: 0 0;
		rotate: var(--tilt);
	}
}

@keyframes costume-sway {
	from {
		rotate: calc(var(--tilt) - 0.9deg);
	}
	to {
		rotate: calc(var(--tilt) + 0.9deg);
	}
}

@keyframes pledge-pulse {
	50% {
		box-shadow: 0 0 5.5vmin oklch(62% 0.24 27 / 0.6);
	}
}

/* Un tic nervioso cada pocos segundos */
@keyframes pledge-nervous {
	0%,
	88%,
	100% {
		translate: 0 0;
	}
	90% {
		translate: -0.35vmin 0.15vmin;
	}
	92% {
		translate: 0.3vmin -0.1vmin;
	}
	94% {
		translate: -0.2vmin 0;
	}
	96% {
		translate: 0.1vmin 0;
	}
}

/* El tubo se enciende: una línea cegadora que se abre y tiembla */
@keyframes tv-on {
	0% {
		scale: 1 0.004;
		filter: brightness(5);
	}
	35% {
		scale: 1 0.004;
		filter: brightness(7);
	}
	55% {
		scale: 1.02 1;
		filter: brightness(1.9);
	}
	68% {
		translate: 0.7vmin 0;
		filter: brightness(1.2) hue-rotate(25deg);
	}
	80% {
		translate: -0.5vmin 0;
		filter: brightness(1.05);
	}
	100% {
		scale: 1 1;
		translate: 0 0;
		filter: none;
	}
}

@keyframes tv-off {
	0% {
		scale: 1 1;
		filter: brightness(1);
	}
	40% {
		scale: 1 0.02;
		filter: brightness(3);
	}
	100% {
		scale: 0 0.004;
		filter: brightness(0);
	}
}

@keyframes tv-static {
	0% {
		opacity: 0.9;
		background-position: 0 0, 0 0;
	}
	50% {
		opacity: 0.6;
		background-position: 2px 1px, -3px 2px;
	}
	100% {
		opacity: 0;
		background-position: -1px 3px, 4px -2px;
	}
}

@keyframes gang-scroll {
	to {
		translate: -50% 0;
	}
}

@keyframes gang-bob {
	50% {
		translate: 0 -0.5rem;
		rotate: 2.5deg;
	}
}

/* Un fogonazo: la cara pasa a color y brilla un instante, como bajo un relámpago */
@keyframes gang-flash {
	0%,
	100% {
		scale: 1;
		filter: grayscale(0.55) contrast(1.1) brightness(0.85);
	}
	4% {
		scale: 1.1;
		filter: grayscale(0) contrast(1.15) brightness(1.35)
			drop-shadow(0 0 0.8rem oklch(75% 0.2 55 / 0.9));
	}
	6% {
		scale: 1;
		filter: grayscale(0.55) contrast(1.1) brightness(0.85);
	}
	7% {
		scale: 1.06;
		filter: grayscale(0) brightness(1.5)
			drop-shadow(0 0 1rem oklch(75% 0.2 55 / 0.9));
	}
	9% {
		scale: 1;
		filter: grayscale(0.55) contrast(1.1) brightness(0.85);
	}
}

@keyframes lightning {
	0%,
	100% {
		opacity: 0;
	}
	5% {
		opacity: 0.8;
	}
	11% {
		opacity: 0.08;
	}
	17% {
		opacity: 0.55;
	}
	25% {
		opacity: 0;
	}
	42% {
		opacity: 0.32;
	}
	52% {
		opacity: 0;
	}
}

@keyframes slam {
	from {
		scale: 3.2;
		opacity: 0;
		filter: blur(1.5rem);
	}
	65% {
		opacity: 1;
	}
	to {
		scale: 1;
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes rise {
	from {
		opacity: 0;
		translate: 0 1.2em;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes digit-drop {
	from {
		opacity: 0;
		translate: 0 -1.2em;
		scale: 1.3;
	}
	40% {
		opacity: 1;
	}
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

@keyframes neon-flicker {
	0%,
	100% {
		opacity: 1;
	}
	7% {
		opacity: 0.55;
	}
	8% {
		opacity: 1;
	}
	9.5% {
		opacity: 0.3;
	}
	10.5% {
		opacity: 1;
	}
	46% {
		opacity: 1;
	}
	47% {
		opacity: 0.45;
	}
	48.5% {
		opacity: 1;
	}
	72% {
		opacity: 1;
	}
	72.6% {
		opacity: 0.2;
	}
	73.2% {
		opacity: 0.9;
	}
	74% {
		opacity: 0.35;
	}
	75.5% {
		opacity: 1;
	}
}

@keyframes blink {
	to {
		visibility: hidden;
	}
}

@keyframes lantern-flicker {
	0%,
	100% {
		filter: brightness(1) drop-shadow(0 0 0.5em oklch(75% 0.19 55 / 0.7));
	}
	35% {
		filter: brightness(1.25) drop-shadow(0 0 0.9em oklch(78% 0.2 58 / 0.9));
	}
	42% {
		filter: brightness(0.85) drop-shadow(0 0 0.3em oklch(75% 0.19 55 / 0.5));
	}
	60% {
		filter: brightness(1.15) drop-shadow(0 0 0.7em oklch(78% 0.2 58 / 0.8));
	}
}

@keyframes rain-fall {
	to {
		translate: 0 300px;
	}
}

@keyframes ember-rise {
	0% {
		opacity: 0;
		translate: 0 0;
	}
	12% {
		opacity: 0.9;
	}
	50% {
		translate: calc(var(--sway) * -1) -55vh;
	}
	88% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
		translate: var(--sway) -110vh;
	}
}

@keyframes spider-drop {
	to {
		translate: 0 0;
	}
}

@keyframes spider-swing {
	from {
		rotate: -7deg;
	}
	to {
		rotate: 7deg;
	}
}

@keyframes enter-pulse {
	50% {
		box-shadow: 0 0 5vmin oklch(70% 0.19 55 / 0.55);
	}
}


/* -------- Tipografía de titulares -------- */
.gate-year,
.titles-num,
.titles-rest,
.marquee,
.invite-title,
.invite-day {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* Creepster es más ancha y chorrea: necesita algo más de aire vertical */
.titles-card {
	line-height: 1;
}

.titles-num {
	font-size: min(34vmin, 40vw);
}

.titles-rest {
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}


.invite-title {
	line-height: 1.1;
}

@keyframes creep {
	from {
		letter-spacing: 0.8em;
		text-indent: 0.8em;
		opacity: 0;
	}
	to {
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		opacity: 1;
	}
}

/* -------- Logotipo de la partida -------- */
/* Misma composición que la cabecera de títulos, a escala de tablero */
.logo {
	--logo-glow: oklch(70% 0.19 55 / 0.5);
	display: grid;
	justify-items: center;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.8;
}

.logo-num {
	position: relative;
	font-size: clamp(4.6rem, 21vmin, 12.5rem);
	letter-spacing: -0.03em;
	/* El degradado es tres veces más alto que el texto para poder barrerlo */
	background: linear-gradient(
		to bottom,
		var(--moon-color) 5%,
		var(--pumpkin-color) 30%,
		oklch(45% 0.17 30) 48%,
		var(--pumpkin-color) 62%,
		var(--moon-color) 78%,
		var(--pumpkin-color) 100%
	);
	background-size: 100% 300%;
	background-position: 0 0;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 1.8vmin var(--logo-glow));
}

/* Onda de choque que se expande cuando el 30 aterriza */
.logo-num::before {
	content: "";
	position: absolute;
	inset: -30% -60%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		oklch(78% 0.2 60 / 0.55),
		oklch(70% 0.19 55 / 0.15) 55%,
		transparent
	);
	opacity: 0;
	pointer-events: none;
}

.logo-rest {
	margin-block-start: 0.4rem;
	font-size: clamp(1.15rem, 5.4vmin, 2.8rem);
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	text-transform: uppercase;
	color: oklch(96% 0.02 90);
	text-shadow: 0 0 1.5vmin oklch(0% 0 0 / 0.85);
}

/* Entrada: estampado, onda, sacudida y las letras que se cierran */
.is-on .logo {
	animation: logo-shake 420ms 660ms linear both;
}

.is-on .logo-num {
	animation: logo-slam 800ms var(--ease-out) both,
		logo-ember 6s ease-in-out 1.4s infinite,
		logo-shimmer 7s ease-in-out 1.4s infinite;
}

.is-on .logo-num::before {
	animation: logo-shockwave 900ms 640ms var(--ease-out) both;
}

.is-on .logo-rest {
	animation: creep 1.1s 750ms var(--ease-out) both;
}

@keyframes logo-slam {
	from {
		opacity: 0;
		scale: 3.2;
		filter: blur(1.2rem) drop-shadow(0 0 0 transparent);
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 1;
		scale: 1;
		filter: blur(0) drop-shadow(0 0 1.8vmin var(--logo-glow));
	}
}

@keyframes logo-shockwave {
	from {
		opacity: 0.9;
		scale: 0.2;
	}
	to {
		opacity: 0;
		scale: 1.6;
	}
}

@keyframes logo-shake {
	0%,
	100% {
		translate: 0 0;
	}
	15% {
		translate: -0.6vmin 0.3vmin;
	}
	30% {
		translate: 0.5vmin -0.3vmin;
	}
	45% {
		translate: -0.4vmin 0.2vmin;
	}
	60% {
		translate: 0.3vmin 0;
	}
	75% {
		translate: -0.15vmin 0;
	}
}

/* Destello: la franja clara del degradado recorre el 30 de arriba abajo */
@keyframes logo-shimmer {
	0%,
	100% {
		background-position: 0 0;
	}
	50% {
		background-position: 0 100%;
	}
}

/* Brasa: el resplandor respira sin llegar a parpadear */
@keyframes logo-ember {
	0%,
	100% {
		filter: drop-shadow(0 0 1.8vmin var(--logo-glow));
	}
	30% {
		filter: drop-shadow(0 0 3vmin oklch(75% 0.2 60 / 0.65));
	}
	58% {
		filter: drop-shadow(0 0 1.2vmin oklch(70% 0.19 55 / 0.32));
	}
	80% {
		filter: drop-shadow(0 0 2.4vmin oklch(74% 0.2 58 / 0.55));
	}
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
	.fog,
	.critter,
	.moon {
		animation: none;
	}

	.board.is-complete .card,
	.board.is-complete .face {
		animation: none;
	}

	.gate-year,
	.scene-gate.is-on .gate-year,
	.scene-gate.is-on .gate-year span,
	.enter-btn,
	.enter-lantern,
	.gate-cursor,
	.rain::before,
	.rain::after,
	.embers span,
	.spider,
	.flash.is-striking,
	.scene-titles.is-on :is(.titles-num, .titles-rest, .titles-line),
	.scene-invite.is-on :is(.invite-kicker, .invite-title, .invite-date, .invite-rule),
	.invite-rule-kicker,
	.invite-scroll-hint,
	.costume.is-seen {
		animation: none;
	}

	.titles-line,
	.scene-titles.is-on .titles-line,
	.scene-gate .enter-btn,
	.scene-gate .gate-hint,
	.gate-line {
		opacity: 1;
	}

	.scene-gate .enter-btn {
		pointer-events: auto;
	}

	.is-on :is(.logo, .logo-num, .logo-rest),
	.is-on .logo-num::before {
		animation: none;
	}

	.rain,
	.embers,
	.spider {
		display: none;
	}

	.costume,
	.pledge,
	.detail,
	.rsvp,
	.share,
	.gang {
		opacity: 1;
		translate: 0 0;
	}

	.gang {
		inline-size: 100%;
		margin-inline: 0;
	}

	.gang-rows {
		mask-image: none;
	}

	.gang-track {
		flex-wrap: wrap;
		justify-content: center;
		inline-size: auto;
		animation: none;
	}

	.gang-face {
		filter: none;
		animation: none;
	}

	.gang-face.is-dupe {
		display: none;
	}

	.pledge.is-seen,
	.pledge-title,
	.pledge-btn,
	.contest-logo,
	.tv.is-on .tv-frame,
	.tv.is-off .tv-frame,
	.tv-static,
	.scene-details.is-on :is(.details-kicker, .details-title, .detail, .rsvp, .share, .gang) {
		animation: none;
	}
}

/* -------- Small screens -------- */
@media (max-width: 40rem) {
	main {
		inline-size: min(92vw, 85vmin);
		gap: 1.4rem;
	}


	.interface {
		font-size: calc(0.55rem + 2.4vmin);
	}
}