/* ============================================================
   FONDO VIVO
   ------------------------------------------------------------
   Capa fija detrás de todo el sitio. Nunca está quieto:
     · dos canvas: haz de luz (baja resolución, suave) y polvo
     · niebla: dos manchas enormes que derivan muy despacio
     · telón de terciopelo vino en los bordes, que se mece
   La lógica del haz y del polvo vive en js/fondo.js.
   ============================================================ */

.fondo {
  position: fixed;
  inset: 0;
  z-index: var(--z-fondo);
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% -5%, rgba(11, 26, 48, 0.95), transparent 70%),
    var(--sala);
}

.fondo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Niebla: deriva lenta, solo transform (va por GPU) ---------- */
.fondo__niebla {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
}

.fondo__niebla--vino {
  left: -45vmax;
  top: 10vh;
  background: radial-gradient(closest-side, rgba(118, 0, 16, 0.2), transparent 70%);
  animation: niebla-a 46s ease-in-out infinite alternate;
}

.fondo__niebla--azul {
  right: -50vmax;
  top: -30vh;
  background: radial-gradient(closest-side, rgba(20, 37, 63, 0.55), transparent 70%);
  animation: niebla-b 58s ease-in-out infinite alternate;
}

@keyframes niebla-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 16vh, 0) scale(1.18); }
}
@keyframes niebla-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-18vw, 22vh, 0) scale(0.9); }
}

/* ---------- Telón de terciopelo en los bordes ---------- */
.fondo__telon {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2.4rem, 8.5vw, 9.5rem);
  overflow: hidden;
}

.fondo__telon--izq {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 52%, transparent 100%);
}

.fondo__telon--der {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 52%, transparent 100%);
}

/* Pliegues: franjas verticales que se desplazan apenas, como si el
   telón respirara con la corriente de la sala. */
.fondo__telon i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 160%;
  will-change: transform;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0px,
      rgba(0, 0, 0, 0) 11px,
      rgba(255, 140, 150, 0.075) 23px,
      rgba(0, 0, 0, 0.34) 35px,
      rgba(0, 0, 0, 0.66) 46px
    ),
    linear-gradient(180deg, #6e000f 0%, var(--vino) 28%, var(--vino-medio) 70%, var(--vino-profundo) 100%);
}

.fondo__telon--izq i { animation: telon-mecer 15s ease-in-out infinite alternate; }
.fondo__telon--der i { animation: telon-mecer 19s ease-in-out -7s infinite alternate-reverse; }

@keyframes telon-mecer {
  from { transform: translate3d(-5%, 0, 0); }
  to   { transform: translate3d(5%, 0, 0); }
}

/* Sombra que lleva el telón hacia el centro: pasa de vino a sala */
.fondo__telon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 8, 20, 0.55), transparent 20%, transparent 74%, rgba(0, 8, 20, 0.6));
}

/* El contenido va por encima del fondo */
main, .pie { position: relative; z-index: var(--z-contenido); }

@media (prefers-reduced-motion: reduce) {
  .fondo__niebla,
  .fondo__telon i { animation: none; }
}