/* =============================================================
   Scroll-Reveal – site-weite Einblend-Animation für Sections
   Wird automatisch auf section.containermitrand und
   section.conatinerrandabfallend angewendet (keine Markup-
   Änderung an den Modulen nötig). Für einzelne Elemente
   zusätzlich per class="reveal" (bzw. reveal-left/-right/-scale)
   opt-in nutzbar, z.B. auf einem feld-Div in special*.css.

   Ablauf: Grundzustand hier per CSS (opacity:0 + Versatz).
   animation.js hängt beim Scrollen die Klasse .is-visible an,
   sobald das Element in den Viewport kommt -> Transition greift.
   Ohne JS (z.B. deaktiviert) sorgt .no-js weiter unten dafür,
   dass alles trotzdem sichtbar bleibt.
   ============================================================= */

article section.containermitrand,
article section.conatinerrandabfallend,
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-scale {
    transform: scale(0.94);
}

article section.containermitrand.is-visible,
article section.conatinerrandabfallend.is-visible,
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger für Kind-Elemente innerhalb einer Section, z.B. die
   feld-Divs eines Containers: einfach class="reveal-child" auf
   die Felder setzen, die Reihenfolge im DOM bestimmt die Verzögerung. */
.reveal-child {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.is-visible .reveal-child {
    opacity: 1;
    transform: none;
}

.is-visible .reveal-child:nth-child(1) { --reveal-delay: 0.05s; }
.is-visible .reveal-child:nth-child(2) { --reveal-delay: 0.15s; }
.is-visible .reveal-child:nth-child(3) { --reveal-delay: 0.25s; }
.is-visible .reveal-child:nth-child(4) { --reveal-delay: 0.35s; }
.is-visible .reveal-child:nth-child(5) { --reveal-delay: 0.45s; }
.is-visible .reveal-child:nth-child(6) { --reveal-delay: 0.55s; }
.is-visible .reveal-child:nth-child(7) { --reveal-delay: 0.65s; }

/* Fallback: JS deaktiviert/blockiert oder Script noch nicht
   geladen -> nichts soll dauerhaft unsichtbar bleiben. */
.no-js section.containermitrand,
.no-js section.conatinerrandabfallend,
.no-js .reveal,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale,
.no-js .reveal-child {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    article section.containermitrand,
    article section.conatinerrandabfallend,
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-child {
        opacity: 1;
        transform: none;
        transition: none;
    }
}