/* ============================================================
   04 - BENCHMARKS: before/after drag-compare
   Two stacked 16:9 shots in one frame. The BEFORE shot is clipped by
   clip-path from the right edge, so the reveal is a single custom
   property (--pos) that the line, the handle and the clip all read.
   No wrapper resizing, so neither image can ever distort.
   Tokens only: baby-blue accent, hairline borders, cool near-black.
   Classes prefixed .bench-.
   ============================================================ */

.bench-stage {
  width: 100%;
  max-width: 960px;                 /* wider than the 900px text column, still calm */
  margin: clamp(26px, 3.6vw, 38px) auto 0;
}

/* ---------- scene tabs ---------- */
.bench-tabs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: clamp(14px, 1.8vw, 18px);
}
.bench-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.bench-tab:hover:not([disabled]) { color: var(--text); background: var(--surface-2); border-color: var(--hairline-strong); }
.bench-tab.is-active {
  color: var(--text);
  background: var(--accent-grad-soft);
  border-color: rgba(122,197,240,.45);
}
.bench-tab[disabled] { cursor: default; color: var(--text-faint); opacity: .75; }
/* "coming soon" marker on a scene whose art is not shot yet */
.bench-soon {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-mute);
}

/* ---------- the compare frame ---------- */
.bench-frame {
  --pos: 50%;                        /* single source of truth for the split */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  box-shadow: var(--shadow-lg);
  cursor: ew-resize;
  touch-action: pan-y;               /* vertical swipes still scroll the page */
  -webkit-user-select: none; user-select: none;
}
.bench-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                 /* frame is 16:9 and art is 16:9, so no crop */
  -webkit-user-drag: none;
  pointer-events: none;
}
.bench-shot--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path var(--t) var(--e-out);
}

/* ---------- divider line + grab handle ---------- */
.bench-line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos); width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(122,197,240,.25), var(--accent) 16%, var(--accent) 84%, rgba(122,197,240,.25));
  box-shadow: 0 0 20px -2px rgba(95,174,236,.6);
  pointer-events: none;
  transition: left var(--t) var(--e-out);
}
.bench-handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,14,22,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(122,197,240,.55);
  color: var(--blue-100);
  cursor: ew-resize;
  touch-action: none;                /* the handle itself never scrolls the page */
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.85), var(--glow-soft);
  transition: left var(--t) var(--e-out), background var(--t), border-color var(--t), transform var(--t-fast) var(--e-out);
}
.bench-handle svg { width: 22px; height: 22px; }
.bench-handle:hover { background: rgba(14,20,32,.86); border-color: rgba(122,197,240,.8); }
.bench-handle:focus-visible { border-radius: 50%; outline: 2px solid var(--accent); outline-offset: 4px; }
/* focus that came from a pointer drag, not the keyboard: no ring until a key is used */
.bench-handle[data-pointer-focus]:focus-visible { outline: none; }
/* while dragging, the split must track the pointer exactly, so no easing */
.bench-frame.is-dragging { cursor: ew-resize; }
.bench-frame.is-dragging .bench-shot--before,
.bench-frame.is-dragging .bench-line,
.bench-frame.is-dragging .bench-handle { transition: none; }
.bench-frame.is-dragging .bench-handle { transform: translate(-50%, -50%) scale(1.06); }

/* ---------- corner label chips ---------- */
.bench-chip {
  position: absolute; top: 14px; z-index: 2;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(8,11,17,.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-strong);
  color: var(--text-dim);
  pointer-events: none;
  transition: opacity var(--t);
}
.bench-chip--before { left: 14px; }
.bench-chip--after {
  right: 14px;
  color: var(--blue-100);
  border-color: rgba(122,197,240,.42);
  background: rgba(10,20,32,.7);
}
/* a chip fades out once its own side of the image is gone */
.bench-chip.is-faded { opacity: 0; }

/* ---------- helper line + honest caption ---------- */
.bench-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
  font-size: 12.5px; color: var(--text-mute);
}
.bench-hint svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
/* the honesty line stays at --text-mute, not --text-faint: it is the one caption
   on the page that has to be readable, not decorative */
.bench-cap {
  margin: clamp(18px, 2.4vw, 24px) auto 0;
  text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--text-mute);
  max-width: 72ch;
}

/* ============================================================
   Responsive (checked at 1440 / 1024 / 768 / 480 / 380, no overflow)
   ============================================================ */
@media (max-width: 620px) {
  .bench-tab { padding: 8px 13px; font-size: 12.5px; }
  .bench-handle { width: 44px; height: 44px; }
  .bench-handle svg { width: 19px; height: 19px; }
  .bench-chip { top: 10px; padding: 5px 10px; font-size: 10px; letter-spacing: .08em; }
  .bench-chip--before { left: 10px; }
  .bench-chip--after { right: 10px; }
  .bench-hint { font-size: 12px; }
}
@media (max-width: 400px) {
  .bench-tabs { gap: 6px; }
  .bench-tab { padding: 7px 11px; font-size: 12px; }
  .bench-soon { display: none; }         /* the disabled state still reads */
  .bench-frame { border-radius: var(--r-md); }
  .bench-handle { width: 40px; height: 40px; }
  /* the hint wraps to two lines here, so drop the decorative icon and centre it */
  .bench-hint { line-height: 1.45; text-align: center; }
  .bench-hint svg { display: none; }
}

/* ---------- Reduced motion: the split still moves, it just never eases ---------- */
@media (prefers-reduced-motion: reduce) {
  .bench-shot--before, .bench-line, .bench-handle, .bench-chip, .bench-tab { transition: none; }
  .bench-frame.is-dragging .bench-handle { transform: translate(-50%, -50%); }
}

/* The measured figure inside each label chip. Instrument face with tabular
   figures so the two numbers align optically despite different digit counts. */
.bench-fps {
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: 7px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.22);
}
.bench-chip--after .bench-fps { color: var(--accent); }