/* ═══════════════════════════════════════════════════════════════════════════
   Escena de fondo de la pantalla del reloj (una por tema).

   Cada escena es una «fotografía» pre-renderizada (img/escena/<tema>-h.webp para
   pantallas apaisadas y <tema>-v.webp para verticales): tablero en perspectiva con
   piezas Staunton, profundidad de campo y bokeh ya horneados en la imagen, así que el
   navegador no calcula ningún desenfoque. Encima van dos capas CSS muy ligeras:
     · .escena-brillo  luces de bokeh que «respiran» (solo opacity/transform → GPU)
     · .escena-luz     viñeta y degradados que garantizan el contraste del título
   Se generan con el motor procedural de Python del equipo (ver informe del artista).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Colores de respaldo (mientras carga la imagen o si faltara) ─────────── */
#pantalla-reloj { background: #120a05; overflow: hidden; }
:root[data-tema="oscuro"] #pantalla-reloj { background: #04060a; }
:root[data-tema="claro"] #pantalla-reloj { background: #ece9e3; }
:root[data-tema="lcd"] #pantalla-reloj { background: #d9d3c8; }
:root[data-tema="neon"] #pantalla-reloj { background: #0a0616; }
:root[data-tema="gran-maestro"] #pantalla-reloj { background: #0a0405; }

/* ── Contenedor ──────────────────────────────────────────────────────────── */
.escena {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  /* imágenes del tema por defecto («tablero») */
  --escena-h: url("../img/escena/tablero-h.webp");
  --escena-v: url("../img/escena/tablero-v.webp");
  --escena-pos-h: 50% 46%;
  --escena-pos-v: 50% 42%;
  contain: strict;
}
:root[data-tema="oscuro"] .escena { --escena-h: url("../img/escena/oscuro-h.webp"); --escena-v: url("../img/escena/oscuro-v.webp"); }
:root[data-tema="claro"] .escena { --escena-h: url("../img/escena/claro-h.webp"); --escena-v: url("../img/escena/claro-v.webp"); }
:root[data-tema="lcd"] .escena { --escena-h: url("../img/escena/lcd-h.webp"); --escena-v: url("../img/escena/lcd-v.webp"); }
:root[data-tema="neon"] .escena { --escena-h: url("../img/escena/neon-h.webp"); --escena-v: url("../img/escena/neon-v.webp"); --escena-pos-h: 50% 30%; --escena-pos-v: 50% 30%; }
:root[data-tema="gran-maestro"] .escena { --escena-h: url("../img/escena/gran-maestro-h.webp"); --escena-v: url("../img/escena/gran-maestro-v.webp"); }

/* ── 1. La fotografía ────────────────────────────────────────────────────── */
.escena-foto {
  position: absolute; inset: 0;
  background-image: var(--escena-h);
  background-position: var(--escena-pos-h);
  background-size: cover;
  background-repeat: no-repeat;
}
/* Pantallas verticales o casi cuadradas-altas: encuadre vertical propio */
@media (max-aspect-ratio: 4/5) {
  .escena-foto { background-image: var(--escena-v); background-position: var(--escena-pos-v); }
}

/* ── 2. Bokeh vivo (muy sutil; solo opacity/transform → compuesto en GPU) ── */
.escena-brillo {
  position: absolute; left: 0; right: 0; top: 0; height: 46%;
  --b1: rgba(255, 196, 118, .34); --b2: rgba(255, 168, 84, .28); --b3: rgba(255, 222, 165, .32);
}
.escena-brillo::before, .escena-brillo::after {
  content: ""; position: absolute; inset: 0; opacity: 0; will-change: opacity;
  mix-blend-mode: screen;
}
/* dos grupos de luces lejanas que se encienden y apagan a destiempo */
.escena-brillo::before {
  background:
    radial-gradient(circle at 58% 22%, var(--b1) 0, var(--b1) 1.35vmax, transparent 1.7vmax),
    radial-gradient(circle at 71% 9%, var(--b3) 0, var(--b3) .9vmax, transparent 1.2vmax),
    radial-gradient(circle at 83% 30%, var(--b2) 0, var(--b2) 1.7vmax, transparent 2.1vmax),
    radial-gradient(circle at 94% 14%, var(--b1) 0, var(--b1) 1.1vmax, transparent 1.4vmax),
    radial-gradient(circle at 40% 36%, var(--b2) 0, var(--b2) .8vmax, transparent 1.1vmax);
  animation: escena-respira 9s ease-in-out infinite alternate;
}
.escena-brillo::after {
  background:
    radial-gradient(circle at 64% 34%, var(--b3) 0, var(--b3) 1.1vmax, transparent 1.4vmax),
    radial-gradient(circle at 77% 18%, var(--b1) 0, var(--b1) .75vmax, transparent 1vmax),
    radial-gradient(circle at 88% 5%, var(--b2) 0, var(--b2) 1.35vmax, transparent 1.7vmax),
    radial-gradient(circle at 50% 12%, var(--b1) 0, var(--b1) .65vmax, transparent .9vmax);
  animation: escena-respira 12s ease-in-out -6s infinite alternate;
}
@keyframes escena-respira { 0%, 15% { opacity: 0; } 100% { opacity: 1; } }

