/* ═══════════════════════════════════════════════════════════════
   FUNDARA · Fondo «Figuras conectadas»

   Círculos y cuadrados repartidos en tres planos de profundidad,
   enlazados por un trazado que se recalcula en cada fotograma con
   sus posiciones reales.

   La paleta, el lienzo y las condiciones del contenedor vienen del
   núcleo. Aquí, la composición y el movimiento.
   ═══════════════════════════════════════════════════════════════ */

.fdr-fondo--figuras{
  --fg-velocidad:1;
  --fg-linea:rgba(255,255,255,.95);
  --fg-grosor:1.25px;
  background:var(--fdr-claro);
}

/* ── Figuras ──────────────────────────────────────────────────────
   Tres niveles anidados, cada uno con su cometido:
     .fdr-fg__pz  paralaje, lo escribe el JavaScript
     i            recorrido horizontal
     b            recorrido vertical y latido de escala
   Al dar a i y a b periodos distintos, la trayectoria resultante es
   una Lissajous que tarda minutos en repetirse. Con un solo periodo
   el bucle se detecta a simple vista. */

.fdr-fg__pz{
  position:absolute;
  aspect-ratio:1;
  width:var(--w);
  opacity:var(--op,1);
  z-index:var(--z,1);
  transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.fdr-fg__pz i{
  display:block;width:100%;height:100%;
  animation:fdr-fg-x calc(var(--dx) * var(--fg-velocidad)) ease-in-out infinite;
  animation-delay:var(--rx,0s);
}
.fdr-fg__pz b{
  display:block;width:100%;height:100%;
  background:var(--relleno);
  animation:fdr-fg-y calc(var(--dy) * var(--fg-velocidad)) ease-in-out infinite;
  animation-delay:var(--ry,0s);
  will-change:transform;
}
.fdr-fg__pz.es-circulo b{border-radius:50%}

@keyframes fdr-fg-x{
  0%,100%{transform:translateX(calc(var(--ax) * -1))}
  50%    {transform:translateX(var(--ax))}
}
@keyframes fdr-fg-y{
  0%,100%{transform:translateY(var(--ay)) scale(.95)}
  50%    {transform:translateY(calc(var(--ay) * -1)) scale(1.06)}
}

/* ── Trazado ────────────────────────────────────────────────────── */
.fdr-fg__linea{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
  z-index:6;
}
.fdr-fg__linea polyline{
  fill:none;
  stroke:var(--fg-linea);
  stroke-width:var(--fg-grosor);
  stroke-linejoin:miter;
  stroke-linecap:butt;
  vector-effect:non-scaling-stroke;
}
.fdr-fg__rama{opacity:0;transition:opacity .6s ease}
.fdr-fondo--figuras.esta-activo .fdr-fg__rama{opacity:1}

.fdr-fondo--figuras .fdr-fondo__grano{z-index:7}

/* ── Composición ──────────────────────────────────────────────────
   Tres planos. Cuanto mayor la figura, más al fondo, más tenue y
   menos paralaje; las pequeñas van delante, opacas y con mucho más
   recorrido. Como las delanteras se mueven bastante más rápido que
   las traseras, cruzan por encima constantemente: ahí es donde se
   lee el volumen. */

/* Plano de fondo */
.fdr-fg__pz--g1{left:32%;top:32%;--w:42vmin;--z:1;--op:.5;--prof:.006;
  --ax:2.5vmin;--ay:2vmin;--dx:64s;--dy:51s;--rx:-8s;--ry:-21s}
.fdr-fg__pz--g2{left:79%;top:63%;--w:34vmin;--z:1;--op:.45;--prof:.010;
  --ax:-3vmin;--ay:2.5vmin;--dx:57s;--dy:44s;--rx:-19s;--ry:-6s}

/* Plano medio */
.fdr-fg__pz--m1{left:14%;top:21%;--w:24vmin;--z:3;--op:.85;--prof:.020;
  --ax:4vmin;--ay:-3.5vmin;--dx:43s;--dy:34s;--rx:-3s;--ry:-15s}
.fdr-fg__pz--m2{left:58%;top:17%;--w:20vmin;--z:3;--op:.9;--prof:.026;
  --ax:-4.5vmin;--ay:4vmin;--dx:38s;--dy:29s;--rx:-24s;--ry:-2s}
.fdr-fg__pz--m3{left:89%;top:25%;--w:18vmin;--z:2;--op:.95;--prof:.022;
  --ax:-4vmin;--ay:-4.5vmin;--dx:47s;--dy:31s;--rx:-11s;--ry:-27s}
.fdr-fg__pz--m4{left:46%;top:73%;--w:22vmin;--z:2;--op:.85;--prof:.018;
  --ax:5vmin;--ay:3vmin;--dx:52s;--dy:39s;--rx:-30s;--ry:-13s}

/* Primer plano */
.fdr-fg__pz--c1{left:66%;top:45%;--w:12vmin;--z:5;--prof:.042;
  --ax:7vmin;--ay:-6vmin;--dx:26s;--dy:19s;--rx:-5s;--ry:-12s}
.fdr-fg__pz--c2{left:25%;top:63%;--w:9vmin;--z:5;--prof:.050;
  --ax:-8vmin;--ay:6.5vmin;--dx:23s;--dy:17s;--rx:-14s;--ry:-4s}
.fdr-fg__pz--c3{left:73%;top:83%;--w:10vmin;--z:4;--prof:.046;
  --ax:6.5vmin;--ay:7vmin;--dx:29s;--dy:21s;--rx:-9s;--ry:-18s}
.fdr-fg__pz--c4{left:41%;top:11%;--w:6vmin;--z:5;--prof:.062;
  --ax:-9vmin;--ay:5vmin;--dx:21s;--dy:15s;--rx:-2s;--ry:-9s}
.fdr-fg__pz--c5{left:91%;top:8%;--w:5vmin;--z:5;--prof:.058;
  --ax:8vmin;--ay:-5.5vmin;--dx:18s;--dy:25s;--rx:-16s;--ry:-7s}

@media (prefers-reduced-motion:reduce){
  .fdr-fg__pz i,
  .fdr-fg__pz b{animation:none}
  .fdr-fg__pz{transition:none}
}