/* ========================================================================
   stepkeep — showcase.css
   Screenshot frames, zoom crops, before/after, wide shot, demo video.
   Split from css/components.css; load order in HTML preserves the cascade.
   ======================================================================== */

/* --- Screenshot frames (the "shot" component) ---------------------------- */

.shot {
  margin: 0;
}

.shot__frame {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.shot__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  background: var(--paper-sunk);
  border-bottom: var(--border);
}

.shot__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.shot__url {
  flex: 1;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--clay);
  white-space: nowrap;
}

.shot__rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
}

.shot__caption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--slate);
}

.shot__caption strong {
  color: var(--graphite);
  font-weight: 600;
}

/* --- Zoom tile ------------------------------------------------------------
   A crop of the same render the frame above it shows, at the size the ring and
   the badge were drawn at. The image is written at twice its display width by
   tools/capture.mjs, so `width` here is half the file's own pixels. */

.zoom {
  display: grid;
  grid-template-columns: minmax(0, 218px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.zoom__img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border);
  border-radius: var(--radius);
}

.zoom__cap {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--slate);
}

.zoom__label {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.zoom__cap strong {
  color: var(--graphite);
  font-weight: 600;
}

.zoom--tight {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}

/* --- Before and after ------------------------------------------------------
   Two crops of the same step, the guide's redactions off and on. Stacked rather
   than side by side on purpose: side by side, each tile is about 250px wide and
   the address nobody is supposed to read becomes unreadable for the wrong
   reason. */

.ba {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.ba__tile {
  position: relative;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.ba__img {
  display: block;
  width: 100%;
  height: auto;
}

.ba__label {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Text on Marker is always Ink (§6.2), 6.73:1. */
.ba__label--done {
  background: var(--marker);
  color: #163a2e;
}

.ba__cap {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--slate);
}

/* --- A screenshot given the whole column ---------------------------------- */

.wide-shot {
  margin: clamp(2.5rem, 6vw, var(--sp-8)) 0 0;
}

.wide-shot .shot__caption {
  max-width: var(--measure);
}

/* --- Demo video ---------------------------------------------------------- */

.video {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.video__frame:hover .video__poster {
  transform: scale(1.015);
}

.video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

/* The play button and caption are the resting state main.js sets up; without
   script the browser's own controls are all there is, and once playing they
   take over from the overlay. */
.video__play,
.video__caption {
  display: none;
}

.video__frame.has-overlay .video__play {
  display: grid;
}

.video__frame.has-overlay .video__caption {
  display: flex;
}

.video__play {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.video__caption {
  pointer-events: none;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* display is owned by the .has-overlay rules above, so playing removes it. */
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--marker);
  color: #163a2e;
  box-shadow: 0 2px 6px rgba(22, 58, 46, 0.25);
  transition: transform 0.18s var(--ease);
}

.video__frame:hover .video__play {
  transform: translate(-50%, -50%) scale(1.07);
}

.video__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* display is owned by the .has-overlay rules above, so playing removes it. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  /* Legibility over a screenshot of unknown brightness. */
  background: linear-gradient(to top, rgba(20, 32, 27, 0.86), rgba(20, 32, 27, 0));
  color: var(--paper);
}

.video__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
}

.video__sub {
  font-size: var(--step--1);
  opacity: 0.85;
}