/* --------- Animations ---------- */

.fade-in-right {
    opacity: 0;
    transform: translateX(70px);
    animation: fadeInRight 2s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-down.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-scale.active {
    opacity: 1;
    transform: scale(1);
}

.zoom-in {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.6s ease;
  }
  
.zoom-in.active {
    transform: scale(1);
    opacity: 1;
}