/* Keyframes */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Animation classes */
.animate-left {
    opacity: 0;
    animation: fadeLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-right {
    opacity: 0;
    animation: fadeRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-up {
    opacity: 0;
    animation: fadeUp 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
}

.deco-left {
    opacity: 0;
    animation: fadeLeft 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
    width: auto;
}

.deco-right {
    opacity: 0;
    animation: fadeRight 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
    width: auto;
}

/* Scroll animation classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-left-section {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-left-section.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-right-section {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-right-section.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

.scale-in-slow {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.scale-in-slow.is-visible {
    opacity: 1;
    transform: scale(1);
}