/**
 * Ladeanimation der Startseite (siehe classes/class-yc-loader.php).
 *
 * Ablauf:
 *   1. Das Y setzt sich zusammen (youcat-animation.js, Dauer dort in settings).
 *   2. animation.js setzt html.yc-loader-exit, ab dann laufen die Keyframes
 *      unten. Alle Zeiten zaehlen ab diesem Moment. Sie entsprechen dem alten
 *      Loader (scorg 1115), verschoben auf das Ende des Y.
 *   3. Nach yc-loader-y-out entfernt animation.js den Loader.
 */

#yc-loader {
	position: fixed;
	inset: 0;
	z-index: 9999990;
	background-color: var(--primary, #f5ce3e);
}

.yc-loader-skip #yc-loader {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	#yc-loader {
		display: none;
	}
}

/* Y-Animation: fuellt den Bildschirm, das Y wird darin zentriert */
#yc-loader .yc-loader-y {
	position: fixed;
	inset: 0;
	overflow: hidden;
}

/* Schriftzug: startet mittig und wandert an die Stelle des Header-Logos */
#yc-loader .yc-loader-text svg {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 11.68vh;
	max-height: 11.68vh;
	width: 66.18vw;
	max-width: 66.18vw;
	opacity: 0;
	z-index: 9999993;
	fill: #fff;
}

/* Header: Logo verstecken, solange der Schriftzug seine Rolle uebernimmt */
.yc-loader-header svg {
	visibility: hidden;
}

/* ---------------------------------- Mobile ---------------------------------- */

.yc-loader-exit #yc-loader {
	animation: 0.6s linear 1.3s 1 yc-loader-background-out forwards;
}

.yc-loader-exit #yc-loader .yc-loader-y {
	animation:
		0.5s ease 0s 1 yc-loader-y-dim forwards,
		0.8s ease 1.9s 1 yc-loader-y-out forwards;
}

.yc-loader-exit #yc-loader .yc-loader-text svg {
	animation:
		0.7s ease 0s 1 yc-loader-text-in forwards,
		0.8s ease-in-out 0.9s 1 yc-loader-text-move forwards,
		0.6s cubic-bezier(0.07, 0.31, 0.39, 0.55) 1.1s 1 yc-loader-text-shrink forwards,
		0.2s ease-in-out 1.5s 1 yc-loader-text-out forwards;
}

/* --------------------------------- Desktop ---------------------------------- */

@media (min-width: 1200px) {
	.yc-loader-active .fl-page {
		overflow: hidden;
	}

	.yc-loader-active .yc-loader-header {
		transform: translateX(100%);
		z-index: 9999991 !important;
	}

	.yc-loader-exit .yc-loader-header {
		animation: 0.5s ease-in-out 1s 1 yc-loader-header-in forwards;
	}

	.yc-loader-exit #yc-loader {
		animation: 0.2s linear 1.2s 1 yc-loader-background-out forwards;
	}

	.yc-loader-exit #yc-loader .yc-loader-y {
		animation:
			0.5s ease 0s 1 yc-loader-y-dim forwards,
			1.6s ease 0.8s 1 yc-loader-y-out forwards;
	}

	.yc-loader-exit #yc-loader .yc-loader-text svg {
		animation:
			0.7s ease 0s 1 yc-loader-text-in forwards,
			0.6s ease-in 0.8s 1 yc-loader-text-move-desktop forwards,
			0.4s ease-out 0.8s 1 yc-loader-text-shrink-desktop forwards,
			0.5s ease-in-out 1s 1 yc-loader-text-out forwards;
	}
}

/* -------------------------------- Keyframes --------------------------------- */

@keyframes yc-loader-background-out {
	to {
		background-color: transparent;
	}
}

@keyframes yc-loader-y-dim {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.4;
	}
}

@keyframes yc-loader-y-out {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 0;
	}
}

@keyframes yc-loader-text-in {
	from {
		opacity: 0;
		height: calc(11.68vh * 0.8);
		max-height: calc(11.68vh * 0.8);
		width: calc(66.18vw * 0.8);
		max-width: calc(66.18vw * 0.8);
	}
	to {
		opacity: 1;
		height: 11.68vh;
		max-height: 11.68vh;
		width: 66.18vw;
		max-width: 66.18vw;
	}
}

@keyframes yc-loader-text-move {
	from {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	to {
		top: 1.8rem;
		left: 50%;
		transform: translate(-50%, 0);
	}
}

@keyframes yc-loader-text-move-desktop {
	from {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	to {
		top: 3.2rem;
		left: 3.8rem;
		transform: translate(0, 0);
	}
}

@keyframes yc-loader-text-shrink {
	from {
		height: 11.68vh;
		max-height: 11.68vh;
		width: 66.18vw;
		max-width: 66.18vw;
	}
	to {
		height: 3.2rem;
		max-height: 3.2rem;
		width: auto;
		max-width: none;
	}
}

@keyframes yc-loader-text-shrink-desktop {
	from {
		height: 11.68vh;
		max-height: 11.68vh;
		width: 66.18vw;
		max-width: 66.18vw;
	}
	to {
		height: 4.8rem;
		max-height: 4.8rem;
		width: auto;
		max-width: none;
	}
}

@keyframes yc-loader-text-out {
	from {
		fill: #fff;
	}
	to {
		fill: var(--primary, #f5ce3e);
	}
}

@keyframes yc-loader-header-in {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}