/*--
	Pizzeria — custom styles
	Palette:
		--pz-red      rgb(243, 39, 53)   bright red
		--pz-red-dark rgb(129, 15, 20)   deep maroon
--*/
:root {
	--pz-red: rgb(243, 39, 53);
	--pz-red-dark: rgb(129, 15, 20);
	--pz-cream: #f7f1ea;
}

/* ----------------------------------------------------------------------
   Landing page (revealed after the loader lifts)
---------------------------------------------------------------------- */
.pz-hello {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Warm cream so the red badge logo reads cleanly */
	background: var(--pz-cream);
}

/* Faint wolves tiled small like a pizza-wrapper print, behind the content.
   Uses wolf-tile.png — the wolf centred in a transparent square so the tiles
   sit apart with even spacing instead of touching. */
.pz-hello::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/wolf-tile.png);
	background-repeat: repeat;
	background-size: 132px 132px;
	opacity: 0.1;
	pointer-events: none;
}

.pz-hello__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 24px;
	text-align: center;
}

.pz-hello__logo {
	width: clamp(240px, 46vw, 480px);
	height: auto;
	filter: drop-shadow(0 14px 34px rgba(129, 15, 20, 0.18));
}

.pz-hello__soon {
	margin: 0;
	color: var(--pz-red-dark);
	font-size: clamp(16px, 3.4vw, 26px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	/* nudge to offset the trailing letter-spacing so it stays optically centred */
	text-indent: 0.4em;
}

/* ----------------------------------------------------------------------
   Intro loader (OTRA-style curtain)
   A full-viewport panel over the deep-maroon brand colour: the wordmark
   fades up, a hairline fills, then the whole curtain lifts to reveal the
   page. Scroll is locked (body.pz-loading) until it finishes.
---------------------------------------------------------------------- */
body.pz-loading {
	overflow: hidden;
}

.pz-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Warm cream field so the bright-red wolves read clearly */
	background: #f7f1ea;
	transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Curtain lift — added by JS once the hold elapses */
.pz-loader.is-hidden {
	transform: translateY(-100%);
}

/*
	The wolves sweep in from just left-of-centre (slightly high), settle in the
	middle, then fade away in place. Kept to a 1s single pass to match the
	JS hold before the curtain lifts.
*/
.pz-loader__wolves {
	width: clamp(130px, 22vw, 240px);
	height: auto;
	transform-origin: center;
	animation: pzWolvesRun 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pzWolvesRun {
	0% {
		transform: translate(-55%, -14%) scale(0.8);
		opacity: 0;
		filter: blur(0);
	}
	22% {
		opacity: 1;
	}
	48% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
		filter: blur(0);
	}
	65% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
		filter: blur(0);
	}
	100% {
		/* Settles at centre, then simply fades away in place — no rotation,
		   no travel; a soft blur carries the fade. */
		transform: translate(0, 0) scale(1);
		opacity: 0;
		filter: blur(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pz-loader {
		transition-duration: 0.4s;
	}

	/* No travel for reduced motion — a gentle fade in and out at centre */
	.pz-loader__wolves {
		animation: pzWolvesFade 0.45s ease both;
	}

	@keyframes pzWolvesFade {
		0% { opacity: 0; }
		40% { opacity: 1; }
		80% { opacity: 1; }
		100% { opacity: 0; }
	}
}