/*
 * Laadanimatie (Osmo "Dropping Cards") + hero-tekstintro.
 * Osmo's structuur en maten zijn ongewijzigd; kleuren komen uit theme.json en
 * het logo is de tekst "The Boozt" in plaats van een SVG.
 */

/* Zonder JavaScript of bij een tweede bezoek in dezelfde sessie: geen loader.
   De klasse op <html> wordt gezet door het script in <head> (inc/loader.php). */
.loading-container {
	display: none;
}

html.vino2-loading .loading-container {
	display: block;
}

/* Niet scrollen zolang de loader speelt (ook zonder Locomotive, op touch). */
html.vino2-loading {
	overflow: hidden;
}

/* Tekstintro: kop en intro pas tonen als de animatie ze overneemt. De klasse
   vino2-ready wordt door loader.js gezet vlak vóór de tween start, en door een
   noodrem na 6 s als er iets misgaat — de tekst blijft dus nooit onzichtbaar. */
html.vino2-anim:not(.vino2-ready) .boozt-hero__h1,
html.vino2-anim:not(.vino2-ready) .boozt-hero__lead {
	visibility: hidden;
}

/* Voorkomt scrollbalken zolang de hero op 110 % staat tijdens het binnenkomen. */
html.vino2-loading .wp-site-blocks > main {
	overflow: clip;
}

/* ------------------------------------------------------------------ Osmo */

.loading-container,
.loading-container * {
	box-sizing: border-box;
}

.loading-container {
	z-index: 600; /* boven de navigatiebalk (500) en de hotspot-modal (400) */
	pointer-events: none;
	position: fixed;
	inset: 0;
}

.loading-screen {
	pointer-events: auto;
	color: var(--wp--preset--color--cream, #ebe0d6);
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	overflow: clip;
}

.loading-screen__background {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	width: 100%;
	height: 100%;
	position: absolute;
}

.loading-screen__logo {
	position: absolute;
	bottom: 2em;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

.loading-screen__list {
	grid-column-gap: 0.5em;
	grid-row-gap: 0.5em;
	opacity: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.loading-screen__card {
	aspect-ratio: 3 / 4;
	border-radius: 0.5em;
	width: 10em;
	font-size: max(1.5vw, 2em);
	position: absolute;
}

.loading-screen .cover-image {
	object-fit: cover;
	border-radius: inherit;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.loading-container {
		display: none !important;
	}
}