/* ========================================================= OUT2FI — tema "Luces de discoteca" (3.º modo del botón) + aviso de reanudación tras una llamada. El botón del header alterna: Disco (por defecto) → Oscuro. El modo Claro quedó fuera del ciclo (ver OUT2FI_THEMES en main.js); su CSS sigue existiendo pero ya no hay forma de llegar a él. Este archivo solo se activa con :root[data-theme="disco"], así que no toca nada de los otros dos temas. ========================================================= */ :root[data-theme="disco"] { --bg: #05030c; --bg-elevated: #0c0718; --surface: rgba(19, 12, 34, .72); --surface-2: rgba(26, 16, 46, .78); --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .18); --text: #ffffff; --text-dim: #c9c2e4; --text-faint: #8b83ad; --accent-1: #c026ff; --accent-2: #4f7bff; --accent-3: #ff2d95; --shadow-glow: 0 0 0 1px rgba(192, 38, 255, .35), 0 10px 34px rgba(79, 123, 255, .28); color-scheme: dark; /* El fondo pasa al para que la capa de luces (z-index:-1) quede por encima del fondo pero por debajo del contenido. */ background: var(--bg); } :root[data-theme="disco"] body { background: transparent; } /* --- capa de humo WebGL (Three.js) --- Se monta y se desmonta desde main.js, y SOLO existe en el tema disco: el selector de abajo es una segunda barrera por si alguna vez queda el nodo colgado tras un cambio de tema. Va por debajo de los focos (z-index -3 vs -2) para que las luces se lean por encima del humo, que es como se ve en una pista real. pointer-events:none es obligatorio: el ocupa toda la pantalla y sin esto se comeria todos los clics del sitio. */ .disco-smoke { display: none; } :root[data-theme="disco"] .disco-smoke { display: block; position: fixed; inset: 0; z-index: -3; pointer-events: none; /* Los bordes se difuminan para que el humo no termine en una linea recta contra el borde de la ventana. */ -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 45%, transparent 100%); } :root[data-theme="disco"] .disco-smoke canvas { display: block; width: 100%; height: 100%; } /* Quien pidio menos animaciones no recibe humo. main.js ya ni lo monta; esto cubre el caso de cambiar la preferencia con la pagina abierta. */ @media (prefers-reduced-motion: reduce) { :root[data-theme="disco"] .disco-smoke { display: none; } } /* --- capa de focos de colores --- */ .disco-lights { display: none; } :root[data-theme="disco"] .disco-lights { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } :root[data-theme="disco"] .disco-lights span { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(70px); opacity: .42; mix-blend-mode: screen; will-change: transform, opacity; animation: disco-float 26s ease-in-out infinite; } :root[data-theme="disco"] .disco-lights span:nth-child(1) { background: radial-gradient(circle, #c026ff 0%, transparent 70%); top: -18%; left: -12%; animation-delay: 0s; } :root[data-theme="disco"] .disco-lights span:nth-child(2) { background: radial-gradient(circle, #4f7bff 0%, transparent 70%); top: 8%; right: -18%; animation-delay: -5s; animation-duration: 31s; } :root[data-theme="disco"] .disco-lights span:nth-child(3) { background: radial-gradient(circle, #ff2d95 0%, transparent 70%); bottom: -20%; left: 12%; animation-delay: -11s; animation-duration: 23s; } :root[data-theme="disco"] .disco-lights span:nth-child(4) { background: radial-gradient(circle, #22d3ee 0%, transparent 70%); bottom: -12%; right: 4%; animation-delay: -17s; animation-duration: 35s; } :root[data-theme="disco"] .disco-lights span:nth-child(5) { background: radial-gradient(circle, #a3e635 0%, transparent 72%); top: 38%; left: 34%; opacity: .22; animation-delay: -8s; animation-duration: 29s; } @keyframes disco-float { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(14vw, 10vh, 0) scale(1.18); } 50% { transform: translate3d(-8vw, 18vh, 0) scale(.92); } 75% { transform: translate3d(10vw, -12vh, 0) scale(1.1); } 100% { transform: translate3d(0, 0, 0) scale(1); } } /* Con la radio sonando las luces se mueven algo más vivas; en pausa se calman. La clase la pone/quita main.js con los eventos del player. */ :root[data-theme="disco"].is-onair .disco-lights span { animation-duration: 14s; opacity: .55; } :root[data-theme="disco"].is-onair .disco-lights span:nth-child(5) { opacity: .3; } /* Brillo del reproductor y del badge en vivo, solo en este tema */ :root[data-theme="disco"] .player-card, :root[data-theme="disco"] .mini-player { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glow); } /* Móvil: menos desenfoque y menos focos = misma vista, sin castigar la batería ni el scroll. */ @media (max-width: 640px) { :root[data-theme="disco"] .disco-lights span { filter: blur(48px); width: 76vmax; height: 76vmax; } :root[data-theme="disco"] .disco-lights span:nth-child(5) { display: none; } } /* Si el sistema pide menos movimiento, se quedan quietas pero se ven. */ @media (prefers-reduced-motion: reduce) { :root[data-theme="disco"] .disco-lights span { animation: none; } } /* ========================================================= Aviso "toca para volver a la radio" (solo aparece si tras una llamada el navegador no deja reanudar solo — casi siempre iPhone). ========================================================= */ .resume-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); transform: translate(-50%, 16px); z-index: 9999; padding: 12px 20px; border: 0; border-radius: 999px; font-family: var(--font-body, system-ui, sans-serif); font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(120deg, #a855f7, #6366f1, #ec4899); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; } .resume-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }