/* ── Partículas flotantes ascendentes ─────────────────────────────────────
   Emergen desde la base y suben. Elegantes, sin colores llamativos.
   Override por página:
     :root { --butterfly-opacity: .80; --butterfly-opacity-sm: .35; }
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --butterfly-opacity:    .68;
  --butterfly-opacity-sm: .32;
}

.butterflies-global {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}

/* ── Partícula ──────────────────────────────────────────────────────────── */
.butterfly {
  --ff-max: var(--butterfly-opacity);
  position: fixed;
  left: var(--x0, 50vw);
  top: 100vh;                   /* ancla en la base */
  width:  var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  /* Centro blanco puro → halo plateado muy sutil */
  background: radial-gradient(circle at 42% 42%,
    #ffffff                 0%,
    rgba(230, 242, 255, .85) 30%,
    rgba(195, 220, 255, .40) 58%,
    transparent              78%
  );
  /* Glow contenido, sin colores saturados */
  box-shadow:
    0 0 calc(var(--sz, 3px) * 2.5) calc(var(--sz, 3px) * 1)    rgba(220, 238, 255, .90),
    0 0 calc(var(--sz, 3px) * 6  ) calc(var(--sz, 3px) * 2.5)  rgba(195, 220, 255, .45),
    0 0 calc(var(--sz, 3px) * 14 ) calc(var(--sz, 3px) * 5  )  rgba(170, 205, 255, .15);
  /* Variación de tinte mínima (apenas perceptible) */
  filter: hue-rotate(var(--hue, 0deg));
  opacity: 0;
  animation: ff-rise var(--t, 20s) ease-in-out infinite var(--d, 0s);
  will-change: transform, opacity;
}

@media (max-width: 576px) {
  .butterfly { --ff-max: var(--butterfly-opacity-sm); }
}

/* ── Ascenso suave con deriva lateral en S ──────────────────────────────── */
/* Fade-in lento al salir de la base, fade-out al llegar arriba.
   Deriva horizontal mínima (--rx1 / --rx2) crea una curva natural.        */
@keyframes ff-rise {
  0%   { transform: translate(0,               0);     opacity: 0;            }
  7%   {                                                opacity: var(--ff-max); }
  25%  { transform: translate(var(--rx1,  1vw), -25vh);                        }
  50%  { transform: translate(var(--rx2, -1vw), -50vh);                        }
  75%  { transform: translate(var(--rx1,  1vw), -75vh);                        }
  92%  {                                                opacity: var(--ff-max); }
  100% { transform: translate(0,              -107vh);  opacity: 0;            }
}