/* Base Animation Classes */
[class*="animate-"][class$="-ready"] {
    opacity: 0;
  }

/* Easing Variables */
:root {
    --ease-smooth: cubic-bezier(0.42, 0, 0.58, 1);
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Slide from Left Animation */
.animate-slide-left {
    animation: slideFromLeft 1.2s var(--ease-smooth) forwards;
}
@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide from Right Animation */
.animate-slide-right {
    animation: slideFromRight 1.2s var(--ease-smooth) forwards;
}
@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Animation */
.animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Zoom In Animation */
.animate-zoom-in {
    animation: zoomIn 1.5s var(--ease-smooth) forwards;
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Up Animation */
.animate-slide-up {
    animation: slideUp 1.2s var(--ease-smooth) forwards;
}
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bounce Animation (Refined to less cartoony) */
.animate-bounce {
    animation: bounce 1.2s var(--ease-bounce) forwards;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Slide Down Animation */
.animate-slide-down {
    animation: slideDown 1.2s var(--ease-smooth) forwards;
}
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Up Animation */
.animate-fade-up {
    animation: fadeUp 1.5s ease-out forwards;
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Flip Animation */
.animate-flip {
    animation: flip 1.5s var(--ease-smooth) forwards;
    backface-visibility: visible;
}
@keyframes flip {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateY(120deg);
    }
    100% {
        opacity: 1;
        transform: perspective(600px) rotateY(0deg);
    }
}

/* Pulse Animation */
.animate-pulse {
    animation: pulse 2s ease-in-out forwards;
}
@keyframes pulse {
    0% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* Fade In Blur Animation */
.animate-fade-blur {
    animation: fadeBlur 1.5s ease-out forwards;
}
@keyframes fadeBlur {
    0% { opacity: 0; filter: blur(15px); }
    100% { opacity: 1; filter: blur(0); }
}

/* Rotate Animation */
.animate-rotate {
    animation: rotate 1.5s var(--ease-smooth) forwards;
}
@keyframes rotate {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Scale Animation */
.animate-scale {
    animation: scale 1.5s var(--ease-smooth) forwards;
}
@keyframes scale {
    0% { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* Slide In Diagonal */
.animate-slide-diagonal {
    animation: slideDiagonal 1.5s var(--ease-smooth) forwards;
}
@keyframes slideDiagonal {
    0% {
        opacity: 0;
        transform: translate(-50px, 50px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* Reveal Animation */
.animate-reveal {
    position: relative;
    overflow: hidden;
    animation: reveal 1.5s var(--ease-smooth) forwards;
}
@keyframes reveal {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* Float Animation (Slowed down for elegance) */
.animate-float {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Staggered Animation Helpers */
.animate-delay-100 { animation-delay: 0.2s; }
.animate-delay-200 { animation-delay: 0.4s; }
.animate-delay-300 { animation-delay: 0.6s; }
.animate-delay-400 { animation-delay: 0.8s; }
.animate-delay-500 { animation-delay: 1s; }

/* Animation Duration Helpers */
.animate-duration-fast { animation-duration: 0.8s; }
.animate-duration-slow { animation-duration: 2s; }