/*
 * Motion intro (inc/motion-preloader.php, assets/js/motion-preloader.js).
 * The cover is dark on purpose, whatever the reader's light/dark choice: it is the first thing seen.
 * Colors are the brand's fixed values, not the theme tokens, which flip in light mode.
 */

#mp-intro {
	--mp-ink: #1d1b1a;
	--mp-coal: #272422;
	--mp-line: #3b3734;
	--mp-bone: #e5e3e2;
	--mp-ember: #ff5100;
	--mp-ember-deep: #b33a00;
	--mp-fill-time: 1600ms;
	--mp-exit: 800ms;
	--mp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Shown only while the head snippet has set html.mp-on. Without JS, or when the session already had an intro, nothing shows. */
html:not(.mp-on) #mp-intro {
	display: none;
}

html.mp-on {
	overflow: hidden;
}

.mp-intro {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 32%, var(--mp-line) 0%, var(--mp-coal) 38%, var(--mp-ink) 78%);
	touch-action: none;
	transition:
		transform var(--mp-exit) cubic-bezier(0.76, 0, 0.24, 1),
		visibility 0s linear var(--mp-exit);
}

/* Exit: the cover slides up like a curtain and the card zooms away behind it. Visibility drops after the slide. */
.mp-intro.is-done {
	transform: translateY(-101%);
	visibility: hidden;
	pointer-events: none;
}

.mp-intro.is-done .mp-card {
	animation: mp-card-out var(--mp-exit) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.mp-intro.is-done .mp-glow {
	animation: mp-glow-out var(--mp-exit) ease both;
}

/* Warm light behind the glass: flashes once, then settles to a soft glow. */
.mp-glow {
	position: absolute;
	width: min(78vmin, 46rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgb(255 81 0 / 0.55),
		rgb(255 81 0 / 0.16) 48%,
		transparent 74%
	);
	opacity: 0;
	animation: mp-glow 1.8s var(--mp-ease-out) 0.85s forwards;
}

/* Liquid glass with soft-UI depth: a blurred translucent panel, a light top edge and inner shade. */
.mp-card {
	position: relative;
	display: grid;
	justify-items: center;
	gap: clamp(1.5rem, 4vmin, 2.25rem);
	padding: clamp(2rem, 5vmin, 2.75rem) clamp(2rem, 6vmin, 3rem);
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 2.5rem;
	background: linear-gradient(150deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.02));
	box-shadow:
		0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55),
		inset 0 1px 0 rgb(255 255 255 / 0.18),
		inset 0 -0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.35);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	animation: mp-card-in 0.9s var(--mp-ease-out) both;
}

/* The face: its outline overshoots into place, then its eye appears and starts to look around. */
.mp-face {
	display: block;
	width: min(58vw, 22rem);
	height: auto;
	aspect-ratio: 1;
	overflow: visible;
	color: var(--mp-ember);
}

.mp-face-shape,
.mp-eye {
	fill: currentColor;
}

.mp-face-shape {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: mp-face-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* The eye's move comes from its parent <g> (set by the script); the blink lives on the eye itself, so the two never fight. */
.mp-eye {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation:
		mp-eye-pop 0.45s ease 0.7s both,
		mp-blink 4.2s ease-in-out 1.5s infinite;
}

/* On exit the eye winks (is-done is set by the script). */
.mp-intro.is-done .mp-eye {
	animation: mp-wink 0.42s ease-in-out both;
}

/* The mouth (the cut-out in the face's mask) widens once when "Entrar" appears, and pulses when it is pressed. */
.mp-mouth {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.mp-intro.is-ready .mp-mouth {
	animation: mp-smile 0.6s var(--mp-ease-out) both;
}

.mp-intro.is-done .mp-mouth {
	animation: mp-smile-pulse 0.45s ease-out both;
}

/* The foot holds the progress bar, then the "Entrar" button, in the same cell so nothing shifts. */
.mp-foot {
	display: grid;
	justify-items: center;
	align-items: center;
	min-height: 2.75rem;
}

.mp-foot > * {
	grid-area: 1 / 1;
}

/* A thin inset track; the ember fill grows to 90% while the page loads. */
.mp-track {
	display: block;
	width: min(14rem, 60vw);
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: rgb(0 0 0 / 0.35);
	box-shadow:
		inset 0 1px 2px rgb(0 0 0 / 0.6),
		0 1px 0 rgb(255 255 255 / 0.06);
	transition:
		opacity 0.3s ease,
		visibility 0.3s;
}

.mp-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform-origin: left center;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--mp-ember-deep), var(--mp-ember));
	box-shadow: 0 0 0.75rem rgb(255 81 0 / 0.6);
	animation: mp-fill var(--mp-fill-time) cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s forwards;
}

