/* =========================================================================
   Lade-Animation – EO-Monogramm wird nachgezeichnet
   Vorlage: VORLAGEN/animation-final.zip (final.html)
   Geladen nur auf Seiten mit aktivierter Lade-Animation (inc/page-loader.php).
   ========================================================================= */

.elucio-loader {
	--elucio-loader-curtain: #FFFEF5;
	--elucio-loader-logo:    #272727;

	position:        fixed;
	inset:           0;
	z-index:         9999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--elucio-loader-curtain);
	/* Overlay bleibt stehen und blendet dann als Ganzes aus */
	animation:       elucio-loader-overlay-out 1s ease 4.75s forwards;
}

.elucio-loader__stage {
	position:  relative;
	width:     min(20.8vw, 200px);
	/* Logo steht ab 2.95s -> kurz halten, dann langsam blasser werden */
	animation: elucio-loader-logo-out 2s cubic-bezier(0.33, 0, 0.67, 1) 3.25s forwards;
}

.elucio-loader__stage svg {
	display:  block;
	width:    100%;
	height:   auto;
	overflow: visible;
}

/* Erst nur Kontur, dann Füllung. stroke-dasharray/-dashoffset setzt das
   Inline-Script direkt nach dem Markup. Reihenfolge: E, dann O (+0.45s). */
.elucio-loader__glyphs path {
	fill:            var(--elucio-loader-logo);
	fill-opacity:    0;
	stroke:          var(--elucio-loader-logo);
	stroke-width:    1;
	stroke-linejoin: round;
	vector-effect:   non-scaling-stroke;
	animation:
		elucio-loader-draw 1.6s ease-in-out 0s forwards,
		elucio-loader-fill-on 0.8s ease 1.35s forwards,
		elucio-loader-stroke-off 0.35s ease 2.15s forwards;
}

.elucio-loader__glyphs path:nth-child(2) {
	animation:
		elucio-loader-draw 1.6s ease-in-out 0.45s forwards,
		elucio-loader-fill-on 0.8s ease 1.8s forwards,
		elucio-loader-stroke-off 0.35s ease 2.6s forwards;
}

.elucio-loader.is-done {
	display: none;
}

/* Klick auf einen Link: Vorhang schließt sich, Monogramm läuft erneut,
   danach Seitenwechsel (Timing in page-loader.js) */
.elucio-loader.is-leaving {
	animation: elucio-loader-overlay-in 0.3s ease forwards;
}

body.is-loading {
	overflow: hidden;
}

/* Seite blendet ein, während der Vorhang verschwindet */
body.has-page-loader .site-header,
body.has-page-loader .site-main,
body.has-page-loader .site-footer {
	opacity:   0;
	animation: elucio-loader-page-in 1.2s ease 4.75s forwards;
}

body.has-page-loader.page-loader-skipped .site-header,
body.has-page-loader.page-loader-skipped .site-main,
body.has-page-loader.page-loader-skipped .site-footer {
	opacity:   1;
	animation: none;
}

@keyframes elucio-loader-draw     { to { stroke-dashoffset: 0; } }
@keyframes elucio-loader-fill-on  { to { fill-opacity: 1; } }
/* Kontur erst weg, wenn die Füllung komplett steht */
@keyframes elucio-loader-stroke-off { to { stroke-opacity: 0; } }

@keyframes elucio-loader-logo-out {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(1.03); }
}

@keyframes elucio-loader-overlay-out {
	from { opacity: 1; }
	to   { opacity: 0; visibility: hidden; }
}

@keyframes elucio-loader-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes elucio-loader-page-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.elucio-loader {
		animation: elucio-loader-overlay-out 0.3s linear 0.3s forwards;
	}

	.elucio-loader__stage {
		animation: none;
	}

	.elucio-loader__glyphs path,
	.elucio-loader__glyphs path:nth-child(2) {
		fill-opacity:      1 !important;
		stroke:            none;
		animation:         none !important;
		stroke-dashoffset: 0 !important;
	}

	body.has-page-loader .site-header,
	body.has-page-loader .site-main,
	body.has-page-loader .site-footer {
		animation: elucio-loader-page-in 0.3s linear 0.3s forwards;
	}
}