/* =============================================================================
 *  Perú Elige 2026 — Segunda Vuelta
 *  fireworks.css — Fuegos artificiales sobre el avatar del GANADOR.
 *
 *  PREVIEW LOCAL (v0.1.16.180): hoy winner-fireworks.js lo aplica al lado
 *  IZQUIERDO (Keiko). En producción se gateará al estado "ganador matemático".
 *
 *  Técnica: cada estallido es un punto cuyo box-shadow forma un anillo de
 *  chispas; al escalar de 0 a --s el anillo se expande hacia afuera y se
 *  desvanece = fuego artificial. Estallidos escalonados alrededor del avatar
 *  (arriba y a los lados), sin tapar la cara. Solo transform+opacity (GPU).
 * ===========================================================================*/

/* El avatar-wrap debe dejar salir los fuegos fuera del círculo. */
.rh-fw-host { position: relative; overflow: visible; }

/* Capa que se extiende más allá del avatar (los fuegos estallan alrededor). */
.rh-fw {
  position: absolute;
  inset: -60%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

.rh-fw__burst {
  --s: 1.7;
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  box-shadow:
    22px 0 1px 0 #ffd54a,  19px 11px 1px 0 #ffffff,  11px 19px 1px 0 #ff4d4d,
    0 22px 1px 0 #ff9e3d,  -11px 19px 1px 0 #ffd54a, -19px 11px 1px 0 #ffffff,
    -22px 0 1px 0 #ff4d4d, -19px -11px 1px 0 #ff9e3d, -11px -19px 1px 0 #ffd54a,
    0 -22px 1px 0 #ffffff, 11px -19px 1px 0 #ff4d4d,  19px -11px 1px 0 #ff9e3d;
  animation: rhFwBurst 5s ease-out infinite;   /* ciclo 5s: estalla en el primer ~1.7s, reposa el resto */
}

@keyframes rhFwBurst {
  0%    { transform: scale(0);        opacity: 0; }
  3%    {                             opacity: 1; }
  19%   {                             opacity: 1; }
  34%   { transform: scale(var(--s)); opacity: 0; }   /* estallido terminado (~1.7s de 5s) */
  100%  { transform: scale(var(--s)); opacity: 0; }   /* en reposo el resto del ciclo */
}

/* Estallidos alrededor del perímetro (evitan el centro = la cara), con tamaños,
   tiempos y duraciones distintos → siempre hay algo reventando, orgánico. */
/* Arco sobre la cabeza (avatar ocupa ~27–73% de la capa). Sesgado a ARRIBA y al
   lado IZQUIERDO/margen, para no pisar el texto "50.120%" a la derecha. */
/* delays 0–.9s: las 6 estallan en una "tanda" compacta al inicio de cada ciclo de 5s. */
.rh-fw__burst:nth-child(1) { --s: 1.8; top:  8%; left: 50%; animation-delay: 0s;   }
.rh-fw__burst:nth-child(2) { --s: 1.5; top: 20%; left: 18%; animation-delay: .25s; }
.rh-fw__burst:nth-child(3) { --s: 1.5; top: 20%; left: 82%; animation-delay: .5s;  }
.rh-fw__burst:nth-child(4) { --s: 1.3; top: 46%; left:  4%; animation-delay: .75s; }
.rh-fw__burst:nth-child(5) { --s: 1.6; top:  2%; left: 32%; animation-delay: .15s; }
.rh-fw__burst:nth-child(6) { --s: 1.6; top:  2%; left: 68%; animation-delay: .9s;  }

@media (prefers-reduced-motion: reduce) { .rh-fw { display: none; } }