/**
 * preloader.css — forside-intro.
 * Hvid fuldskærm med Ta' Chancen-logoanimationen (Lottie). Når animationen
 * er færdig, kører hele skærmen op og ud (gardin), og forsiden træder frem
 * og animeres ind med stagger (se reveal.css/js). Mobil-først.
 */

/* Set introen i denne browser-session: skjul gardinet fra første paint, så
   gentagne besøg på forsiden ikke får det igen (flag sat inline i header.php). */
.tc-intro-seen .tc-preloader {
	display: none !important;
}

.tc-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483640; /* over ALT, inkl. Cookiebot-banneret (z 2147483631): den uigennemsigtige intro dækker banneret bagved sig, så det afsløres pænt når gardinet letter (ingen flash, ingen JS). */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tc-space-6);
	background-color: #fff;
	transform: translateY(0);
	transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

/* Scenen er det eneste centrerede element og har animationens størrelse, så
   logoet altid sidder lodret + vandret centreret. Signaturet hænger absolut
   nedenunder og påvirker derfor ikke centreringen. */
.tc-preloader__stage {
	position: relative;
	width: min(78vw, 340px);
	aspect-ratio: 715 / 353; /* animationens native forhold: reserverer højden, intet hop */
}

.tc-preloader__anim {
	width: 100%;
	height: 100%;
}

.tc-preloader__anim svg {
	display: block;
}

/* Middelfart Sparekasse-logoet — hænger absolut under den centrerede animation.
   Vises når is-signed sættes (JS), lige efter logoanimationen, og kører ud
   sammen med gardinet. */
.tc-preloader__sign {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: clamp(var(--tc-space-4), 4vh, var(--tc-space-6));
	width: 130px;
	height: auto;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.tc-preloader.is-signed .tc-preloader__sign {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Udgang: hele gardinet kører op og ud gennem toppen. */
.tc-preloader.is-leaving {
	transform: translateY(-100%);
	pointer-events: none;
}

/* Lås baggrunds-scroll mens introen kører. */
body.tc-preloading {
	overflow: hidden;
}

@media (min-width: 768px) {
	.tc-preloader__stage {
		width: min(46vw, 480px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-preloader,
	.tc-preloader__sign {
		transition: none;
	}
}