/* ==========================================================================
   STATS BOXES — neumorphic 3D gauge cards
   Adapted from: educationalworks88
   https://codepen.io/educationalworks88/pen/oNQvWNJ
   ==========================================================================
   Three hardware-monitor style boxes: GHz / MHz / GW.
   Each box is a 3D neumorphic card with a circular SVG arc gauge and
   a rotating dot indicator. Values update live via setInterval in main.js.

   Mobile-first — visible at all screen sizes.
   Reduced-motion: CSS transitions retained, dot transition disabled.
========================================================================== */

/* Local token — neumorphic indicator colour (disc bg, dot bead, value text in light mode).
   Dark mode overrides these individually via prefers-color-scheme blocks below. */
:root {
  --stat-indicator-color: #444;
}

/* overflow-x: clip + overflow-clip-margin: gauge drop-shadows bleed 2rem
   outside the container before clipping — avoids a hard cut on the shadows. */
.promo-stats {
  margin: 0 auto 4rem;
  max-width: 72rem;
  overflow-clip-margin: content-box 2rem;
  overflow-x: clip;
  padding: 0 var(--grid-gutter);
}

/* Three-box row — wraps on narrow viewports */
.stats-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* ==========================================================================
   Box shell — 3D card with left highlight + right shadow edges
========================================================================== */

.stat-box {
  align-items: center;
  display: flex;
  height: clamp(11.25rem, 41vw, 15rem);
  justify-content: center;
  position: relative;
  width: clamp(10rem, 37vw, 13.75rem);
}

/* Left bright highlight edge */
.stat-box::before {
  background: linear-gradient(#fff, #fff, #e3e3e3);
  content: '';
  filter: blur(1px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 18px;
  z-index: 1;
}

/* Right shadow edge */
.stat-box::after {
  background: #9d9d9d;
  content: '';
  filter: blur(1px);
  height: 100%;
  position: absolute;
  right: -1px;
  top: 1px;
  width: 18px;
  z-index: 1;
}

/* ==========================================================================
   Shadow panel — skewed cast shadows extend right and below
========================================================================== */

.stat-shadow {
  background: #eee;
  height: 100%;
  position: absolute;
  width: 100%;
}

/* Upper-right cast shadow */
.stat-shadow::before {
  background: linear-gradient(rgba(0, 0, 0, 0.075), transparent);
  content: '';
  height: 200%;
  left: calc(100% + 5px);
  position: absolute;
  top: 0;
  transform: skewX(45deg);
  width: 100%;
}

/* Lower-right cast shadow */
.stat-shadow::after {
  background: linear-gradient(rgba(0, 0, 0, 0.075), transparent);
  bottom: -200%;
  content: '';
  height: 200%;
  left: calc(100% + 15px);
  position: absolute;
  transform: skewX(45deg);
  width: 100%;
}

/* ==========================================================================
   Card face — neumorphic grey gradient with layered depth shadows
========================================================================== */

.stat-content {
  align-items: center;
  background: linear-gradient(#dbdae1, #a3aaba);
  box-shadow:
    5px 5px 5px rgba(0, 0, 0, 0.1),
    15px 15px 15px rgba(0, 0, 0, 0.1),
    20px 20px 20px rgba(0, 0, 0, 0.1),
    50px 50px 50px rgba(0, 0, 0, 0.1),
    inset 3px 3px 2px #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

/* ==========================================================================
   Circular SVG gauge
   viewBox="0 0 150 150"; circles at cx/cy=70, r=70, translate(5 5).
   Circumference = 2π×70 ≈ 440 — matches stroke-dasharray below.
   --num (0–100) drives stroke-dashoffset and dot rotation via JS.
========================================================================== */

.stat-percent {
  height: clamp(6.875rem, 25vw, 8.75rem);
  position: relative;
  width: clamp(6.875rem, 25vw, 8.75rem);
}

/* Center disc — shows unit label from data-text attribute */
.stat-percent::before {
  align-items: center;
  background: var(--stat-indicator-color);
  border-radius: 50%;
  color: #fff;
  content: attr(data-text);
  display: flex;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  inset: 16px;
  justify-content: center;
  letter-spacing: 0.05em;
  position: absolute;
  text-transform: uppercase;
}

/* SVG rotated so arc starts at 12 o'clock */
.stat-percent svg {
  height: 100%;
  transform: rotate(-90deg);
  width: 100%;
}

/* Track ring */
.stat-percent svg circle {
  fill: transparent;
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 3;
}

/* Progress arc — length driven by --num (0–100) */
.stat-percent svg circle:nth-child(2) {
  stroke: var(--color-tg, #4af);
  stroke-dasharray: 440;
  stroke-dashoffset: calc(440 - (440 * var(--num, 50)) / 100);
  transition: stroke-dashoffset 1s ease-in-out;
}

/* ==========================================================================
   Rotating dot indicator
   JS sets transform: rotate(Xdeg) directly; transition handles animation.
========================================================================== */

.stat-dot {
  inset: 5px;
  position: absolute;
  transition: transform 1s ease-in-out;
  z-index: 10;
}

/* Dot bead at the 12 o'clock position of the rotating container */
.stat-dot::before {
  background: var(--stat-indicator-color);
  border-radius: 50%;
  content: '';
  height: 0.8125rem;
  left: 50%;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  width: 0.8125rem;
}

/* ==========================================================================
   Value display — number + unit below the gauge
========================================================================== */

.stat-number {
  color: var(--stat-indicator-color);
  font-family: 'Courier New', Courier, monospace;
  margin-top: 0.5rem;
  text-align: center;
}

.stat-val {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  font-weight: 700;
}

.stat-unit {
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 300;
}

/* ==========================================================================
   Dark mode — token-mapped overrides for all hardcoded light values
========================================================================== */

@media (prefers-color-scheme: dark) {
  .stat-box::before {
    background: linear-gradient(#2a2d3a, #1a1d28, #111318);
  }

  .stat-box::after {
    background: #0a0c12;
  }

  .stat-shadow {
    background: #1a1d28;
  }

  .stat-shadow::before,
  .stat-shadow::after {
    background: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
  }

  .stat-content {
    background: linear-gradient(#1e2235, #141720);
    box-shadow:
      5px 5px 5px rgba(0, 0, 0, 0.4),
      15px 15px 15px rgba(0, 0, 0, 0.3),
      20px 20px 20px rgba(0, 0, 0, 0.2),
      50px 50px 50px rgba(0, 0, 0, 0.2),
      inset 3px 3px 2px rgba(255, 255, 255, 0.06);
  }

  .stat-percent::before {
    background: #0b0d10;
    color: var(--color-text);
  }

  .stat-percent svg circle {
    stroke: rgba(255, 255, 255, 0.08);
  }

  .stat-dot::before {
    background: var(--color-text);
  }

  .stat-number {
    color: var(--color-text);
  }
}


/* ==========================================================================
   Reduced motion — disable transitions; keep static state
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .stat-dot {
    transition: none;
  }

  .stat-percent svg circle:nth-child(2) {
    transition: none;
  }
}