/* ═══════════════════════════════════════════════════════════════
   FUNDARA · Fondo «Burbujas»
   La paleta, el lienzo y las condiciones del contenedor vienen del
   núcleo. Aquí solo lo propio de esta animación.
   ═══════════════════════════════════════════════════════════════ */

.fdr-fondo--burbujas{
  --bj-velocidad:1;
  background:
    radial-gradient(120% 90% at 78% 12%, #fff 0%, var(--fdr-claro) 55%, #fff 100%);
}

/* Capa fusionable. El filtro lo asigna el JavaScript, porque su
   identificador lleva un sufijo único por instancia: dos fondos en la
   misma página compartirían filtro si estuviera escrito aquí. */
.fdr-bj__capa{
  position:absolute;
  inset:-14%;
  opacity:.92;
  will-change:filter;
}

.fdr-bj__pz{
  position:absolute;
  aspect-ratio:1;
  transform:translate(-50%,-50%) translate3d(var(--ox,0px),var(--oy,0px),0);
}
.fdr-bj__pz i{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--c);
  animation:fdr-bj-deriva calc(var(--dur) * var(--bj-velocidad)) ease-in-out infinite;
  animation-delay:var(--ret,0s);
  will-change:transform;
}

@keyframes fdr-bj-deriva{
  0%  {transform:translate(0,0) scale(1)}
  25% {transform:translate(var(--ax),calc(var(--ay) * -1)) scale(1.07)}
  50% {transform:translate(calc(var(--ax) * -.65),var(--ay)) scale(.92)}
  75% {transform:translate(calc(var(--ax) * .35),calc(var(--ay) * .55)) scale(1.04)}
  100%{transform:translate(0,0) scale(1)}
}

/* Burbuja del cursor: no deriva, solo aparece y desaparece. Al estar
   dentro de la misma capa, se funde con las demás.

   La escala la escribe el JavaScript en --e. Con una transición de CSS
   quedaba a merced de que el cálculo de dentro/fuera acertara; así se
   interpola en el mismo bucle que todo lo demás. */
.fdr-bj__cursor{left:0;top:0;width:15vmin}
.fdr-bj__cursor i{
  animation:none;
  transform:scale(var(--e,0));
}

.fdr-bj__defs{position:absolute;width:0;height:0}

/* ── Composición ──────────────────────────────────────────────────
   Siete círculos derivados de la retícula 3×3 del identificador.
   El color se asigna desde JavaScript: cinco toman el dominante que
   se haya elegido y dos quedan como acentos fijos. */
.fdr-bj__pz--b1{left:22%;top:34%;width:46vmin;--ax:5vmin;--ay:4vmin;--dur:38s;--ret:-4s}
.fdr-bj__pz--b2{left:73%;top:22%;width:30vmin;--ax:-6vmin;--ay:5vmin;--dur:31s;--ret:-11s}
.fdr-bj__pz--b3{left:52%;top:66%;width:34vmin;--ax:4vmin;--ay:-5vmin;--dur:44s;--ret:-19s}
.fdr-bj__pz--b4{left:88%;top:74%;width:24vmin;--ax:-4vmin;--ay:-6vmin;--dur:27s;--ret:-7s}
.fdr-bj__pz--b5{left:8%;top:82%;width:20vmin;--ax:6vmin;--ay:3vmin;--dur:35s;--ret:-23s}
.fdr-bj__pz--b6{left:41%;top:9%;width:14vmin;--ax:-5vmin;--ay:6vmin;--dur:24s;--ret:-2s}
.fdr-bj__pz--b7{left:64%;top:44%;width:11vmin;--ax:7vmin;--ay:-4vmin;--dur:29s;--ret:-15s}

@media (prefers-reduced-motion:reduce){
  .fdr-bj__pz i{animation:none}
  .fdr-bj__cursor{display:none}
}
@media (max-width:768px){
  .fdr-bj__cursor{display:none}
}