.active-tab {
    background-color: #24BD27 !important;
    color: white !important;
}

/* ==========================================================================
PREMIUM EXTENDED-DISTANCE DIRECTIONAL SCROLL REVEAL ENGINE
========================================================================== */

/* 1. Global Core Transition settings for all hidden elements */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0 !important;
    will-change: transform, opacity;
    /* Adjusted to 1.1s to account for the longer distance, keeping it smooth */
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Extended Starting States (Increased travel distance from 40px to 90px) */
.reveal-up {
    transform: translateY(90px) !important;
}

.reveal-down {
    transform: translateY(-90px) !important;
}

.reveal-left {
    transform: translateX(-90px) !important;
}

.reveal-right {
    transform: translateX(90px) !important;
}

/* Scale variation remains compact to prevent layout distortion */
.reveal-scale {
    transform: scale(0.88) !important;
}

/* 3. The Active/Visible State (Resets everything perfectly to its layout target) */
.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* 4. Sequential Stagger Delay Utilities */
.delay-100 {
    transition-delay: 100ms !important;
}

.delay-200 {
    transition-delay: 200ms !important;
}

.delay-300 {
    transition-delay: 300ms !important;
}

.delay-400 {
    transition-delay: 400ms !important;
}

.delay-500 {
    transition-delay: 500ms !important;
}