/* ============================================================
   SQLearning · Escena de fondo cyberpunk
   <div class="escena" aria-hidden="true">
     <div class="escena-cielo"></div>
     <img class="escena-ciudad" src="recursos/ciudad-neon.svg" alt="">
     <div class="escena-suelo"></div>
   </div>
   .escena--tenue: versión discreta para pantallas de trabajo.
   ============================================================ */
.escena {
  --horizonte-y: 64%;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--fondo);
}
.escena-cielo {
  position: absolute;
  inset: 0 0 calc(100% - var(--horizonte-y)) 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, color-mix(in srgb, var(--horizonte) 45%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, color-mix(in srgb, var(--cian) 8%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--fondo) 0%, var(--fondo-alto) 70%, color-mix(in srgb, var(--horizonte) 22%, var(--fondo-alto)) 100%);
}
/* Estrellas lejanas (puntos fijos) */
.escena-cielo::before {
  content: "";
  position: absolute;
  inset: 0 0 35% 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff4, transparent),
    radial-gradient(1px 1px at 27% 42%, #fff3, transparent),
    radial-gradient(1px 1px at 46% 12%, #fff4, transparent),
    radial-gradient(1px 1px at 63% 30%, #fff2, transparent),
    radial-gradient(1.5px 1.5px at 78% 9%, #fff5, transparent),
    radial-gradient(1px 1px at 88% 38%, #fff3, transparent),
    radial-gradient(1px 1px at 5% 55%, #fff2, transparent);
}
/* Niebla sobre el horizonte y viñeta oscura en los bordes: aire de misterio */
.escena::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent calc(var(--horizonte-y) - 22%),
      color-mix(in srgb, var(--fondo-alto) 70%, transparent) calc(var(--horizonte-y) - 3%),
      transparent calc(var(--horizonte-y) + 14%)),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.6) 100%);
}
:root[data-theme="light"] .escena::after { background: none; }
.escena-ciudad {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  bottom: calc(100% - var(--horizonte-y));
  object-fit: cover;
  object-position: center bottom;
  animation: parpadeo 7s ease-in-out infinite;
}
.escena-suelo {
  position: absolute;
  left: -50%;
  right: -50%;
  top: var(--horizonte-y);
  bottom: 0;
  perspective: 300px;
  perspective-origin: 50% 0;      /* las líneas fugan hacia el horizonte */
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--horizonte) 35%, transparent), transparent 35%),
    var(--fondo);
}
.escena-suelo::before {
  content: "";
  position: absolute;
  inset: 0 0 -60% 0;
  transform-origin: top center;
  transform: rotateX(62deg);
  background-image:
    linear-gradient(to right, var(--rejilla) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--rejilla-2) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  animation: avanzar 4s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000);
}
/* Reflejo de la ciudad en el suelo mojado */
.escena-suelo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--acento) 18%, transparent), transparent 40%);
}
@keyframes avanzar { to { background-position: 0 64px; } }
@keyframes parpadeo {
  0%, 100% { filter: brightness(1); }
  48% { filter: brightness(1); }
  50% { filter: brightness(0.82); }
  52% { filter: brightness(1.05); }
}

/* Ambiente de historia: la ciudad algo más encendida */
:root[data-ambiente="historia"]:not([data-theme="light"]) .escena-ciudad { filter: saturate(1.35) brightness(1.15); }

/* Versión discreta: detrás del espacio de trabajo */
.escena--tenue { --horizonte-y: 78%; }
.escena--tenue .escena-ciudad { opacity: 0.45; height: 40%; }
.escena--tenue .escena-suelo::before { opacity: 0.4; }

:root[data-theme="light"] .escena-ciudad { opacity: 0.45; filter: invert(1) hue-rotate(180deg) saturate(0.6); animation: none; }  /* siluetas claras con el neón en su tono, no gris */
:root[data-theme="light"] .escena-cielo::before { display: none; }

/* Ambiente de historia: lluvia fina de neón (gotas como elipses estrechas en tres capas que caen a distinta velocidad)
   y un dron que cruza el cielo de vez en cuando. Con movimiento reducido la lluvia queda quieta y el dron, fuera de la vista. */
:root[data-ambiente="historia"] .escena::before {
  content: "";
  position: absolute;
  inset: -20% -10% 0;
  z-index: 1;
  background-image:
    radial-gradient(1px 13px at 20% 30%, color-mix(in srgb, var(--cian) 70%, transparent), transparent),
    radial-gradient(1px 10px at 70% 60%, color-mix(in srgb, var(--acento) 55%, transparent), transparent),
    radial-gradient(1px 16px at 45% 80%, color-mix(in srgb, var(--cian) 50%, transparent), transparent);
  background-size: 97px 160px, 131px 210px, 173px 260px;
  transform: rotate(10deg);
  opacity: 0.6;
  animation: lluvia 0.7s linear infinite;
}
@keyframes lluvia { to { background-position: 0 160px, 0 210px, 0 260px; } }
:root[data-ambiente="historia"] .escena-cielo::after {
  content: "";
  position: absolute;
  top: 18%;
  left: -40px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--acento) 0 3px, #1c1830 3px calc(100% - 3px), var(--cian) calc(100% - 3px));
  filter: drop-shadow(0 0 3px var(--cian));
  animation: dron 48s linear infinite;
}
@keyframes dron {
  0% { transform: translate(0, 0); }
  20% { transform: translate(calc(50vw + 40px), 14px); }
  40%, 100% { transform: translate(calc(100vw + 80px), 0); }
}
:root[data-theme="light"] .escena::before, :root[data-theme="light"] .escena-cielo::after { display: none; }