/* ==========================================================================
   Finde · Fondo vivo (D-44, "Fondo 2" de D-43)
   Una malla de gradientes coral, ámbar y crema que orbitan despacio, con un
   grano de papel encima. En la prueba una mancha seguía el dedo; Jerson:
   "sin seguir al mouse, en automático, ya que en celular no hay mouse" — esa
   mancha ahora pasea sola. Idea de "Background Gradient Animation" (21st.dev),
   sin su paleta morada. Lo arma js/fondo.js en cualquier [data-fondo]:
     data-fondo="malla"  → la bienvenida: se nota que está vivo.
     data-fondo="suave"  → la cabecera de Inicio: menos movimiento, más sutil.
   ========================================================================== */

.fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; animation: fondo-entra 1200ms var(--ease) both; }
@keyframes fondo-entra { from { opacity: 0; } }
/* Gradientes que ya se desvanecen solos: sin blur (un filtro sobre algo que se mueve se re-rasteriza en cada cuadro). */
.fondo__mancha {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 55%, transparent) 45%, transparent 100%);
  will-change: transform;
}
.fondo__mancha:nth-child(1) { --x: 30%; --y: 30%; --t: 480px; --c: rgba(255, 213, 204, .95); animation: fondo-orbita 22s linear infinite; transform-origin: 60% 70%; }
.fondo__mancha:nth-child(2) { --x: 80%; --y: 60%; --t: 420px; --c: rgba(224, 163, 46, .26); animation: fondo-orbita 28s linear infinite reverse; transform-origin: 20% 40%; }
.fondo__mancha:nth-child(3) { --x: 20%; --y: 85%; --t: 440px; --c: rgba(254, 92, 71, .20); animation: fondo-orbita 34s linear infinite; transform-origin: 80% 10%; }
.fondo__mancha:nth-child(4) { --x: 90%; --y: 10%; --t: 360px; --c: rgba(255, 242, 240, 1); animation: fondo-orbita 40s linear infinite reverse; transform-origin: 10% 90%; }
/* La que antes seguía el dedo: ahora recorre la pantalla sola, en un lazo largo. */
.fondo__mancha--paseo { --t: 340px; --c: rgba(254, 92, 71, .28); left: 50%; top: 45%; animation: fondo-paseo 26s ease-in-out infinite; }
@keyframes fondo-orbita { to { transform: rotate(360deg); } }
@keyframes fondo-paseo {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(28%, 30%); }
  50% { transform: translate(-30%, 8%); }
  75% { transform: translate(-6%, -32%); }
}
.fondo__grano { position: absolute; inset: 0; background-size: 160px; opacity: .06; mix-blend-mode: multiply; }

/* Suave (Inicio): la mitad de intensidad, el doble de lento, y se desvanece hacia abajo. */
.fondo--suave { -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); opacity: .7; }
.fondo--suave .fondo__mancha { --t: 260px; animation-duration: 60s; }
.fondo--suave .fondo__mancha:nth-child(2) { animation-duration: 72s; }
.fondo--suave .fondo__mancha:nth-child(3) { animation-duration: 84s; }
.fondo--suave .fondo__mancha:nth-child(4) { animation-duration: 96s; }
.fondo--suave .fondo__mancha--paseo { --t: 220px; --c: rgba(254, 92, 71, .18); animation-duration: 64s; }
.fondo--suave .fondo__grano { opacity: .035; }

@media (prefers-reduced-motion: reduce) {
  .fondo, .fondo__mancha { animation: none; }
}