/* ============================================================
   highlights.css — project highlights carousel
   One clip at a time across the full content width, on a track that
   slides sideways to the next when the clip ends. The three points
   sit beneath it, the current one in full ink and the others stepped
   back; a row of steps below, the current one a pill that fills with
   the clip. After Mercury's payments section, set in this
   site's dark case-study palette. Driven by js/highlights.js.

   Without JS the track simply scrolls sideways and every point is
   shown at full strength, so nothing is out of reach.
   ============================================================ */

.highlights {
  --hl-gap: 24px;                         /* between slides on the track */
  --hl-surface: #141417;
  --hl-ease: cubic-bezier(.2, .7, .2, 1);
  --hl-slide: 600ms;
  --hl-btn: 36px;                         /* previous / next, a step under the header's 48px */
}
@media screen and (max-width: 479px) { .highlights { --hl-btn: 32px; } }

/* ── The track ────────────────────────────────────────────── */

/* Clipped square, not rounded: during a slide the gap between two cards
   is part of the motion, and a rounded viewport would eat its corners. */
.highlights__viewport {
  position: relative;
  overflow: hidden;
}
.highlights:not(.is-ready) .highlights__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.highlights__track {
  display: flex;
  gap: var(--hl-gap);
  transform: translateX(calc(var(--hl-index, 0) * (100% + var(--hl-gap)) * -1));
  transition: transform var(--hl-slide) var(--hl-ease);
  will-change: transform;
}

/* The site's global `figure` rule adds a 25px top margin and 20px of
   bottom padding; neither belongs on a slide. */
.highlights__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 1424 / 924;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--hl-surface);
  overflow: hidden;
  scroll-snap-align: start;
}
.highlights__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  pointer-events: none;
}
.highlights__slide img,
.highlights__slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A still whose shape is far enough from the frame's that a crop would cut
   something that matters is shown whole instead, on a ground (--hl-pad)
   matched to its own background so the letterbox doesn't show. */
.highlights__slide--contain { background: var(--hl-pad, var(--hl-surface)); }
.highlights__slide--contain img,
.highlights__slide--contain video { object-fit: contain; }

/* ── The current point ─────────────────────────────────────── */

/* One point at a time, under the clip it describes. All three share a
   single grid cell and cross-fade, so the block is always as tall as the
   longest of them — the counter and arrows below stay put when the clip
   changes, rather than moving by a line or two each time. */
.highlights__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.highlights__item {
  grid-area: 1 / 1;
  margin: 0;                  /* the global `li` rule adds 10px */
  transition: opacity .35s ease, visibility .35s ease;
}
.highlights.is-ready .highlights__item:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}

.highlights__heading { margin: 0 0 8px; }
.highlights__title { display: block; }

/* Held to the page's reading measure (~70 characters). */
.highlights__desc {
  max-width: var(--measure);
  margin: 0;
}

/* ── Steps ─────────────────────────────────────────────────── */

/* One step per clip, each a button. The current one stretches into a pill,
   the same length on every reel, and fills as its clip plays; paused, the
   fill dims. 4px tall, each a 36px tall target. */
.highlights__nav {
  display: none;
  align-items: center;
  min-height: var(--hl-btn);
  margin-top: 40px;
}
.highlights.is-ready .highlights__nav { display: flex; }

/* The step's number, for screen readers only. */
.highlights__count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.highlights__marks { display: flex; align-items: center; gap: 8px; margin-right: 24px; }

/* Previous and next, after the steps: the header's round glass buttons
   (.glass-exit, css/glass-nav.css) at a smaller size, with its chevrons, and its spring on
   hover and press (js/glass-nav.js). */
.highlights__steps { display: flex; gap: 8px; }
.highlights__step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 var(--hl-btn);
  width: var(--hl-btn);
  height: var(--hl-btn);
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-rim);
  color: var(--glass-label-on);
  cursor: pointer;
}
.highlights__step:focus-visible { outline: 2px solid var(--glass-focus); outline-offset: 3px; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .highlights__step { background-color: var(--glass-fill-solid); }
}
.highlights__step svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media screen and (max-width: 479px) {
  .highlights__step svg { width: 14px; height: 14px; }
}
.highlights__mark {
  position: relative;
  display: block;
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: width .4s var(--hl-ease), background-color .2s ease;
}
.highlights__mark::before { content: ""; position: absolute; inset: -16px -8px; }  /* 20 × 36px target */
.highlights__mark:hover { background-color: rgba(255, 255, 255, .44); }
.highlights__mark:focus-visible { outline: 2px solid var(--glass-focus); outline-offset: 4px; }
.highlights__mark i {
  position: absolute;
  inset: 0;
  background: var(--glass-label-on);
  transform-origin: left;
  transform: scaleX(0);
}
.highlights__mark.is-active { width: 80px; }
.highlights__mark.is-active i { transform: scaleX(var(--hl-progress, 0)); }
.highlights.is-paused .highlights__mark i { opacity: .4; }

.highlights__viewport { cursor: pointer; }   /* a click pauses */

/* ── Wide screens: controls beside the words ──────────────── */

/* Under a full-width clip, a short block of text with the controls parked
   beneath it left the right half of the row empty and the controls adrift.
   From tablet width up they move beside the text instead, on the page's own
   two-column grid (the 5fr / 7fr of .grid_txt in case-study.css): the
   steps in the left column, centred on the title's line, and
   the point in the right column, where every other description sits. */
@media screen and (min-width: 768px) {
  .highlights {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "viewport viewport"
      "nav      list";
    column-gap: 56px;
  }
  .highlights__viewport { grid-area: viewport; }
  .highlights__list { grid-area: list; }
  .highlights__nav {
    grid-area: nav;
    align-self: start;
    /* The row (steps and buttons) is centred on the title's first line:
       the list starts 28px below the clip, and the title (label, 16px /
       1.6 in css/type.css) has a 25.6px line. */
    margin-top: calc(28px + (25.6px - var(--hl-btn)) / 2);
  }
}

/* ── Narrower screens ──────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .highlights__list { margin-top: 20px; }
  .highlights__nav { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .highlights__track,
  .highlights__item,
  .highlights__mark { transition: none; }
}