/* ═══════════════════════════════════════════════════════
   reveal.css — единая система scroll-анимации
   Используется на всех страницах через extend_head.html.

   КАК ИСПОЛЬЗОВАТЬ:
     Секция/блок:  class="reveal"
     Каскадные дети: data-stagger (delay рассчитывается JS)

   НЕ ТРОГАТЬ:
     nth-child delays для конкретных компонентов — они в club.css
     image-reveal, glow-accent — специфика клуба, в club.css
   ═══════════════════════════════════════════════════════ */


/* ─── Базовое состояние (скрытое) ────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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


/* ─── Stagger-дети ───────────────────────────────────── */
/* JS устанавливает transitionDelay через style="" перед добавлением .visible */

[data-stagger] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger].visible {
    opacity: 1;
    transform: translateY(0);
}


/* ─── Prefers-reduced-motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    [data-stagger] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}