/* 
    ======================================
    ENTERPRISE MICRO-INTERACTIONS & ANIMATIONS
    ======================================
*/

/* 1. Ripple Animation for Buttons */
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 2. Scroll Reveal Transitions (Subtle & Fluid) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.0, 0, 0.2, 1), transform 0.6s cubic-bezier(0.0, 0, 0.2, 1);
    will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* 3. Smooth Skeleton pulse base (for images loading, etc) */
@keyframes skeleton-loading {
    0% { background-color: hsl(200, 20%, 95%); }
    100% { background-color: hsl(200, 20%, 98%); }
}
.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
}

/* 4. Page Header Transition */
.page-header-fade {
    animation: fade-in-down 0.8s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

@keyframes fade-in-down {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}