/* ============================================================
   Aquanatura Reveal - die EINE Eingangsanimation der Website
   ------------------------------------------------------------
   Elemente blenden beim ersten Sichtbarwerden weich ein (Fade-up).
   Richtung/Distanz/Dauer kommen als CSS-Variablen aus dem Backend
   (Aquanatura -> Animationen, class-aqua-settings.php); die Werte hier
   sind nur Defaults, falls die Inline-Ausgabe fehlt.

   Rein additiv und ausfallsicher: .aqua-fade-pre wird NUR per JS gesetzt.
   Ohne JS, in alten Browsern, im Elementor-Editor und bei
   prefers-reduced-motion bleibt jedes Element ganz normal sichtbar.
   Nur opacity/transform/filter: erzeugt keinerlei Layout-Verschiebung.
   ============================================================ */

/* Verstecken passiert SOFORT (keine Transition auf der pre-Klasse!), sonst
   wuerde das Setzen der Klasse beim Laden ein sichtbares Ausblenden ausloesen.
   Animiert wird ausschliesslich das Einblenden ueber die -in-Klasse. */
/* Bewusst KEIN will-change: das erzeugt fuer jedes noch versteckte Element
   eine eigene Compositor-Ebene. Auf Seiten mit vielen Widgets summiert sich
   das und laesst die Seite ruckeln (aufgefallen am 28.07.2026). Reine
   opacity/transform-Uebergaenge laufen ohnehin auf der GPU. */
.aqua-fade-pre {
    opacity: 0;
    transform: translate3d(var(--aqua-fade-x, 0px), var(--aqua-fade-y, 28px), 0) scale(var(--aqua-fade-scale, 1));
    filter: blur(var(--aqua-fade-blur, 0px));
    transition: none;
}
.aqua-fade-pre.aqua-fade-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    /* Kraeftige eigene Kurve statt der schwachen CSS-Standards: startet schnell
       und laeuft weich aus, dadurch wirkt die Seite wacher (ease-out-Prinzip). */
    transition:
        opacity var(--aqua-fade-dauer, 0.75s) var(--aqua-ease-out, cubic-bezier(.23, 1, .32, 1)),
        transform var(--aqua-fade-dauer, 0.75s) var(--aqua-ease-out, cubic-bezier(.23, 1, .32, 1)),
        filter var(--aqua-fade-dauer, 0.75s) var(--aqua-ease-out, cubic-bezier(.23, 1, .32, 1));
}

/* Der Footer kommt als EIN Stueck herein (Gras + gruene Flaeche + Inhalt),
   nie in Einzelteilen. Etwas ruhiger und ohne Blur, weil die Flaeche gross ist. */
.aqua-fade-pre.aqua-fade--block {
    transform: translate3d(0, 34px, 0);
    filter: none;
}
.aqua-fade-pre.aqua-fade--block.aqua-fade-in {
    transition:
        opacity .85s var(--aqua-ease-out, cubic-bezier(.23, 1, .32, 1)),
        transform .85s var(--aqua-ease-out, cubic-bezier(.23, 1, .32, 1));
}

/* Barrierefreiheit: Nutzer mit reduzierter Bewegung sehen alles sofort.
   Reduzierte Bewegung heisst weniger Bewegung, nicht weniger Inhalt. */
@media (prefers-reduced-motion: reduce) {
    .aqua-fade-pre,
    .aqua-fade-pre.aqua-fade-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}