@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}

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

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.animate-zoom-in {
    animation: zoomIn 0.5s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes bounceIn {
    0% { transform: scale(0.1); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

.animate-bounce-in {
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

html {
    scroll-behavior: smooth;
}

#hero {
    background-image: url('../img/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}