/* ==========================================================================
   Stat highlight — a single oversized stat card, for the one fact that
   deserves to stand on its own instead of cycling through the ambient grid.
   Light card — the shared .glass component is tuned dark (for the navbar's
   dark-glass-on-light-page contrast), too heavy for this context.
   Block: .stat-highlight
   ========================================================================== */

.stat-highlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-7);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  background: var(--color-surface-50);
  /* No real border here — .stat-highlight has none, so the containing
     block's padding edge (what ::after's inset: 0 aligns to) coincides
     exactly with the card's true outer edge. The visible border stroke
     (default gray, green comet sweeping through) is painted entirely by
     ::after, flush with that edge, so nothing sits "in front of" a
     separately-colored border underneath it. */
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(44, 44, 46, 0.08);
}

/* The border itself: a conic-gradient ring (padding + mask xor trick to
   keep only the border-width band), default saturated Apple-green, with a
   brighter light-green comet continuously sweeping around it.
   --stat-glow-angle needs @property to interpolate smoothly instead of
   jump-cutting between keyframes. */
.stat-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(
    from var(--stat-glow-angle, 0deg),
    var(--color-apple-green) 0deg,
    var(--color-apple-green) 220deg,
    #d4f4b8 270deg,
    #d4f4b8 310deg,
    var(--color-apple-green) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: stat-highlight-border-travel 3.5s linear infinite;
}

@property --stat-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes stat-highlight-border-travel {
  to {
    --stat-glow-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-highlight::after {
    animation: none;
    display: none;
  }
}

/* Soft glow behind the number, same visual language as .bg-glow elsewhere */
.stat-highlight::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(227, 0, 27, 0.14) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.stat-highlight > * {
  position: relative;
}

.stat-highlight__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-highlight__number {
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--color-red-light) 0%, var(--color-red) 55%, var(--color-red-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-highlight__plus {
  font-size: 0.6em;
  vertical-align: super;
}

.stat-highlight__label {
  max-width: 220px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
}