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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

.btn-loader {
    height: 24px;
    width: auto;
    object-fit: contain;
}

@keyframes skeletonLoading {
    0% {
        background-color: rgba(255, 255, 255, 0.05);
    }

    50% {
        background-color: rgba(255, 255, 255, 0.1);
    }

    100% {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

.skeleton {
    animation: skeletonLoading 1.5s infinite ease-in-out;
    border-radius: 4px;
}

.skeleton-text {
    color: transparent !important;
    background-color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    user-select: none;
}

.section-transition {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.view-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    display: none !important;
}