/* --- LUXURY ANIMATION SETTINGS --- */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* Apple/Luxury Easing */
}

/* 1. Base Class (HIDDEN STATE) */
.reveal-item {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    
    /* INSTANT RESET: When class is removed, hide immediately */
    /* This ensures no "scroll up" animation is seen */
    transition: opacity 0s, transform 0s; 
}

/* 2. The Active State (VISIBLE STATE) */
.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
    
    /* SLOW REVEAL: Only plays when class is added (Scroll Down) */
    transition: 
        opacity 1.2s ease, 
        transform 1.2s var(--ease-out-expo);
}

/* 3. Image Zoom Effect */
.reveal-img {
    opacity: 0;
    transform: scale(0.95);
    will-change: opacity, transform;
    transition: opacity 0s, transform 0s; /* Instant Reset */
}

.reveal-img.active {
    opacity: 1;
    transform: scale(1);
    transition: 
        opacity 1.5s ease, 
        transform 1.5s var(--ease-out-expo);
}

/* 4. Stagger Delays */
.reveal-item.active.delay-100, .reveal-img.active.delay-100 { transition-delay: 0.1s; }
.reveal-item.active.delay-200, .reveal-img.active.delay-200 { transition-delay: 0.2s; }
.reveal-item.active.delay-300, .reveal-img.active.delay-300 { transition-delay: 0.3s; }
.reveal-item.active.delay-400, .reveal-img.active.delay-400 { transition-delay: 0.4s; }
.reveal-item.active.delay-500, .reveal-img.active.delay-500 { transition-delay: 0.5s; }