/* Meter bar: each icon is a gauge. Faint track, bright fill from the bottom, flash on the slice that moved. */
.meters {
  background: var(--bar);
  border-bottom: 3px solid #0a0d1f;
  display: flex;
  justify-content: space-evenly;
  align-items: end;
  padding: clamp(18px, 3.4vh, 40px) 32px clamp(16px, 3vh, 34px);
}

.meter {
  --level: 50;
  --lo: 50;
  --hi: 50;
  --size: clamp(44px, 7.4vh, 78px);
  position: relative;
  width: var(--size);
  height: var(--size);
}

.meter-icon {
  position: absolute; inset: 0;
  color: var(--bar-ink);
  svg { width: 100%; height: 100%; display: block; }
}
.meter-icon svg { overflow: visible; }
/* empty track: the same glyph in a dim tan, like Reigns; the cream fill rises over it with a crisp line */
.meter-track { color: color-mix(in srgb, var(--gold) 38%, var(--bar)); }
.meter-fill {
  clip-path: inset(calc((100 - var(--level)) * 1%) -6px -6px -6px);
  transition: clip-path .8s cubic-bezier(.3, .7, .2, 1);
}
/* resolve: the whole gauge flashes green (up) or red (down) while its fill line travels */
.meter.up .meter-fill { animation: meter-tint-up 1.4s ease-out; }
.meter.down .meter-fill { animation: meter-tint-down 1.4s ease-out; }
@keyframes meter-tint-up { 0%, 35% { color: #6fe08a; filter: drop-shadow(0 0 6px #3fd06a); } }
@keyframes meter-tint-down { 0%, 35% { color: #ff5a46; filter: drop-shadow(0 0 6px #ff3a2a); } }
.meter.up, .meter.down { animation: meter-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes meter-pop { 40% { scale: 1.12; } }
/* the band between old and new value, coloured by direction, fading out */
.meter-delta {
  clip-path: inset(calc((100 - var(--hi)) * 1%) -6px calc(var(--lo) * 1%) -6px);
  opacity: 0;
}
.meter.up .meter-delta { color: #6fe08a; animation: meter-flash 1.8s ease-in forwards; }
.meter.down .meter-delta { color: #ff4b3a; animation: meter-flash 1.8s ease-in forwards; }
@keyframes meter-flash { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* direction-free preview: a dot above the icon, bigger for bigger effects */
.meter-dot {
  position: absolute;
  left: 50%; top: -14px;
  width: 16px; height: 16px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bar-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-ink) 22%, transparent);
  scale: 0;
  transition: scale .18s cubic-bezier(.3, 1.6, .5, 1);
}
/* sizes set here (not by scale) so every breakpoint gets the same readable small/big contrast */
.meter[data-preview="small"] .meter-dot { width: 11px; height: 11px; scale: 1; top: -13px; }
.meter[data-preview="big"] .meter-dot { width: 19px; height: 19px; scale: 1; top: -13px; }

@media (prefers-reduced-motion: reduce) {
  .meter-fill, .meter-dot { transition: none; }
  .meter.up, .meter.down { animation: none; }
}