.loader-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 10000;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

.loader-eye-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.loader-eye {
    width: 100%;
    height: 100%;
    background: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
    animation: eye-blink 4s infinite;
}

.loader-pupil {
    width: 35%;
    height: 35%;
    background: var(--bg-primary);
    border-radius: 50%;
    
    transition: transform 0.1s ease-out;
}

.loader-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    animation: text-pulse 2s infinite ease-in-out;
}

.loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes eye-look {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-15%, 0);
    }

    75% {
        transform: translate(15%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes eye-blink {

    0%,
    96%,
    100% {
        transform: scaleY(1);
    }

    98% {
        transform: scaleY(0.1);
    }
}

@keyframes text-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}