/* ============================================================================ DELTACON — Appear-Animationen ---------------------------------------------------------------------------- Elemente blenden beim Eintreten in den Viewport einmalig ein. Aufbau in drei Teilen: 1. Startzustand, ausschliesslich unter .dc-js. Diese Klasse setzt ein Inline-Skript im . Ohne JavaScript greift sie nie, dann ist die Seite sofort vollstaendig sichtbar. Kein Blankoschirm. 2. Endzustand ueber .is-in, gesetzt vom IntersectionObserver. 3. Abschaltungen: reduzierte Bewegung, Druck, Blockeditor. Es werden ausschliesslich opacity und transform animiert. Beide laufen auf dem Compositor, erzeugen kein Layout und damit keinen Layout-Shift (CLS). ========================================================================== */ :root { --dc-appear-distance: 14px; /* Wegstrecke nach oben */ --dc-appear-duration: 700ms; --dc-appear-ease: cubic-bezier(.16, 1, .3, 1); /* frueh schnell, weich aus */ --dc-appear-stagger: 70ms; /* Versatz zwischen Geschwistern */ } /* -------------------------------------------------------- 1. Startzustand -- */ .dc-js .dc-appear { opacity: 0; transform: translate3d(0, var(--dc-appear-distance), 0); } /* Elemente, die erst nach dem Elternteil kommen sollen. Die Verzoegerung haengt an einer Variablen, damit ein Pattern sie pro Element setzen kann: style="--dc-i:3". */ .dc-js .dc-appear { transition: opacity var(--dc-appear-duration) var(--dc-appear-ease) var(--dc-appear-delay, 0ms), transform var(--dc-appear-duration) var(--dc-appear-ease) var(--dc-appear-delay, 0ms); } /* ---------------------------------------------------------- 2. Endzustand -- */ .dc-js .dc-appear.is-in { opacity: 1; transform: none; } /* Nach dem Durchlauf faellt die Transition weg. Sonst wuerde ein spaeteres Umschalten (z.B. Stepper im gleichen Container) nachtraeglich mitanimieren. */ .dc-js .dc-appear.is-done { transition: none; } /* ------------------------------------------------- Staffelung im Container -- Der Observer vergibt --dc-i an die direkten Kinder eines .dc-appear-group. Der Deckel bei 8 verhindert, dass eine lange Liste unten sekundenlang auf ihren Einsatz wartet. */ .dc-js .dc-appear-group > .dc-appear { --dc-appear-delay: calc(min(var(--dc-i, 0), 8) * var(--dc-appear-stagger)); } /* --------------------------------------------------------- Sonderfaelle ---- */ /* Ueber dem Falz: sofort sichtbar. Bewegung dort verzoegert nur den gefuehlten Seitenaufbau und faellt in die LCP-Messung. */ .dc-js .dc-appear-off, .dc-js .dc-appear-off .dc-appear { opacity: 1 !important; transform: none !important; transition: none !important; } /* Etwas ruhiger fuer grosse Flaechen wie Bildbaender: kuerzere Strecke bei gleicher Dauer, dadurch wirkt die Bewegung dort weicher. */ .dc-js .dc-appear.is-calm { --dc-appear-distance: 8px; } /* ------------------------------------------------------ 3. Abschaltungen ---- */ /* Barrierefreiheit. Wer reduzierte Bewegung eingestellt hat, bekommt alles ohne Weg und ohne Zeit. Pflicht, nicht Kuer. */ @media (prefers-reduced-motion: reduce) { .dc-js .dc-appear, .dc-js .dc-appear.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } } @media print { .dc-js .dc-appear { opacity: 1 !important; transform: none !important; } }