/* Soft Spotlight / Gentle Current. Original figures reserve the layout footprint.
   Redistribute the rows within the surrounding whitespace, without growing the hero. */
:is(#flipBand, #mpBand, #rosterBand, #dbBand).metric-spaced > div {
  position: relative;
  top: -4px;
}
:is(#flipBand, #mpBand, #rosterBand, #rankBand, #dbBand).metric-spaced > div:nth-child(n+3) {
  position: relative;
  top: 10px;
}
:is(#flipBand, #mpBand, #rosterBand, #rankBand, #dbBand) .metric-number {
  position: relative;
}
:is(#flipBand, #mpBand, #rosterBand, #rankBand, #dbBand) .metric-reserve {
  display: contents;
  visibility: hidden;
  font: inherit;
  color: inherit;
}
:is(#flipBand, #mpBand, #rosterBand, #rankBand, #dbBand) .metric-value {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: 0;
  color: inherit;
  font: 700 2rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  isolation: isolate;
  text-shadow: 0 0 24px color-mix(in srgb, currentColor 15%, transparent);
}
.metric-value .stub-mark { --coin: .62em; width: .62em; height: .62em; margin: 0; flex: none; }
:is(#flipBand, #mpBand, #rosterBand, #rankBand, #dbBand) .metric-value .pulse-mark {
  display: inline-flex; align-items: center; margin: 0; font: inherit; color: inherit;
}
.metric-value .pulse-mark svg { width: .55em; height: .4em; }
.metric-value::before, .metric-value::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -8px -80px -10px -12px;
  background: radial-gradient(ellipse at 24% 60%, color-mix(in srgb, currentColor 15%, transparent), transparent 59%);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 50%, transparent 95%);
  animation: metric-current 10s ease-in-out var(--metric-phase) infinite paused;
}
.metric-value::after {
  background: radial-gradient(ellipse at 35% 40%, color-mix(in srgb, currentColor 12%, transparent), transparent 56%);
  animation-name: metric-countercurrent; animation-duration: 14s;
}
.metric-visible .metric-value::before, .metric-visible .metric-value::after { animation-play-state: running; }
.metric-page-hidden .metric-value::before, .metric-page-hidden .metric-value::after { animation-play-state: paused; }
@keyframes metric-current {
  0%, 100% { transform: translate(-16px, 3px) scaleY(.83); opacity: .55; }
  50% { transform: translate(20px, -3px) scaleY(1.12); opacity: .95; }
}
@keyframes metric-countercurrent {
  0%, 100% { transform: translate(18px, -3px) scaleY(1.08); opacity: .8; }
  50% { transform: translate(-12px, 4px) scaleY(.85); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .metric-value::before, .metric-value::after { animation: none; }
}