/* ==========================================================================
   Scroll Reveal — Globale Animations-Klasse
   Edler, sanfter Fade-Up für ruhiges Leseerlebnis.
   ========================================================================== */

/* Easing-Kurve: sanftes Auslaufen (Apple-Style) */
:root {
    --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --reveal-duration: 900ms;
}

/* Initial: unsichtbar, leicht nach unten versetzt */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--reveal-duration) var(--reveal-ease),
                transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variante: nur Fade ohne Versatz — für Bilder, Hero */
.reveal--fade {
    transform: none;
}
.reveal--fade.is-visible {
    transform: none;
}

/* Variante: zarter Scale — für Hero-Quotes, hervorgehobene Boxen */
.reveal--scale {
    transform: translateY(16px) scale(0.985);
}
.reveal--scale.is-visible {
    transform: translateY(0) scale(1);
}

/* Stagger für Kinder-Elemente: nutze .reveal-stagger auf Container,
   Kinder bekommen automatisch zeitversetzten Einstieg.
   Voraussetzung: Container hat .reveal, Kinder haben .reveal */
.reveal-stagger > .reveal:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2)  { transition-delay: 90ms; }
.reveal-stagger > .reveal:nth-child(3)  { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(4)  { transition-delay: 270ms; }
.reveal-stagger > .reveal:nth-child(5)  { transition-delay: 360ms; }
.reveal-stagger > .reveal:nth-child(6)  { transition-delay: 450ms; }
.reveal-stagger > .reveal:nth-child(7)  { transition-delay: 540ms; }
.reveal-stagger > .reveal:nth-child(8)  { transition-delay: 630ms; }

/* Sobald sichtbar, will-change zurücknehmen (GPU freigeben) */
.reveal.is-visible {
    will-change: auto;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--fade,
    .reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}