/*
 * Reveal — sanftes Auftauchen beim Scroll.
 *
 * - data-reveal: Element initial unsichtbar/leicht versetzt, wird
 *   beim Sichtbarwerden eingeblendet.
 * - data-reveal-delay="N": staffelt mehrere Elemente nacheinander
 *   (1=80ms, 2=160ms, 3=240ms, 4=320ms).
 * - .reveal-ready: Klasse, die JS setzt, sobald der Observer aktiv ist.
 *   So bleiben Elemente bei deaktiviertem JS einfach sichtbar.
 * - prefers-reduced-motion: Auf-/Abblenden ohne Bewegung.
 */

[data-reveal] {
    transition: opacity   var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
}

/* Initial-State greift nur, wenn JS den Observer geprägt hat
   (vermeidet "Flash of Hidden Content" bei No-JS-Usern). */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
}

.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Staffelung */
.reveal-ready [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal-ready [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal-ready [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
.reveal-ready [data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }
.reveal-ready [data-reveal][data-reveal-delay="5"] { transition-delay: 0.40s; }
.reveal-ready [data-reveal][data-reveal-delay="6"] { transition-delay: 0.48s; }

/* Reduced Motion: keine Translation, kürzeres Fade */
@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal],
    .reveal-ready [data-reveal][data-reveal-delay] {
        transform: none;
        transition: opacity 200ms linear;
        transition-delay: 0s;
    }
}

/* ------------------------------------------------------------------
 * Section-Hilfsklassen, die die Reveal-Stubs nutzen
 * ------------------------------------------------------------------ */
.section__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-end: var(--sp-3);
}

.section__title {
    margin-block-end: var(--sp-6);
    max-width: var(--container-narrow);
}