/* Slider - Animations (Applied when slide becomes active) */

/* 1. Fade In */
.slide.active.anim-fade {
    animation: animFadeIn 1.5s ease-in-out forwards;
}

/* 2. Slide Up */
.slide.active.anim-slide-up {
    animation: animSlideUp 1.5s ease-out forwards;
}

/* 3. Slide Down */
.slide.active.anim-slide-down {
    animation: animSlideDown 1.5s ease-out forwards;
}

/* 4. Slide Left */
.slide.active.anim-slide-left {
    animation: animSlideLeft 1.5s ease-out forwards;
}

/* 5. Slide Right */
.slide.active.anim-slide-right {
    animation: animSlideRight 1.5s ease-out forwards;
}

/* 6. Zoom In */
.slide.active.anim-zoom {
    animation: animZoomIn 1.5s ease-out forwards;
}

/* 7. Scale Up */
.slide.active.anim-scale {
    animation: animScaleUp 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 8. Rotate In */
.slide.active.anim-rotate {
    animation: animRotateIn 1.5s ease-out forwards;
}

/* 9. Flip */
.slide.active.anim-flip {
    animation: animFlip 1.5s ease-out forwards;
}

/* 10. Bounce */
.slide.active.anim-bounce {
    animation: animBounce 1.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

/* 11. Blur */
.slide.active.anim-blur {
    animation: animBlur 1.5s ease-out forwards;
}


/* --- Keyframes --- */

@keyframes animFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes animSlideUp {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@keyframes animSlideDown {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

@keyframes animSlideLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

@keyframes animSlideRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

@keyframes animZoomIn {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes animScaleUp {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}

@keyframes animRotateIn {
    0% { transform: rotate(-15deg) scale(1.1); }
    100% { transform: rotate(0) scale(1); }
}

@keyframes animFlip {
    0% { transform: perspective(400px) rotateY(90deg); }
    100% { transform: perspective(400px) rotateY(0deg); }
}

@keyframes animBounce {
    0% { transform: translateY(-100px); }
    40% { transform: translateY(20px); }
    60% { transform: translateY(-10px); }
    80% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

@keyframes animBlur {
    0% { filter: blur(20px); }
    100% { filter: blur(0); }
}