/*
 * Scroll-Animationen des Themes.
 *
 * Wird von inc/animations.php im Frontend geladen und per add_editor_style()
 * zusätzlich im Block-Editor, damit dort die Vorschau-Schaltfläche funktioniert.
 *
 * Funktionsweise:
 * - inc/animations.php hängt an den äußeren Tag eines Blocks die Klassen
 *   "anim anim--<typ>" sowie die Custom Properties (Dauer, Verzögerung, Distanz).
 * - assets/js/animations.js setzt .has-anim auf <html> und vergibt beim
 *   Scrollen .anim--visible. Ohne JavaScript greift der Startzustand nie,
 *   d.h. Inhalte bleiben immer sichtbar.
 * - Bei prefers-reduced-motion: reduce wird gar nicht animiert.
 */

.anim {
	--anim-duration: 700ms;
	--anim-delay: 0ms;
	--anim-distance: 40px;
	--anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--anim-from-opacity: 0;
	--anim-from-transform: none;
	--anim-from-filter: none;
	--anim-from-clip: none;
}

@media (prefers-reduced-motion: no-preference) {

	/* Startzustand: nur wenn JS aktiv ist (.has-anim) oder im Editor-Preview. */
	.has-anim .anim:not(.anim--visible),
	.anim.anim--preview:not(.anim--visible) {
		opacity: var(--anim-from-opacity);
		transform: var(--anim-from-transform);
		filter: var(--anim-from-filter);
		clip-path: var(--anim-from-clip);
	}

	.has-anim .anim,
	.anim.anim--preview {
		transition-property: opacity, transform, filter, clip-path;
		transition-duration: var(--anim-duration);
		transition-timing-function: var(--anim-easing);
		transition-delay: var(--anim-delay);
		will-change: opacity, transform;
	}

	/* Zielzustand. */
	.anim.anim--visible {
		opacity: 1;
		transform: none;
		filter: none;
		will-change: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Animationstypen
 * ------------------------------------------------------------------------- */

/* Einblenden */
.anim--fade {
	--anim-from-transform: none;
}

/* Reinschweben von unten */
.anim--up {
	--anim-from-transform: translate3d(0, var(--anim-distance), 0);
}

/* Reinschweben von oben */
.anim--down {
	--anim-from-transform: translate3d(0, calc(-1 * var(--anim-distance)), 0);
}

/* Reinschweben von links */
.anim--left {
	--anim-from-transform: translate3d(calc(-1 * var(--anim-distance)), 0, 0);
}

/* Reinschweben von rechts */
.anim--right {
	--anim-from-transform: translate3d(var(--anim-distance), 0, 0);
}

/* Diagonal von unten links / unten rechts */
.anim--up-left {
	--anim-from-transform: translate3d(calc(-1 * var(--anim-distance)), var(--anim-distance), 0);
}

.anim--up-right {
	--anim-from-transform: translate3d(var(--anim-distance), var(--anim-distance), 0);
}

/* Heranzoomen */
.anim--zoom-in {
	--anim-from-transform: scale(0.92);
}

/* Herauszoomen */
.anim--zoom-out {
	--anim-from-transform: scale(1.08);
}

/* Weichzeichnen */
.anim--blur {
	--anim-from-filter: blur(12px);
	--anim-from-transform: scale(1.02);
}

/* Aufklappen (3D-Kippen um die X-Achse) */
.anim--flip {
	--anim-from-transform: perspective(1200px) rotateX(14deg) translate3d(0, calc(var(--anim-distance) / 2), 0);
	transform-origin: center top;
}

/* Leichtes Eindrehen */
.anim--rotate {
	--anim-from-transform: rotate(-5deg) scale(0.96);
}

/*
 * Maske nach oben – gut für Überschriften.
 * Der Zielwert ist absichtlich negativ, damit Unterlängen und Schatten
 * nicht abgeschnitten werden (clip-path: none ist nicht interpolierbar).
 */
.anim--reveal {
	--anim-from-clip: inset(105% 0 0 0);
	--anim-from-transform: translate3d(0, 20px, 0);
	--anim-from-opacity: 1;
}

.anim--reveal.anim--visible {
	clip-path: inset(-10% -10% -10% -10%);
}

/* ---------------------------------------------------------------------------
 * Easing-Varianten
 * ------------------------------------------------------------------------- */

.anim--ease-smooth {
	--anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.anim--ease-soft {
	--anim-easing: cubic-bezier(0.33, 0, 0.2, 1);
}

/* Überschwinger – wirkt nur bei transform-basierten Typen. */
.anim--ease-bounce {
	--anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim--ease-linear {
	--anim-easing: linear;
}