/* Custom Advanced Video Player UI Styles */
.custom-video-controls { 
    opacity: 0; 
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.custom-video-container.interacting .custom-video-controls { 
    opacity: 1; 
}

.custom-video-container:not(.interacting) { 
    cursor: none; 
}

/* Custom Range Slider */
input[type=range].custom-range { 
    -webkit-appearance: none; 
    background: transparent; 
}

input[type=range].custom-range::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 4px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 2px; 
}

input[type=range].custom-range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    height: 12px; 
    width: 12px; 
    border-radius: 50%; 
    background: #ef4444; 
    margin-top: -4px; 
    cursor: pointer; 
    transition: transform 0.15s ease; 
}

input[type=range].custom-range::-webkit-slider-thumb:hover { 
    transform: scale(1.35); 
    background: #f87171;
}

/* Keyboard OSD HUD Overlay Animation */
.custom-video-container #vid-osd {
    transition: opacity 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Settings Tray Animation Helper */
.translate-x-full {
    transform: translateX(100%);
}

/* Live Badge pulse effect */
@keyframes live-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.6; }
}

.animate-pulse-live {
    animation: live-pulse 1.5s infinite ease-in-out;
}

/* Theater Mode Overrides */
body.theater-mode aside {
    display: none !important;
}

body.theater-mode main {
    grid-template-columns: 1fr !important;
}

body.theater-mode main > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
}

body.theater-mode #player-container {
    aspect-ratio: 21/9 !important; /* Cinematic viewing ratio */
    max-height: 75vh !important;
}

/* Fullscreen OSD override */
:fullscreen .custom-video-container {
    border-radius: 0 !important;
}
:-webkit-full-screen .custom-video-container {
    border-radius: 0 !important;
}