/* CW-ARCADE — MICROFILM / OPTICAL MAGNIFIER STATISTIC STREAM
   Adapted from "Codepen_Repos/Glass Displacement panel effect
   (AMAZING)": a real SVG feImage + per-channel feDisplacementMap +
   feColorMatrix + feBlend chain drives backdrop-filter:url(#filter)
   on a stationary rectangular lens (Chromium) — genuine optical
   refraction of whatever slide is passing underneath it, never a
   frosted/blurred panel. The lens carries NO frost tint of its own —
   zero background fill — so nothing about it reads as milky glass;
   the only "it's glass" cues are the SVG-driven edge bend and a thin
   rim highlight. Firefox/Safari get a transparent-body fallback with
   no distortion (see js/glass-scroller.js).

   Cards are microfilm frames on a thin recessed rail: authored at
   their natural, fully-readable size but held at ~22% scale (tiny,
   illegible) at rest, and eased up to exactly that natural size only
   while centered under the lens (see --cardscale, driven from JS by
   proximity to the lens). That magnification is a plain CSS transform
   that runs in every browser regardless of SVG backdrop-filter
   support — the lens's own refraction only ever bends the tiny
   neighboring frames and empty rail around the focused card, never
   the focused card itself. */

.glass-scroller {
  position: relative;
  margin-top: var(--space-20);
  height: clamp(300px, 30vw, 366px);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.glass-scroller:active {
  cursor: grabbing;
}

/* ---------- Microfilm rail: a thin recessed track the slides ride on,
   rather than a bare row of cards floating in space. ---------- */
.glass-scroller__rail {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hairline-strong) 10%,
    var(--hairline-strong) 90%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.glass-scroller__rail::before {
  content: "";
  position: absolute;
  inset: -10px 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 22px
  );
  opacity: 0.6;
}

.glass-scroller__track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  will-change: transform;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.stat-card {
  /* Matches TINY in js/glass-scroller.js — the resting, illegible
     scale. JS overwrites this every frame once running; this is only
     the no-JS/first-paint fallback, so the first frame doesn't flash
     full-size cards before the script shrinks them. */
  --cardscale: 0.13;
  flex: none;
  width: clamp(176px, 15vw, 222px);
  height: clamp(176px, 15vw, 222px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  /* Solid opaque backing, not just a translucent tint — the card
     centered under the lens scales up ~1.3-1.4x (spec), which easily
     exceeds the rail's tight gap and visually overlaps its immediate
     neighbor. A translucent card would let that neighbor bleed
     through, and the lens's own displacement filter would then sample
     both cards' overlapping content at once, reading as broken,
     doubled ghost text instead of one clean magnified slide. */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--graphite-900);
  border: 1px solid var(--hairline);
  transform: scale(var(--cardscale));
  transform-origin: center;
  filter: brightness(calc(1 + 0.22 * var(--emph, 0))) saturate(calc(1 + 0.2 * var(--emph, 0)));
  /* Opacity is an instant cut, not a crossfade: this card is the one
     still passing through the SVG chromatic-displacement filter (see
     .glass-scroller__lens-surface), so ANY window where it's still
     partly visible while the crisp unfiltered readout fades in on top
     of it shows up as doubled/RGB-fringed ghost text under the glass —
     exactly the "looks broken/frosted" read this needs to never have.
     box-shadow keeps its own separate, still-smooth transition. */
  transition: box-shadow 120ms linear, opacity 0ms;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4),
    0 0 calc(40px * var(--emph, 0)) rgba(0, 173, 252, calc(0.5 * var(--emph, 0)));
  position: relative;
  /* The focused/scaling card must render above its now-overlapping
     neighbors, not just visually match them in opacity. */
  z-index: calc(2 + var(--emph, 0) * 10);
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.stat-card__label {
  margin-top: var(--space-2);
  font-size: 0.78rem;
  color: var(--ink-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stat-card__source {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-ghost);
}

/* ---------- The lens: rectangular/square-ish optical plate, fixed at
   horizontal center, NOT circular, NOT frosted. Sized to hug ONE
   focused card with a small margin — not a large picture-frame that
   can straddle two cards at once during a transition, which is what
   was actually reading as "not micro" (a big glass slab you can see
   two neighbors' worth of content through) rather than a tight
   magnifier window over a single frame of microfilm. ---------- */
.glass-scroller__lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(216px, 17vw, 258px);
  height: clamp(190px, 15vw, 224px);
  transform: translate(-50%, -50%);
  border-radius: 16px;
  pointer-events: none;
  z-index: 3;
}

