/* Comparison surfaces travel through the reel as a single card. */
.stage.scroll-showcase .compare-card { overflow: hidden; }
.stage.scroll-showcase .compare-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  animation: none;
  pointer-events: none;
  user-select: none;
}
.compare-card .comparison-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
/* Decoded previews remain split while moving; only interaction waits for settling. */
.compare-card:not([data-ready="true"]) .comparison-before,
.compare-card:not([data-ready="true"]) .comparison-divider,
.compare-card:not([data-ready="true"]) .comparison-labels { visibility: hidden; }
.comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  transform: translateX(-50%);
  background: #edaa61;
  pointer-events: none;
}
.comparison-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 44px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 3px #0007);
}
.comparison-grip svg { width: 40px; height: 24px; fill: none; stroke: white; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.comparison-labels { position: absolute; inset: auto 12px 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.comparison-labels span { padding: 5px 8px; color: white; background: #171916b8; font: 12px/1.2 var(--sans); }
.comparison-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none;
  touch-action: pan-y;
}
.compare-card[data-active="true"] .comparison-input { pointer-events: auto; }
.compare-card:has(.comparison-input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 5px; }
.compare-card:has(.comparison-input:focus-visible) .comparison-grip { background: #171916b8; border-radius: 3px; }
@media (max-width: 560px) {
  .comparison-labels { inset: auto 8px 8px; }
  .comparison-labels span { font-size: 11px; }
}