@keyframes breathe {
  0%, 100% { border-color: var(--mavroon-border); }
  50%      { border-color: var(--mavroon-border); }
}

@keyframes gold-glow {
  0%   { box-shadow: var(--shadow-xs); }
  50%  { box-shadow: var(--shadow-xs); }
  100% { box-shadow: var(--shadow-xs); }
}

@keyframes gold-border-in {
  0%   { border-color: var(--border); }
  100% { border-color: var(--mavroon); }
}

@keyframes bar-rise {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes wipe-in-right {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes wipe-out-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes number-roll {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes stale-pulse {
  0%, 100% { border-color: var(--stale-amber); }
  50%      { border-color: var(--gold-dim); }
}

.card--fresh {
  outline: 2px solid var(--mavroon-border);
  outline-offset: -1px;
  animation: breathe 3s ease-in-out infinite;
}

.card--stale {
  outline: 2px dashed var(--stale-amber);
  outline-offset: -1px;
  background: var(--stale-amber-dim);
}

.card--gold-earned {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-xs);
  animation: gold-border-in 600ms ease forwards;
}

.card--gold-earned .card-value,
.card--gold-earned .ga4-primary-value,
.card--gold-earned .ga4-metric-value {
  color:var(--mavroon);
}

.card--gold-earned .card-label,
.card--gold-earned .ga4-primary-label {
  color:var(--mavroon);
}


.card--gold-earned::after {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  border-radius: inherit;
  animation: gold-glow 1200ms ease-out forwards;
}

.card--gold-earned {
  position: relative;
}

.view-panel {
  display: none;
  overflow: hidden;
}

.view-panel.active {
  display: block;
}

.view-exit {
  animation: wipe-out-left var(--wipe-duration) var(--wipe-ease) forwards;
}

.view-enter {
  animation: wipe-in-right var(--wipe-duration) var(--wipe-ease) forwards;
}

.number-roll {
  display: inline-block;
  overflow: hidden;
}

.number-roll-inner {
  display: inline-block;
  animation: number-roll 300ms var(--ease-out) forwards;
}

.bar-rise {
  transform-origin: bottom;
  animation: bar-rise 400ms var(--ease-out) forwards;
}

.freshness-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.freshness-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
  flex-shrink: 0;
}

.freshness-dot--fresh {
  background: var(--status-good);
  animation: breathe-dot 2s ease-in-out infinite;
}

.freshness-dot--normal {
  background: var(--text-muted);
}

.freshness-dot--stale {
  background: var(--stale-amber);
}

@keyframes breathe-dot {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.card-skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
  min-height: 120px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card--fresh { border-color: var(--mavroon-border); }
  .card--gold-earned::after { display: none; }
  .freshness-dot--fresh { opacity: 1; }
}


@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.rise-in { animation: rise-in .5s cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .rise-in { animation: none; }
}