/* ===== SLIDE ANIMATIONS ===== */

/* Slide Up */
.slide-up {
    transform: translateY(100px);
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}
@keyframes slideUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide Down */
.slide-down {
    transform: translateY(-100px);
    opacity: 0;
    animation: slideDown 0.8s ease-out forwards;
}
@keyframes slideDown {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide Left */
.slide-left {
    transform: translateX(100px);
    opacity: 0;
    animation: slideLeft 0.8s ease-out forwards;
}
@keyframes slideLeft {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide Right */
.slide-right {
    transform: translateX(-100px);
    opacity: 0;
    animation: slideRight 0.8s ease-out forwards;
}
@keyframes slideRight {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== FADE ANIMATIONS ===== */

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

/* Fade Out */
.fade-out {
    opacity: 1;
    animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Fade In Up */
.fade-in-up {
    transform: translateY(50px);
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade In Down */
.fade-in-down {
    transform: translateY(-50px);
    opacity: 0;
    animation: fadeInDown 1s ease-out forwards;
}
@keyframes fadeInDown {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== SCALE ANIMATIONS ===== */

/* Scale In */
.scale-in {
    transform: scale(0);
    opacity: 0;
    animation: scaleIn 0.6s ease-out forwards;
}
@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Scale Out */
.scale-out {
    transform: scale(1);
    opacity: 1;
    animation: scaleOut 0.6s ease-out forwards;
}
@keyframes scaleOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Scale Up */
.scale-up {
    transform: scale(0.8);
    opacity: 0;
    animation: scaleUp 0.6s ease-out forwards;
}
@keyframes scaleUp {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Scale Down */
.scale-down {
    transform: scale(1.2);
    opacity: 0;
    animation: scaleDown 0.6s ease-out forwards;
}
@keyframes scaleDown {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== ROTATION ANIMATIONS ===== */

/* Rotate In */
.rotate-in {
    transform: rotate(-180deg);
    opacity: 0;
    animation: rotateIn 0.8s ease-out forwards;
}
@keyframes rotateIn {
    0% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

/* Rotate Out */
.rotate-out {
    transform: rotate(0);
    opacity: 1;
    animation: rotateOut 0.8s ease-out forwards;
}
@keyframes rotateOut {
    0% {
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform: rotate(180deg);
        opacity: 0;
    }
}

/* Rotate In Down Left */
.rotate-in-down-left {
    transform: rotate(-90deg);
    transform-origin: left bottom;
    opacity: 0;
    animation: rotateInDownLeft 0.8s ease-out forwards;
}
@keyframes rotateInDownLeft {
    0% {
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

/* ===== FLIP ANIMATIONS ===== */

/* Flip In X */
.flip-in-x {
    transform: rotateX(-90deg);
    opacity: 0;
    animation: flipInX 0.8s ease-out forwards;
}
@keyframes flipInX {
    0% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

/* Flip In Y */
.flip-in-y {
    transform: rotateY(-90deg);
    opacity: 0;
    animation: flipInY 0.8s ease-out forwards;
}
@keyframes flipInY {
    0% {
        transform: rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
        opacity: 1;
    }
}

/* ===== BOUNCE ANIMATIONS ===== */

/* Bounce In */
.bounce-in {
    transform: scale(0.3);
    opacity: 0;
    animation: bounceIn 0.8s ease-out forwards;
}
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bounce In Up */
.bounce-in-up {
    transform: translateY(100px);
    opacity: 0;
    animation: bounceInUp 1s ease-out forwards;
}
@keyframes bounceInUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    60% {
        transform: translateY(-30px);
        opacity: 1;
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== ZOOM ANIMATIONS ===== */

/* Zoom In */
.zoom-in {
    transform: scale(0.5);
    opacity: 0;
    animation: zoomIn 0.6s ease-out forwards;
}
@keyframes zoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom Out */
.zoom-out {
    transform: scale(1);
    opacity: 1;
    animation: zoomOut 0.6s ease-out forwards;
}
@keyframes zoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

/* ===== SPECIAL EFFECTS ===== */

/* Pulse */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake */
.shake {
    animation: shake 0.8s ease-in-out;
}
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

/* Wobble */
.wobble {
    animation: wobble 1s ease-in-out;
}
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25px) rotate(-5deg);
    }
    30% {
        transform: translateX(20px) rotate(3deg);
    }
    45% {
        transform: translateX(-15px) rotate(-3deg);
    }
    60% {
        transform: translateX(10px) rotate(2deg);
    }
    75% {
        transform: translateX(-5px) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Flash */
.flash {
    animation: flash 1s ease-in-out;
}
@keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

/* Swing */
.swing {
    transform-origin: top center;
    animation: swing 1s ease-in-out;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Rubber Band */
.rubber-band {
    animation: rubberBand 1s ease-in-out;
}
@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    60% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== SLIDE DIAGONAL ANIMATIONS ===== */

/* Slide In Down Left */
.slide-in-down-left {
    transform: translate(-100px, -100px);
    opacity: 0;
    animation: slideInDownLeft 0.8s ease-out forwards;
}
@keyframes slideInDownLeft {
    0% {
        transform: translate(-100px, -100px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Slide In Up Right */
.slide-in-up-right {
    transform: translate(100px, 100px);
    opacity: 0;
    animation: slideInUpRight 0.8s ease-out forwards;
}
@keyframes slideInUpRight {
    0% {
        transform: translate(100px, 100px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* ===== ROLL ANIMATIONS ===== */

/* Roll In */
.roll-in {
    transform: translateX(-100%) rotate(-120deg);
    opacity: 0;
    animation: rollIn 1s ease-out forwards;
}
@keyframes rollIn {
    0% {
        transform: translateX(-100%) rotate(-120deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

/* Roll Out */
.roll-out {
    transform: translateX(0) rotate(0);
    opacity: 1;
    animation: rollOut 1s ease-out forwards;
}
@keyframes rollOut {
    0% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) rotate(120deg);
        opacity: 0;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Animation delays */
.delay-1 {
    animation-delay: 0.1s;
}
.delay-2 {
    animation-delay: 0.2s;
}
.delay-3 {
    animation-delay: 0.3s;
}
.delay-4 {
    animation-delay: 0.4s;
}
.delay-5 {
    animation-delay: 0.5s;
}

/* Animation durations */
.duration-fast {
    animation-duration: 0.3s;
}
.duration-normal {
    animation-duration: 0.6s;
}
.duration-slow {
    animation-duration: 1s;
}
.duration-slower {
    animation-duration: 2s;
}

/* Animation timing functions */
.ease-linear {
    animation-timing-function: linear;
}
.ease-in {
    animation-timing-function: ease-in;
}
.ease-out {
    animation-timing-function: ease-out;
}
.ease-in-out {
    animation-timing-function: ease-in-out;
}
.ease-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Infinite animations */
.infinite {
    animation-iteration-count: infinite;
}

/* Paused animation */
.paused {
    animation-play-state: paused;
}

/* Reverse animation */
.reverse {
    animation-direction: reverse;
}