:root[data-tema="oscuro"] .escena-brillo { --b1: rgba(120, 170, 255, .30); --b2: rgba(90, 140, 255, .26); --b3: rgba(190, 215, 255, .30); }
:root[data-tema="gran-maestro"] .escena-brillo { --b1: rgba(255, 200, 120, .30); --b2: rgba(240, 170, 80, .26); --b3: rgba(255, 226, 170, .28); }
:root[data-tema="claro"] .escena-brillo, :root[data-tema="lcd"] .escena-brillo { display: none; }

/* Neón: en lugar de bokeh, el resplandor del sol late muy despacio */
:root[data-tema="neon"] .escena-brillo::before {
  background: radial-gradient(26% 55% at 50% 30%, rgba(255, 80, 180, .40), rgba(255, 60, 160, .10) 55%, transparent 75%);
  animation-duration: 6s;
}
:root[data-tema="neon"] .escena-brillo::after { display: none; }

/* Oscuro: motas de polvo que suben despacio dentro del haz de luz */
:root[data-tema="oscuro"] .escena-brillo::after {
  left: 32%; right: 32%; top: 0; bottom: -60%;
  background:
    radial-gradient(circle at 20% 30%, rgba(205, 222, 255, .85) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 70% 55%, rgba(205, 222, 255, .6) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 45% 80%, rgba(205, 222, 255, .7) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 85% 15%, rgba(205, 222, 255, .5) 0 .8px, transparent 1.6px);
  background-size: 190px 230px, 150px 170px, 240px 270px, 120px 155px;
  -webkit-mask-image: radial-gradient(50% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(50% 60% at 50% 40%, #000 30%, transparent 100%);
  opacity: .5;
  animation: escena-polvo 45s linear infinite;
  will-change: transform;
}
@keyframes escena-polvo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-24px, -270px, 0); } }

/* ── 3. Luz: viñeta + contraste para el título y la base de los pulsadores ── */
.escena-luz {
  position: absolute; inset: 0;
  background:
    /* zona del título (arriba a la izquierda) algo más oscura */
    radial-gradient(42% 22% at 12% 4%, rgba(10, 5, 2, .55), transparent 100%),
    /* franja superior y pie (detrás de los pulsadores) */
    linear-gradient(180deg, rgba(10, 5, 2, .45) 0%, rgba(10, 5, 2, 0) 16%, rgba(10, 5, 2, 0) 78%, rgba(6, 3, 1, .5) 100%),
    /* viñeta */
    radial-gradient(130% 95% at 50% 48%, transparent 58%, rgba(0, 0, 0, .45) 100%);
}
:root[data-tema="oscuro"] .escena-luz {
  background:
    radial-gradient(42% 22% at 12% 4%, rgba(2, 4, 8, .6), transparent 100%),
    linear-gradient(180deg, rgba(2, 4, 8, .45) 0%, rgba(2, 4, 8, 0) 16%, rgba(2, 4, 8, 0) 78%, rgba(1, 2, 4, .55) 100%),
    radial-gradient(130% 95% at 50% 48%, transparent 58%, rgba(0, 0, 0, .5) 100%);
}
:root[data-tema="gran-maestro"] .escena-luz {
  background:
    radial-gradient(42% 22% at 12% 4%, rgba(6, 2, 2, .6), transparent 100%),
    linear-gradient(180deg, rgba(6, 2, 2, .45) 0%, rgba(6, 2, 2, 0) 16%, rgba(6, 2, 2, 0) 78%, rgba(4, 1, 1, .55) 100%),
    radial-gradient(130% 95% at 50% 48%, transparent 55%, rgba(0, 0, 0, .5) 100%);
}
:root[data-tema="neon"] .escena-luz {
  background:
    radial-gradient(42% 22% at 12% 4%, rgba(6, 3, 16, .55), transparent 100%),
    linear-gradient(180deg, rgba(6, 3, 16, .3) 0%, rgba(6, 3, 16, 0) 14%, rgba(6, 3, 16, 0) 80%, rgba(4, 2, 10, .5) 100%),
    radial-gradient(130% 95% at 50% 48%, transparent 60%, rgba(0, 0, 0, .4) 100%);
}
/* Temas claros: el título es oscuro → la esquina se ACLARA, viñeta muy suave */
:root[data-tema="claro"] .escena-luz {
  background:
    radial-gradient(46% 26% at 12% 4%, rgba(255, 255, 255, .7), transparent 100%),
    linear-gradient(180deg, rgba(250, 249, 246, .35) 0%, rgba(250, 249, 246, 0) 18%),
    radial-gradient(130% 95% at 50% 48%, transparent 62%, rgba(60, 50, 40, .14) 100%);
}
:root[data-tema="lcd"] .escena-luz {
  background:
    radial-gradient(46% 26% at 12% 4%, rgba(255, 253, 248, .7), transparent 100%),
    linear-gradient(180deg, rgba(248, 245, 238, .3) 0%, rgba(248, 245, 238, 0) 18%, rgba(40, 28, 16, 0) 80%, rgba(40, 28, 16, .25) 100%),
    radial-gradient(130% 95% at 50% 48%, transparent 62%, rgba(40, 30, 20, .16) 100%);
}

/* ── Accesibilidad: sin movimiento ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .escena-brillo::before, .escena-brillo::after { animation: none !important; }
  .escena-brillo::before { opacity: .5; }
  .escena-brillo::after { opacity: 0; }
  :root[data-tema="oscuro"] .escena-brillo::after { opacity: .35; }
}