/* Animations CSS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-20px) translateX(-50%);
    }
    60% {
        transform: translateY(-10px) translateX(-50%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Scroll Animation Classes */
[data-animation] {
    opacity: 0;
}

[data-animation].animate {
    opacity: 1;
}

[data-animation="fade-up"].animate {
    animation: fadeUp 0.8s ease forwards;
}

[data-animation="fade-down"].animate {
    animation: fadeDown 0.8s ease forwards;
}

[data-animation="fade-left"].animate {
    animation: fadeLeft 0.8s ease forwards;
}

[data-animation="fade-right"].animate {
    animation: fadeRight 0.8s ease forwards;
}

[data-animation="zoom-in"].animate {
    animation: zoomIn 0.8s ease forwards;
}

/* Animation Delays */
[data-delay="0.1"] {
    animation-delay: 0.1s;
}

[data-delay="0.2"] {
    animation-delay: 0.2s;
}

[data-delay="0.3"] {
    animation-delay: 0.3s;
}

[data-delay="0.4"] {
    animation-delay: 0.4s;
}

[data-delay="0.5"] {
    animation-delay: 0.5s;
}