.mp-enter {
	font-family: var(--font-sans, "Instrument Sans"), ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.95rem 2.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--mp-ember);
	color: var(--mp-ink);
	cursor: pointer;
	box-shadow:
		0 0.75rem 1.5rem -0.75rem rgb(255 81 0 / 0.8),
		inset 0 1px 0 rgb(255 255 255 / 0.35);
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		transform 0.4s var(--mp-ease-out),
		scale 0.15s ease;
}

.mp-intro.is-ready .mp-track {
	opacity: 0;
	visibility: hidden; /* a hidden bar takes no clicks, so the button under it gets them */
}

.mp-intro.is-ready .mp-enter {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.mp-enter:active {
	scale: 0.97;
}

.mp-enter:focus-visible {
	outline: 3px solid var(--mp-bone);
	outline-offset: 4px;
}

@keyframes mp-glow {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	55% {
		opacity: 1;
		transform: scale(1.12);
	}
	100% {
		opacity: 0.6;
		transform: scale(1);
	}
}

@keyframes mp-card-in {
	from {
		opacity: 0;
		transform: scale(0.94) translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* The outline turns in from a small, tilted start and settles past its place, then back. */
@keyframes mp-card-out {
	to {
		opacity: 0;
		transform: scale(1.08) translateY(-1.5rem);
		filter: blur(8px);
	}
}

@keyframes mp-glow-out {
	to {
		opacity: 0;
		transform: scale(1.6);
	}
}

@keyframes mp-face-in {
	from {
		opacity: 0;
		transform: scale(0.3) rotate(-90deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mp-eye-pop {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes mp-blink {
	0%,
	92%,
	100% {
		transform: scaleY(1);
	}
	95% {
		transform: scaleY(0.12);
	}
}

@keyframes mp-smile {
	to {
		transform: scale(1.08, 1.14);
	}
}

/* Starts from the smile it already holds, so pressing "Entrar" pulses it instead of snapping back. */
@keyframes mp-smile-pulse {
	from {
		transform: scale(1.08, 1.14);
	}
	40% {
		transform: scale(1.16, 1.24);
	}
	to {
		transform: scale(1.08, 1.14);
	}
}

@keyframes mp-wink {
	0%,
	100% {
		transform: scaleY(1);
	}
	45% {
		transform: scaleY(0.12);
	}
}

@keyframes mp-fill {
	to {
		transform: scaleX(0.9);
	}
}

/* Reduced motion: the face and eye are simply there and the eye stays home. The fade out stays: it is opacity, not movement. */
@media (prefers-reduced-motion: reduce) {
	.mp-glow {
		animation: none;
		opacity: 0.6;
	}

	.mp-card,
	.mp-face-shape,
	.mp-eye,
	.mp-intro.is-done .mp-eye,
	.mp-intro.is-ready .mp-mouth,
	.mp-intro.is-done .mp-mouth {
		animation: none;
	}

	.mp-fill {
		animation: none;
		transform: scaleX(0.9);
	}

	.mp-enter,
	.mp-track {
		transition: none;
	}

	/* No slide or zoom: the cover simply fades out. */
	.mp-intro {
		transition:
			opacity var(--mp-exit) ease,
			visibility 0s linear var(--mp-exit);
	}

	.mp-intro.is-done {
		transform: none;
		opacity: 0;
	}

	.mp-intro.is-done .mp-card,
	.mp-intro.is-done .mp-glow {
		animation: none;
	}
}