/* ═══════════════════════════════════════════════════════════════
   FUNDARA · Fondo «Bruma»

   Cinco manchas radiales de violeta sobre gris. Cada una deriva por
   el lienzo, cambia de tamaño y aparece y se disipa con su propio
   reloj. La niebla resultante no está animada en ninguna parte: es
   lo que ocurre cuando las cinco se cruzan.

   Los degradados son radiales y mueren en transparente, no en otro
   color. Un degradado lineal daría bandas con dirección; este no
   tiene borde por ninguna parte, que es lo que lo hace bruma.

   Todo es CSS. El JavaScript solo convierte el color a rgba y monta
   las capas.
   ═══════════════════════════════════════════════════════════════ */

.fdr-fondo--degradado{
  --dg-velocidad:1;
  background:var(--fdr-gris);
}

.fdr-fondo__grano{z-index:3}

.fdr-dg__bruma{
  position:absolute;
  width:var(--t);
  aspect-ratio:1;
  left:var(--x);
  top:var(--y);
  /* Tres paradas y no dos: con una sola caída el borde de la mancha
     se intuye como un círculo. Con la parada intermedia baja rápido
     al principio y despacio al final, y deja de tener contorno. */
  background:radial-gradient(closest-side,
    var(--c1) 0%,
    var(--c2) 38%,
    var(--c3) 72%,
    var(--c4) 100%);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  animation:
    fdr-dg-deriva calc(var(--dx) * var(--dg-velocidad)) ease-in-out infinite,
    fdr-dg-alzada calc(var(--dy) * var(--dg-velocidad)) ease-in-out infinite;
  animation-delay:var(--r1,0s), var(--r2,0s);
}

/* La deriva y la alzada van en capas conceptuales distintas porque
   tienen periodos distintos: el recorrido resultante es una figura
   que tarda mucho en cerrarse sobre sí misma. */
@keyframes fdr-dg-deriva{
  0%,100%{transform:translate(-50%,-50%) translate(calc(var(--a) * -1), 0) scale(var(--e1))}
  50%    {transform:translate(-50%,-50%) translate(var(--a), 0) scale(var(--e2))}
}

@keyframes fdr-dg-alzada{
  0%,100%{opacity:var(--min)}
  50%    {opacity:var(--max)}
}

/* ── Las cinco manchas ────────────────────────────────────────────
   Periodos primos entre sí en ambos reloj. Tamaños muy dispares: las
   grandes son el cuerpo de la niebla, las pequeñas la densifican por
   zonas al pasar por debajo. */
.fdr-dg__bruma--1{--x:28%;--y:34%;--t:115%;--a: 9%;--e1:1.00;--e2:1.18;--dx:97s; --dy: 41s;--min:.30;--max:.72;--r1: -11s;--r2:  -6s}
.fdr-dg__bruma--2{--x:74%;--y:26%;--t: 88%;--a:-11%;--e1:1.12;--e2:.94;--dx:131s;--dy: 59s;--min:.22;--max:.64;--r1: -47s;--r2: -23s}
.fdr-dg__bruma--3{--x:58%;--y:78%;--t:102%;--a: 8%;--e1:.96;--e2:1.14;--dx:113s;--dy: 47s;--min:.26;--max:.68;--r1: -79s;--r2: -34s}
.fdr-dg__bruma--4{--x:12%;--y:70%;--t: 66%;--a:-13%;--e1:1.08;--e2:.90;--dx: 79s;--dy: 67s;--min:.18;--max:.55;--r1: -29s;--r2: -52s}
.fdr-dg__bruma--5{--x:88%;--y:58%;--t: 54%;--a: 12%;--e1:.92;--e2:1.16;--dx:149s;--dy: 53s;--min:.15;--max:.48;--r1:-101s;--r2: -15s}

/* Sin movimiento queda una niebla fija, que sigue siendo un fondo
   perfectamente válido. */
@media (prefers-reduced-motion:reduce){
  .fdr-dg__bruma{animation:none;opacity:var(--max)}
}