/* ═══════════════════════════════════════════════════════════════
   GLOBAL SCROLL REVEAL ANIMATION
   Shared across About Page + Homepage
   ═══════════════════════════════════════════════════════════════ */

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

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ─── GROUPED STAGGER (Why GR1P cards) ────────────────────────── */
/* Cards use --stagger-index custom property for row-based delay.
   !important overrides inline transitionDelay set by gr1p-about.js */
.why-card.reveal {
    transition-delay: calc(var(--stagger-index, 0) * 80ms) !important;
}

/* ─── SECTION HEADING + BUTTON STAGGER ────────────────────────── */
/* Override JS global stagger for consistent section-level timing */
.featured-heading.reveal,
.explore-wheels.reveal,
.cta-heading.reveal,
.cta-description.reveal,
.cta-button.reveal {
    transition-delay: 0ms !important;
}

/* CTA description and button: sequential after heading */
.cta-description.reveal { transition-delay: 80ms !important; }
.cta-button.reveal      { transition-delay: 160ms !important; }

/* ─── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .why-card.reveal,
    .featured-heading.reveal,
    .explore-wheels.reveal,
    .cta-heading.reveal,
    .cta-description.reveal,
    .cta-button.reveal {
        transition-delay: 0ms !important;
    }
}