/* ============================================================
   Counter: shared between truck.html and index.html
   1:1 with Figma "Lateral View" (2449:546). Depends on tokens.css
   ============================================================ */

.counter-scene {
  position: relative;
  background: var(--color-night);
  color: var(--color-white);
  overflow: hidden;
}

/* --- Side tick lines ------------------------------------
   Drawn in CSS (not the 720px SVG) so they repeat and fill any
   height: white 2px ticks every 68.556px, aligned to the vertical
   center, where the volt tick + nib sit (Figma "Lines"). -------- */
.counter-scene {
  --tick-w: 22px;
  --tick-gap: 68.556px;
  --tick-inset: 32px;
}
.counter-scene__lines {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--tick-w) * 2);
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      transparent calc(50% - 1px), var(--color-white) calc(50% - 1px),
      var(--color-white) calc(50% + 1px), transparent calc(50% + 1px))
    right 0 top 50% / var(--tick-w) var(--tick-gap) repeat-y;
}
/* Volt center tick (outer half) ... */
.counter-scene__lines::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--tick-w);
  height: 2px;
  margin-top: -1px;
  background: var(--color-volt);
}
/* ... and its 7px nib on the outer side */
.counter-scene__lines::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--tick-w);
  height: 7px;
  margin-top: -3.5px;
  background: var(--color-volt);
}
.counter-scene__lines--left  { left: var(--tick-inset); }
.counter-scene__lines--right { right: var(--tick-inset); transform: scaleX(-1); }

/* --- LIVE pill ------------------------------------------- */
.live {
  position: absolute;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08);
}
.live__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-volt);
}
.live__dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 6px solid rgba(153, 255, 75, 0.2);
  animation: live-pulse 1.8s var(--ease-in-out) infinite;
}
.live__label {
  font-family: var(--font-secondary);
  font-weight: var(--weight-medium);
  font-size: 18px;
  line-height: 12px; /* Figma trims to cap height: pill is 110×44 */
  letter-spacing: 0.12em;
  margin-right: -0.12em; /* drop the trailing tracking */
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .live__dot::before { animation: none; }
}

/* --- Counter block ---------------------------------------- */
.counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-inline: 96px;
  text-align: center;
}
.counter__time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: 180px;
  line-height: 1;
  /* Tabular lining figures, as in Figma (tnum + lnum):
     "15d 21:13:00" = 1015px at 180px */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  color: var(--color-volt);
}
.counter__days  { color: var(--color-volt); }
.counter__clock { color: var(--color-white); }
.counter__headline {
  font-family: var(--font-secondary);
  font-weight: var(--weight-light);
  font-size: 56px;
  line-height: 1.2;
  color: var(--color-white);
}

/* --- Drums: masked wheels, one per unit ------------------------
   Rows are positioned by js (translate by distance from the current
   value); the container is a slot masked top and bottom, so the
   outgoing number fades out as it slides down and the next fades in
   from above. Only the current value is visible at rest. ---------- */
.counter__time--drums {
  position: relative;
  /* Slot taller than the line so the fade zones sit clear of the
     glyphs: the number in view is fully opaque, only the outgoing and
     incoming numbers fade. Negative margins keep the layout box at 1em
     (200px), like the Figma text. */
  height: 1.5em;
  margin-block: -0.25em;
  align-items: stretch;
  /* Hidden until the font has loaded and widths are fixed (js adds
     .is-ready to the scene), then a plain fade: no sliding on page load */
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.counter-scene.is-ready .counter__time--drums { opacity: 1; }
/* Clock group: hh:mm:ss wheels with static colons */
.counter__clock {
  display: inline-flex;
  align-items: stretch;
  height: 100%;
}
.counter__colon {
  display: flex;
  align-items: center;
  line-height: 1;
}
.drum {
  position: relative;
  width: 2.15em; /* fixed by js to the live label's width */
  height: 100%;
  /* no width transition: columns must never slide */
  /* CoFo digits span 24%–71% of the 1.5em slot (measured); the opaque
     band clears them with margin, centred on the glyphs */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 79%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 79%, transparent 100%);
}
.drum__probe { visibility: hidden; pointer-events: none; }
.drum__row {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}