/* ============================================================
   VPNET Animations
   ============================================================ */

.fade-in-top {
    animation: fade-in-top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-12px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-left {
    animation: fade-in-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-16px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in-bottom {
    animation: fade-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(12px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}