/* Accessibility Enhancement */
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .slide-in-top,
    .slide-in-bottom,
    .scale-in,
    .whirlpool-in-icon,
    .slide-in-left,
    .slide-in-right,
    .fade-in-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Keyframe Definitions */
@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 slideInTop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

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

@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

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

@keyframes whirlpoolIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-360deg);
    }

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


/* Animation Classes */
/* Utility classes for triggering animations when elements enter the viewport */

.slide-in-top {
    animation: slideInTop 0.5s ease-in-out forwards 0.1s;
}

.slide-in-bottom {
    animation: slideInBottom 0.5s ease-in-out forwards 0.1s;
}

.scale-in {
    animation: scaleIn 0.5s ease-in-out forwards 0.1s;
}

.whirlpool-in-icon {
    animation: whirlpoolIn 0.3s ease-in-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-in-out forwards 0.1s;
}

.slide-in-right {
    animation: slideInRight 0.5s ease-in-out forwards 0.1s;
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-in-out forwards 0.1s;
}