/* ==========================================================================
   130 — Like Burst
   Cœur façon Twitter, 100 % CSS (checkbox caché + :checked) : au like le
   cœur disparaît un battement, re-pop en gradient chaud avec overshoot,
   un anneau éclate et 12 particules bicolores giclent en étoile avant de
   retomber. Le compteur voisin roule (l'ancien chiffre sort vers le haut,
   le nouveau arrive du bas). Dé-like sobre : le cœur se dégonfle.
   ========================================================================== */

.like-burst {
  --lb-color: var(--like-burst-color, #f472b6);
  --lb-color-2: var(--like-burst-color-2, #fb7185);
  --lb-spark: var(--like-burst-spark, #fbbf24);
  --lb-size: 42px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ml-muted, #8b91a3);
  user-select: none;
  -webkit-user-select: none;
}

/* input masqué mais focusable (accessibilité clavier) */
.like-burst__input,
.like-burst__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.like-burst__input:focus-visible ~ .like-burst__heart {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 4px;
  border-radius: 50%;
}

/* --- Cœur ----------------------------------------------------------------- */

.like-burst__heart {
  position: relative;
  flex: none;
  width: var(--lb-size);
  height: var(--lb-size);
}

.like-burst__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.like-burst:hover .like-burst__svg {
  transform: scale(1.08);
}

.like-burst__shape {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.like-burst:hover .like-burst__shape {
  stroke: var(--lb-color);
}

/* pression : le cœur s'écrase — au dé-like il regonfle sobrement au relâché */
.like-burst__input:active ~ .like-burst__heart .like-burst__shape {
  transform: scale(0.78);
  transition-duration: 0.1s;
}

/* stops du gradient chaud (pilotés en CSS, id SVG namespacé) */
.like-burst__stop-a { stop-color: var(--lb-color); }
.like-burst__stop-b { stop-color: var(--lb-color-2); }

.like-burst__input:checked ~ .like-burst__heart .like-burst__shape {
  fill: url(#like-burst-grad);
  stroke: transparent;
  transition-duration: 0.1s, 0.1s, 0.3s;
}

/* disparition d'un battement puis re-pop avec overshoot */
.like-burst__input:checked ~ .like-burst__heart .like-burst__svg {
  animation: like-burst-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes like-burst-pop {
  0%   { transform: scale(0); }
  16%  { transform: scale(0); }
  48%  { transform: scale(1.32); }
  72%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* --- Anneau --------------------------------------------------------------- */

.like-burst__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px solid var(--lb-color);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
}

.like-burst__input:checked ~ .like-burst__heart .like-burst__ring {
  animation: like-burst-ring 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.14s;
}

@keyframes like-burst-ring {
  0%   { opacity: 0.85; transform: scale(0.3); }
  100% { opacity: 0;    transform: scale(1.9); }
}

/* --- Particules ------------------------------------------------------------ */

.like-burst__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.like-burst__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--lb-color);
  opacity: 0;
}

/* particules paires : plus petites, teinte chaude n° 2 */
.like-burst__dot--2,
.like-burst__dot--4,
.like-burst__dot--6,
.like-burst__dot--8,
.like-burst__dot--10,
.like-burst__dot--12 {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--lb-spark);
}

/* étoile à 12 branches : positions finales précalculées (x, y) */
.like-burst__dot--1  { --lb-x: 0px;    --lb-y: -34px; }
.like-burst__dot--2  { --lb-x: 13px;   --lb-y: -23px; }
.like-burst__dot--3  { --lb-x: 29px;   --lb-y: -17px; }
.like-burst__dot--4  { --lb-x: 26px;   --lb-y: 0px; }
.like-burst__dot--5  { --lb-x: 29px;   --lb-y: 17px; }
.like-burst__dot--6  { --lb-x: 13px;   --lb-y: 23px; }
.like-burst__dot--7  { --lb-x: 0px;    --lb-y: 34px; }
.like-burst__dot--8  { --lb-x: -13px;  --lb-y: 23px; }
.like-burst__dot--9  { --lb-x: -29px;  --lb-y: 17px; }
.like-burst__dot--10 { --lb-x: -26px;  --lb-y: 0px; }
.like-burst__dot--11 { --lb-x: -29px;  --lb-y: -17px; }
.like-burst__dot--12 { --lb-x: -13px;  --lb-y: -23px; }

.like-burst__input:checked ~ .like-burst__heart .like-burst__dot {
  animation: like-burst-dot 0.7s cubic-bezier(0.16, 0.84, 0.32, 1) 0.18s;
}

.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--2,
.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--4,
.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--6,
.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--8,
.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--10,
.like-burst__input:checked ~ .like-burst__heart .like-burst__dot--12 {
  animation-duration: 0.6s;
  animation-delay: 0.24s;
}

/* gicle en étoile, puis retombe (dérive verticale + fondu) */
@keyframes like-burst-dot {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  14%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(var(--lb-x, 0px), var(--lb-y, -30px)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--lb-x, 0px) * 1.08), calc(var(--lb-y, -30px) + 14px)) scale(0.3); }
}

/* --- Compteur (roll) -------------------------------------------------------- */

.like-burst__count {
  display: grid;
  overflow: hidden;
  min-width: 2ch;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--ml-muted, #8b91a3);
  transition: color 0.25s ease 0.18s;
}

.like-burst__num {
  grid-area: 1 / 1;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}

.like-burst__num--on {
  transform: translateY(115%);
  opacity: 0;
}

.like-burst__input:checked ~ .like-burst__count {
  color: var(--ml-fg, #e8eaf2);
}

.like-burst__input:checked ~ .like-burst__count .like-burst__num--off {
  transform: translateY(-115%);
  opacity: 0;
  transition-delay: 0.18s, 0.18s;
}

.like-burst__input:checked ~ .like-burst__count .like-burst__num--on {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.18s, 0.18s;
}

/* --- Wrapper de démo (galerie) ----------------------------------------------- */

.like-burst-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.like-burst-demo__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ml-muted, #8b91a3);
}

/* --- Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .like-burst__input:checked ~ .like-burst__heart .like-burst__svg,
  .like-burst__input:checked ~ .like-burst__heart .like-burst__ring,
  .like-burst__input:checked ~ .like-burst__heart .like-burst__dot {
    animation: none;
  }

  .like-burst__svg,
  .like-burst__shape,
  .like-burst__num,
  .like-burst__count {
    transition-duration: 0.01s;
  }

  .like-burst:hover .like-burst__svg {
    transform: none;
  }

  .like-burst__input:active ~ .like-burst__heart .like-burst__shape {
    transform: none;
  }

  .like-burst__input:checked ~ .like-burst__count .like-burst__num--off,
  .like-burst__input:checked ~ .like-burst__count .like-burst__num--on {
    transition-delay: 0s, 0s;
  }
}