/* Base Resets and Utilities */
:root {
    --glass-bg: rgba(20, 20, 25, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body {
    background-color: #0a0a0c;
    /* Evitamos parpadeos mientras carga Lenis */
    overscroll-behavior: none;
}

html {
    overflow-x: hidden; /* Evita scroll horizontal en móvil */
}

/* Glassmorphism Utility */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Texto con gradiente: corrección para Safari/iOS.
   Sin -webkit-text-fill-color el texto degradado se pinta de color sólido
   (negro/azul) en iOS: era el cambio de color que se veía en móviles. */
.text-transparent {
    -webkit-text-fill-color: transparent;
}

/* Móviles (pantalla táctil): el backdrop-filter sobre el canvas 3D es muy
   costoso al hacer scroll (provoca tirones). Se sustituye por un fondo más
   opaco que además mantiene el texto con el mismo color que en escritorio. */
@media (pointer: coarse) {
    .glass-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 15, 22, 0.88);
    }
    #radio-player {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 15, 22, 0.95);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0c;
}
::-webkit-scrollbar-thumb {
    background: #1a1a24;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00f0ff;
}

/* Radio Player Styling */
#radio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 2px;
}

#radio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #00f0ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

#radio-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #00f0ff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Efecto utilitario para triángulos (usado en botones de play) */
.border-l-12 {
    border-left-width: 12px;
}

/* Viñeta radial para contraste cinematográfico (suave para no tapar el 3D) */
.vignette {
    background: radial-gradient(
        ellipse at center,
        rgba(10, 10, 12, 0.08) 0%,
        rgba(10, 10, 12, 0.32) 55%,
        rgba(10, 10, 12, 0.6) 100%
    );
}

/* Canvas 3D a pantalla completa, sin huecos */
#canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Reducir parpadeos del reproductor de radio al cargar */
#radio-player {
    transition: background 0.3s ease;
}