.glass-scroller__lens,
.glass-scroller__lens * {
  pointer-events: none;
}

.glass-scroller__lens-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  /* No fill at all — a frosted panel is exactly what this must NOT
     look like. The only surface cues are a thin edge-on rim below;
     everything else is the backdrop-filter bending what's behind it.
     Deliberately no soft ambient inset glow and no big outer drop
     shadow here — either of those reads, in a static frame, as a lit
     translucent slab sitting on top of the content rather than a
     nearly-invisible pane bending light around its own edge. */
  background: transparent;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.24) inset,
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    inset 1.5px 1.5px 0 rgba(0, 173, 252, 0.28),
    inset -1.5px -1.5px 0 rgba(124, 92, 255, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

/* Slow specular sweep: a soft diagonal light band drifting across the
   plate on a loop — the cue a static bevel alone can't sell, that
   this is a lit pane of glass rather than a cutout. Screen-blended
   and low-opacity so it reads as a highlight passing over the
   refracted content, never as a bright film sitting on top of it. */
.glass-scroller__lens-surface::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(0, 173, 252, 0.16) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: glass-lens-sweep 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes glass-lens-sweep {
  0%,
  100% {
    transform: translate3d(-38%, -18%, 0);
  }
  50% {
    transform: translate3d(38%, 18%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-scroller__lens-surface::before {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

/* Real refraction path (Chromium): filter reference applied via JS
   adding this class once feature-detected. Saturate only — no
   brightness lift — so the plate reads as bending/refracting light,
   never as a bright translucent film laid over the content. */
.glass-scroller.has-svg-backdrop .glass-scroller__lens-surface {
  backdrop-filter: url(#glass-lens-filter) saturate(1.15);
  -webkit-backdrop-filter: url(#glass-lens-filter) saturate(1.15);
}

/* Fallback path: SVG backdrop-filter unsupported (Firefox/Safari) —
   stays transparent, never milky. The card's own --cardscale
   magnification still runs (it isn't gated on SVG support at all),
   so the "it got bigger passing under the lens" read survives here
   too; only the true pixel-displacement edge-bend is Chromium-only. */
.glass-scroller:not(.has-svg-backdrop) .glass-scroller__lens-surface {
  backdrop-filter: blur(1px) saturate(1.1);
  -webkit-backdrop-filter: blur(1px) saturate(1.1);
}

/* The crisp "in focus" read-out. backdrop-filter distorts everything
   BEHIND the lens plate, and empirically that includes the interior
   of the flat/"undistorted" zone of the displacement map too once
   real fine text is involved (the reference pen never actually tests
   this — its "dock" preset's icons are this exact same trick: a real,
   undistorted DOM layer stacked ON TOP of the lens plate, never fed
   through backdrop-filter at all). A clone of whichever card is
   currently centered fades in here, opaque and completely unfiltered,
   covering the (still-growing, still behind-the-glass) real card
   underneath right as it settles — the surroundings around it keep
   bending through the glass below, but the card itself is never seen
   through the glass, only in front of it. */
.glass-scroller__readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0ms;
}

.glass-scroller__readout .stat-card {
  --cardscale: 1;
  --emph: 1;
  transform: none;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
}

.glass-scroller__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 10vw, 160px);
  z-index: 4;
  pointer-events: none;
}

.glass-scroller__fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--graphite-900), transparent);
}

.glass-scroller__fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--graphite-900), transparent);
}

.glass-scroller__hint {
  position: absolute;
  bottom: -46px;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.glass-scroller__svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}