/**
 * MODE SWITCHER STYLES
 * Стили для кнопки переключения режимов и overlay анимации
 */

/* ============================================================================= */
/* MODE SWITCH BUTTON */
/* ============================================================================= */

.mode-switch-btn {
    position: relative;
    z-index: 1000;

    width: 342px;
    height: auto;
    flex-shrink: 0;

    background: none;
    border: none;
    padding: 0;
    margin-bottom: 8px;
    margin-right: 5px;

    cursor: pointer;
    opacity: 0;
    transition: opacity 0.8s ease;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: transparent;

    -webkit-user-drag: none;
}

.mode-switch-btn.is-visible {
    opacity: 1;
}

.mode-switch-btn.is-visible:hover {
    opacity: 0.8;
}

.mode-switch-btn.is-visible:active {
    opacity: 0.6;
}

/* Hide button until page assets are loaded */
body:not(.page-ready) .mode-switch-btn {
    visibility: hidden;
}


/* ============================================================================= */
/* ANIMATION OVERLAY */
/* ============================================================================= */

.animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    
    background-color: #0D0E12;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    pointer-events: none;
}

.animation-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.animation-frame {
    width: 100%;
    max-width: var(--player-max-width);
    aspect-ratio: var(--player-aspect-ratio);
    height: auto;
    object-fit: contain;
}

/* ============================================================================= */
/* LOADING STATE */
/* ============================================================================= */

.mode-switch-btn.loading {
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================================= */
/* FADE ANIMATIONS */
/* ============================================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ============================================================================= */
/* ACCESSIBILITY */
/* ============================================================================= */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mode-switch-btn,
    .animation-overlay,
    .animation-frame {
        transition: none;
    }
}