/* Loading screen styles */
#loading-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(17, 17, 17, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 40%;
    height: auto;
    animation: spin-zoom 2.2s cubic-bezier(.68,-0.55,.27,1.55) infinite;
    will-change: transform;

}

.loader-text {
    margin-right: 2%;
    width: 320px;
    max-width: 80vw;
    height: auto;
    opacity: 0.92;
    filter: drop-shadow(0 2px 12px #0008);
    animation: text-fade 2s infinite alternate;

}

@keyframes spin-zoom {
    0% {
        transform: scale(1) rotate(0deg);
    }
    20% {
        transform: scale(1.15) rotate(90deg);
    }
    50% {
        transform: scale(0.80) rotate(180deg);
    }
    70% {
        transform: scale(1.25) rotate(270deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

@keyframes text-fade {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

.loading-fadeout {
    animation: loading-fadeout 0.5s ease forwards;
}

@keyframes loading-fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}