/* GSAP-level CSS Animations */

/* EDIT ANIMATION SPEED HERE */
:root {
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Keyframes for Blur Up Effect ("Bot to Top") */
@keyframes blurUp {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(80px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Base class - hidden initially */
.gsap-blur-up {
    opacity: 0;
    will-change: opacity, filter, transform;
}

/* Trigger class - runs animation */
/* Trigger class - runs animation */
.gsap-blur-up.is-visible {
    /* EDIT: Change 1.1s to make animation faster or slower */
    animation: blurUp 1.1s var(--ease-out-quart) forwards;
}

/* Interactive Hover Effects */
/* These transitions will now work independently of the entry animation once it completes */
.work-card,
.project-card,
.review-card {
    transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
}

.work-card:hover,
.project-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.dark .work-card:hover,
.dark .project-card:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.review-card:hover {
    transform: translateY(-5px);
}