/* ========================================================= Champagne Child – Animationen & Übergänge Dezente Scroll-Reveals + Seiten-Fade. Vanilla CSS, kein Framework. Aktiv nur, wenn gesetzt ist (JS vorhanden), damit ohne JS niemals Inhalt verborgen bleibt (progressive enhancement). WICHTIG – Spezifität: Die Einblend-Regeln (.is-visible) müssen die Ausblend-Regeln übertreffen. Da die Ausblend-Selektoren :not()-Ketten nutzen, spiegeln die Einblend- Regeln dieselbe Kette + .is-visible (jeweils eine Stufe höher). ========================================================= */ /* ---------- AUSBLENDEN (Startzustand) ---------- */ /* (A) Top-Level-Sektionen, die KEINE Wrapper-Gruppe sind. Ausgenommen: Hero (:first-child), Galerie, Gruppen, .no-reveal. */ .has-anim .wp-block-post-content > *:not(:first-child):not(.wp-block-group):not(.wp-block-gallery):not(.no-reveal), /* (B) Die einzelnen Blöcke INNERHALB einer Top-Level-Gruppe (die Gruppe selbst bleibt sichtbar -> Kinder staffeln nacheinander). Ausgenommen: Galerie, Spacer, .no-reveal. */ .has-anim .wp-block-post-content > .wp-block-group > *:not(.wp-block-gallery):not(.wp-block-spacer):not(.no-reveal), /* (C) Manuelles Opt-in an beliebigen Blöcken. */ .has-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* ---------- EINBLENDEN (sichtbar) ---------- */ /* Spiegeln A/B/C + .is-visible, damit sie die Ausblend-Spezifität überbieten. */ .has-anim .wp-block-post-content > *:not(:first-child):not(.wp-block-group):not(.wp-block-gallery):not(.no-reveal).is-visible, .has-anim .wp-block-post-content > .wp-block-group > *:not(.wp-block-gallery):not(.wp-block-spacer):not(.no-reveal).is-visible, .has-anim .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* ---------- Galerie: Bilder gestaffelt einblenden ---------- Der Galerie-Container wird nicht versteckt; erst wenn er in den Viewport kommt (.is-visible), kaskadieren die einzelnen Bilder. */ .has-anim .wp-block-gallery > .wp-block-image { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; will-change: opacity, transform; } .has-anim .wp-block-gallery.is-visible > .wp-block-image { opacity: 1; transform: none; will-change: auto; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(1) { transition-delay: 0.00s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(2) { transition-delay: 0.08s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(3) { transition-delay: 0.16s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(4) { transition-delay: 0.24s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(5) { transition-delay: 0.32s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(6) { transition-delay: 0.40s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(7) { transition-delay: 0.48s; } .has-anim .wp-block-gallery.is-visible > .wp-block-image:nth-child(8) { transition-delay: 0.56s; } /* ---------- Seiten-Fade beim Laden ---------- Nur der Inhaltsbereich (main), nicht Header/Footer -> Navigation bleibt ruhig. Läuft genau einmal, kein Layout-Shift. */ .has-anim main { animation: champ-page-fade 0.35s ease both; } @keyframes champ-page-fade { from { opacity: 0; } to { opacity: 1; } } /* ---------- Barrierefreiheit: reduzierte Bewegung ---------- Deaktiviert sämtliche Bewegung (auch bestehende Hover-Transitions und Smooth-Scroll). Endzustände bleiben sichtbar, keine Verzögerung. */ @media (prefers-reduced-motion: reduce) { .has-anim .wp-block-post-content > *, .has-anim .wp-block-post-content > .wp-block-group > *, .has-anim .reveal, .has-anim .wp-block-gallery > .wp-block-image { opacity: 1 !important; transform: none !important; transition: none !important; } .has-anim main { animation: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }