/* ============================================================
   Tactizen - the status bar, awake
   ------------------------------------------------------------
   Energy, wellness, gold and local currency sit in the chrome of
   every page, and until now they changed silently: you worked,
   the page reloaded, a number was simply different.

   Two changes, both additive - nothing here moves or resizes an
   existing element.

     1. A value that changed since you last saw this page counts
        up to its new figure and floats the difference above
        itself. Green for a gain, red for a spend.
     2. Wellness and energy read as resources rather than
        readouts: a bar that is still filling carries a slow
        sheen and states its rate, a full one goes quiet.

   Rate and fullness both come from real data - the per-hour
   regen summary the tooltip already uses - so a calm bar means
   you genuinely are not regenerating.
   ============================================================ */

/* ---------- 1. deltas ---------- */

[data-tz-stat] {
  position: relative;
}

.tz-delta {
  position: absolute;
  right: 0.4rem;
  bottom: 100%;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--tz-font-display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(var(--tz-black-rgb), 0.7);
  color: var(--tz-delta-color, var(--tz-green-400));
  animation: tz-delta-rise 1.5s var(--tz-ease-out) forwards;
}

.tz-delta.is-loss {
  --tz-delta-color: var(--tz-red-400, #f87171);
}

@keyframes tz-delta-rise {
  0%   { opacity: 0; transform: translateY(4px)   scale(0.9); }
  18%  { opacity: 1; transform: translateY(-2px)  scale(1.06); }
  32%  {             transform: translateY(-4px)  scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(1); }
}

/* The figure itself acknowledges the change. */
.tz-stat-ticking {
  animation: tz-stat-bump 0.5s var(--tz-ease-out);
}

@keyframes tz-stat-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* ---------- 2. living bars ---------- */

/* The fill already carries its colour inline; this only adds the
   moving edge, so a bar with no regen keeps exactly its old look. */
.tz-bar-live {
  position: relative;
  overflow: hidden;
}

.tz-bar-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--tz-white-rgb), 0.42) 45%,
    rgba(var(--tz-white-rgb), 0.6) 50%,
    rgba(var(--tz-white-rgb), 0.42) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: tz-bar-crawl 3.6s var(--tz-ease-in-out) infinite;
}

@keyframes tz-bar-crawl {
  0%       { transform: translateX(-100%); }
  60%,100% { transform: translateX(100%); }
}

/* The rate, said plainly, on the line the big number already
   occupies - free space to its right, so nothing reflows. */
.tz-stat-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.tz-rate {
  font-family: var(--tz-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tz-rate-color, var(--tz-gray-400));
  opacity: 0.9;
}

.tz-rate.is-full {
  color: var(--tz-gray-500);
  opacity: 0.75;
}

/* ---------- quality floor ---------- */
@media (prefers-reduced-motion: reduce) {
  .tz-delta {
    animation: none;
    opacity: 1;
    transform: translateY(-6px);
  }
  .tz-stat-ticking { animation: none; }
  .tz-bar-live::after { animation: none; opacity: 0.28; transform: none; }
}