/* ==========================================================================
   Preloader – Frost Theme
   Wartet auf den echten Ladeabschluss der Hero-Section, kein Fake-Timer.
   ========================================================================== */

/* Overlay – deckt die gesamte Seite ab, solange geladen wird */
#frost-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--base, #ffffff);

	/* Ausblenden via Opacity + Visibility für smooth Transition */
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 0s;
}

.frost-preloader__spinner {
	display: block;
	width: 34px;
	height: 34px;
	border: 2.5px solid rgba(0, 0, 0, 0.14);
	border-top-color: var(--wp--preset--color--contrast, #1a1a1a);
	border-radius: 50%;
	animation: frost-spin 0.78s linear infinite;
}

/* Harte Umschaltung: Mobile zeigt nur den normalen Spinner */
#frost-preloader.is-mobile-basic .frost-preloader__spinner {
	display: block;
}

#frost-preloader.is-mobile-basic .frost-preloader__wordmark {
	display: none !important;
}

/* Fail-safe: Wordmark ist standardmaessig aus (Mobile sicher), Desktop aktiviert sie explizit */
.frost-preloader__wordmark {
	display: none;
}

@media (min-width: 1024px) {
	#frost-preloader .frost-preloader__spinner {
		display: none;
	}

	#frost-preloader .frost-preloader__wordmark {
		display: inline-flex;
	}
}

@keyframes frost-spin {
	to { transform: rotate(360deg); }
}

/* Fertig-Klasse: Overlay unsichtbar + aus dem Tab-Order entfernen */
#frost-preloader.is-loaded {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 0.75s;
	pointer-events: none;
}

/* Preloader-Wordmark */
.frost-preloader__wordmark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	/* Matcht die Hero-Kontakt-Typografie (Name/Kontakt im Start-Viewport) */
	font-size: 1.36rem;
	font-weight: var(--ppg-type-body-fw, 500);
	letter-spacing: 0;
	line-height: 1.12;
	padding-block: 0.14em;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	transform: translate3d(0, -25%, 0);
	will-change: transform, opacity;
}

.frost-preloader__part {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	transform: translate3d(0, 0, 0);
}

.frost-preloader__y {
	display: inline-block;
	overflow: hidden;
	max-width: 0;
	clip-path: inset(-22% 100% -22% 0);
	-webkit-clip-path: inset(-22% 100% -22% 0);
	transform: translate3d(0, 0.24em, 0);
	opacity: 0;
	transition:
		max-width 0.92s cubic-bezier(0.16, 1, 0.3, 1),
		clip-path 0.92s cubic-bezier(0.16, 1, 0.3, 1),
		-webkit-clip-path 0.92s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.68s ease-out;
}

.frost-preloader__name {
	display: inline-block;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	transform: translate3d(-0.04em, 0, 0);
	transition:
		max-width 1.15s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.72s ease-out,
		transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

#frost-preloader.is-seq-start .frost-preloader__y {
	max-width: 1.35ch;
	clip-path: inset(-22% 0 -22% 0);
	-webkit-clip-path: inset(-22% 0 -22% 0);
	transform: translateY(0);
	opacity: 1;
}

#frost-preloader.is-split .frost-preloader__wordmark {
	gap: 0.14em;
	transition: gap 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#frost-preloader.is-split .frost-preloader__part--left {
	transform: translate3d(-0.06em, 0, 0);
	transition: transform 1.02s cubic-bezier(0.16, 1, 0.3, 1);
}

#frost-preloader.is-split .frost-preloader__part--right {
	transform: translate3d(0.06em, 0, 0);
	transition: transform 1.02s cubic-bezier(0.16, 1, 0.3, 1);
}

#frost-preloader.is-split .frost-preloader__name {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

#frost-preloader.is-split .frost-preloader__part--left .frost-preloader__name {
	max-width: 8.2ch;
}

#frost-preloader.is-split .frost-preloader__part--right .frost-preloader__name {
	max-width: 7.2ch;
}

@media (prefers-reduced-motion: reduce) {
	.frost-preloader__y {
		max-width: 1.35ch;
		clip-path: inset(-22% 0 -22% 0);
		-webkit-clip-path: inset(-22% 0 -22% 0);
		transform: none;
		opacity: 1;
	}

	.frost-preloader__name {
		max-width: 8.2ch;
		opacity: 1;
	}
}

@media (max-width: 1023px) {
	#frost-preloader {
		padding-top: env(safe-area-inset-top, 0px);
	}

	/* Mobile erzwingt immer den normalen Spinner-Preloader */
	#frost-preloader .frost-preloader__spinner {
		display: block !important;
	}

	#frost-preloader .frost-preloader__wordmark {
		display: none !important;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	/* Hintergrund/Hero bleibt sicher unsichtbar bis Preloader-Sequenz komplett durch ist */
	html.frost-preloader-active body.home .py-hero-section,
	html.frost-preloader-active body.front-page .py-hero-section {
		opacity: 0;
		visibility: hidden;
	}

	html.frost-preloader-active #frost-preloader {
		opacity: 1;
		visibility: visible;
	}

	/* Wichtig: Hero-Hintergrundanimation nicht vorlaufen lassen */
	html.frost-preloader-active body.home .py-hero-image .py-hero-sun-layer,
	html.frost-preloader-active body.front-page .py-hero-image .py-hero-sun-layer {
		animation: none !important;
		opacity: 0 !important;
		transform: translate(-8%, -6%) rotate(-2deg) !important;
	}
}

/* ==========================================================================
   Hero-Bild Fade-in
   Das Bild in der Hero-Section startet unsichtbar und wird durch JS
   nach dem Laden auf opacity:1 animiert (Easy-Ease = cubic-bezier).
   ========================================================================== */
.frost-hero-image-init {
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.frost-hero-image-init.is-visible {
	opacity: 1;
}

@media (min-width: 1024px) {
	body.home .py-hero-section.frost-hero-reveal > * {
		opacity: 0;
		transform: translate3d(0, 34px, 0) scale(0.982);
		transition:
			opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
			transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}

	body.home .py-hero-section.frost-hero-reveal.frost-hero-reveal-visible > * {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}

	body.home .py-hero-section.frost-hero-reveal.frost-hero-reveal-visible .py-hero-image {
		transition-delay: 120ms;
	}

	body.home .py-hero-section.frost-hero-reveal.frost-hero-reveal-visible .py-hero-text {
		transition-delay: 240ms;
	}
}