/* BATTLE MVP - mm2 hero effects. Additive, namespace .mm2fx-*
   Accent comes from the EXISTING --acc token (play/index.php:500 sets
   --acc:#3a9fff on .mm2-team). No parallel colour system is introduced.
   Never reuse .mm2-* class names here: that namespace belongs to markup. */

@property --mm2fx-p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.mm2-hero,
.mm2-metrics,
.mm2-chips,
.mm2-maps-h {
  --mm2fx-dim: rgba(234, 241, 255, .10);
}

/* ---------- Icons: mask instead of hue-rotate ----------
   hue-rotate() rotates every colour of a multi-colour SVG independently,
   which is why the gold trophy turned green in 5v5 (line 537).
   Masking discards source colours and paints the shape with --acc. */
.mm2fx-ic {
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background-color: var(--acc, #00ffa6);
  -webkit-mask: var(--mm2fx-src) center / contain no-repeat;
  mask: var(--mm2fx-src) center / contain no-repeat;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--acc, #00ffa6) 22%, transparent));
}
/* Legacy rule 537 targets .mm2-metric-ic only, so masked icons are already
   free of hue-rotate. This override exists purely as a safety net if both
   classes ever land on one element. */
.mm2-team .mm2fx-ic { filter: drop-shadow(0 3px 10px rgba(58, 159, 255, .24)); }

@media (max-width: 900px) {
  .mm2fx-ic { width: 40px; height: 40px; }
}

/* ---------- Calibration ring ---------- */
.mm2fx-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: conic-gradient(
    var(--acc, #00ffa6) calc(var(--mm2fx-p) * 360deg),
    var(--mm2fx-dim, rgba(234, 241, 255, .10)) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  transition: --mm2fx-p .9s cubic-bezier(.22, .61, .36, 1);
}
.mm2fx-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mm2fx-ring-tx {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  color: var(--acc, #00ffa6);
}

/* ---------- Locked metric (honest empty state) ---------- */
.mm2fx-locked { opacity: .45; filter: saturate(.35); }
.mm2fx-lock-tx {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(234, 241, 255, .55);
}

/* ---------- Heartbeat dot ----------
   Scoped to .mm2fx-dot. The existing .mm2-chip-srv status colours
   (is-ok / is-busy / is-off, lines 736-748) are NOT touched here. */
.mm2fx-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc, #00ffa6);
}
.mm2fx-dot[data-state="fresh"] { animation: mm2fx-pulse 2.4s ease-out infinite; }
.mm2fx-dot[data-state="stale"] {
  background: rgba(234, 241, 255, .28);
  box-shadow: none;
}
@keyframes mm2fx-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--acc, #00ffa6) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc, #00ffa6) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--acc, #00ffa6) 0%,  transparent); }
}

/* ---------- Reveal on scroll ---------- */
.mm2fx-reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.mm2fx-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .mm2fx-ring { transition: none; }
  .mm2fx-dot[data-state="fresh"] { animation: none; }
  .mm2fx-reveal { opacity: 1; transform: none; transition: none; }
}