/****************************
*   Section-Erscheinung
*
*   Seite: beim Laden    Sections, die beim Aufruf sichtbar sind   (Theme-Option)
*   Effekte im Modul     Standard in den Theme-Optionen, pro Modul im Wrapper:
*     beim Scrollen      Sections, die spaeter hereinkommen
*     Elemente           Elemente, Bilder, Unschaerfe - kombinierbar
*
*   js/appearance.js setzt an jeder Section:
*     data-appear-effect   welcher Section-Effekt gilt (bereits aufgeloest:
*                          Laden/Scrollen, Einstellung des Moduls, Regel "bei
*                          Elemente-Effekten nur einblenden")
*     data-appear-elements die Effekte im Modul (von get_section_attribute())
*     .mM_in_view          sobald die Section sichtbar ist
*
*   Hier steht nur der VERSTECKTE Zustand. Faellt er weg, laeuft die Transition
*   zu den normalen Werten des Moduls - dadurch ueberschreibt nichts dauerhaft
*   opacity, filter oder Transforms eines Moduls.
*
*   translate/scale statt transform: die Einzel-Properties verrechnen sich mit
*   bestehenden transform-Werten, statt sie zu ersetzen.
*
*   Versteckt wird nur, wenn
*     - html.mM_appear_js gesetzt ist (das Script laeuft, sonst bleibt alles sichtbar)
*     - keine reduzierte Bewegung eingestellt ist
*
*   Transitions gelten erst ab html.mM_appear_ready. Sonst wuerde eine schon
*   gezeichnete Section beim Setzen der Effekte sichtbar -> versteckt animieren
*   und danach wieder einblenden (Flackern, v. a. beim Hero mit Laden-Effekt).
****************************/

:root {
	--mM_scroll_duration: 700ms;
	--mM_scroll_easing: cubic-bezier(.2, .7, .2, 1);
	--mM_scroll_distance: 48px;
	--mM_scroll_distance_x: 64px;
	--mM_scroll_scale_in: .96;
	--mM_scroll_scale_out: 1.05;
	/* easeOutBack: schwingt am Ende leicht ueber das Ziel hinaus */
	--mM_spring_easing: cubic-bezier(.34, 1.56, .64, 1);
	--mM_spring_duration: 900ms;

	--mM_stagger_step: 90ms;
	--mM_item_blur: 10px;
	--mM_color_duration: 1400ms;
}

@media (max-width: 767px) {
	:root {
		--mM_scroll_distance: 32px;
		--mM_scroll_distance_x: 32px;
	}
}

/*
 * Unschaerfe und Schwarzweiss nutzen beide "filter". Eine zweite filter-Regel
 * wuerde die erste ersetzen - deshalb traegt jeder Effekt seinen Teil als
 * Variable bei, und eine einzige Regel setzt beide zusammen.
 * inherits: false ist wichtig: sonst erbt ein Bild in einer unscharfen Kachel
 * die Unschaerfe und wird doppelt weichgezeichnet.
 */
@property --mM_fx_blur {
	syntax: '*';
	inherits: false;
}

@property --mM_fx_gray {
	syntax: '*';
	inherits: false;
}

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

	/* ═══ Seite: beim Laden / beim Scrollen ═══════════════════════════ */

	/* Transition nur auf die Properties, die die Effekte nutzen - sonst wuerde
	   jede spaetere Aenderung an der Section (Hintergrund, Groesse) mitanimiert. */
	.mM_appear_js.mM_appear_ready [data-appear-effect]:not([data-appear-effect="keine"]) {
		transition-property: opacity, translate, scale;
		transition-duration: var(--mM_scroll_duration);
		transition-timing-function: var(--mM_scroll_easing);
	}

	.mM_appear_js.mM_appear_ready [data-appear-effect="federnd"] {
		transition-duration: var(--mM_spring_duration);
		transition-timing-function: var(--mM_spring_easing);
	}

	.mM_appear_js [data-appear-effect="einblenden"]:not(.mM_in_view) {
		opacity: 0;
	}

	.mM_appear_js [data-appear-effect="von_unten"]:not(.mM_in_view),
	.mM_appear_js [data-appear-effect="federnd"]:not(.mM_in_view) {
		opacity: 0;
		translate: 0 var(--mM_scroll_distance);
	}

	.mM_appear_js [data-appear-effect="seitlich"][data-appearance-dir="links"]:not(.mM_in_view) {
		opacity: 0;
		translate: calc(var(--mM_scroll_distance_x) * -1) 0;
	}

	.mM_appear_js [data-appear-effect="seitlich"][data-appearance-dir="rechts"]:not(.mM_in_view) {
		opacity: 0;
		translate: var(--mM_scroll_distance_x) 0;
	}

	.mM_appear_js [data-appear-effect="zoom_in"]:not(.mM_in_view) {
		opacity: 0;
		scale: var(--mM_scroll_scale_in);
	}

	.mM_appear_js [data-appear-effect="zoom_out"]:not(.mM_in_view) {
		opacity: 0;
		scale: var(--mM_scroll_scale_out);
	}

	/* Seitlich und Zoom-out ragen waehrend der Animation ueber den Rand und
	   wuerden einen horizontalen Scrollbalken erzeugen. clip statt hidden: macht
	   main nicht zum Scroll-Container, position:sticky darin funktioniert weiter. */
	.mM_appear_js main:has([data-appear-effect="seitlich"], [data-appear-effect="zoom_out"]) {
		overflow-x: clip;
	}

	/* ═══ Effekte im Modul ════════════════════════════════════════════ */

	.mM_appear_js.mM_appear_ready [data-appear-elements] .mM_stagger_item {
		transition-property: opacity, translate, filter;
		transition-duration: var(--mM_scroll_duration);
		transition-timing-function: var(--mM_scroll_easing);
	}

	/* Elemente von unten, nacheinander */
	.mM_appear_js [data-appear-elements~="gestaffelt"]:not(.mM_in_view) .mM_stagger_item {
		opacity: 0;
		translate: 0 calc(var(--mM_scroll_distance) / 2);
	}

	.mM_appear_js [data-appear-elements~="gestaffelt"].mM_in_view .mM_stagger_item {
		transition-delay: calc(var(--mM_stagger_i, 0) * var(--mM_stagger_step));
	}

	/* Unschaerfe -> scharf (auf die Bestandteile) */
	.mM_appear_js [data-appear-elements~="unschaerfe"] .mM_stagger_item {
		--mM_fx_blur: blur(var(--mM_item_blur));
	}

	.mM_appear_js [data-appear-elements~="unschaerfe"]:not(.mM_in_view) .mM_stagger_item {
		opacity: 0;
	}

	/* Bilder von Schwarzweiss zu Farbe - langsamer und mit kurzer Verzoegerung,
	   sonst nimmt man den Uebergang neben dem Einblenden kaum wahr. */
	.mM_appear_js [data-appear-elements~="farbe"] :is(img, video) {
		--mM_fx_gray: grayscale(1);
	}

	.mM_appear_js.mM_appear_ready [data-appear-elements~="farbe"] :is(img, video) {
		transition: filter var(--mM_color_duration) ease .2s;
	}

	/* Die eine filter-Regel fuer Unschaerfe und Schwarzweiss zusammen. Ist keine
	   der beiden Variablen gesetzt, ist der Wert ungueltig und filter bleibt none. */
	.mM_appear_js [data-appear-elements]:not(.mM_in_view) :is(.mM_stagger_item, img, video) {
		filter: var(--mM_fx_blur, ) var(--mM_fx_gray, );
	}
}