/* Cursor Animations */
@keyframes crumbDisappear {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(0, 50px) scale(0.5);
        /* Gravity effect */
    }
}

/* Loader Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Entrance Animations - Mobile First */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Continuous Decoration Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Base Classes for Animation Application */
.animate-hidden {
    opacity: 0;
    will-change: transform, opacity;
}

/* Utility classes to force animation type via JS if needed, 
   though JS logic might add these classes dynamically */
.anim-slide-left {
    animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.anim-slide-right {
    animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.anim-pop {
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-rotate {
    animation: rotateIn 0.8s ease-out forwards;
}

.anim-float-in {
    animation: floatIn 1s ease-out forwards;
}