:root { --mono: "JetBrains Mono", ui-monospace, monospace; }

/* ============================================================
   HERO FILM-STRIP — ghosted, slow-drifting row of the case-study
   thumbnails along the bottom of the hero band. Tiles are built at
   runtime from the #cs-grid cards (see inline script on the page).
   ============================================================ */

/* Deeper band than the shared .page-hero — the strip needs its own
   room below the headline. */
.page-hero--cs { padding-bottom: clamp(210px, 30vh, 330px); }

.cs-hero-strip {
  /* 3D wedge: the plane recedes to the left and its far tip projects at
     the LEFT PAGE EDGE — perspective compression is extreme out there, so
     reaching the edge takes a huge unprojected overhang (-137%). These
     four values are one tuned system (vw-based perspective keeps the
     projection proportional at any viewport): move one, re-derive the
     rest. Drift runs rightward, toward the viewer. */
  position: absolute; left: -137%; right: -8%;
  bottom: clamp(30px, 5vh, 52px);
  height: clamp(120px, 17vh, 180px);
  transform: perspective(34vw) rotateY(-26deg) rotate(-1.2deg);
  /* origin low so the wedge grows mostly upward; origin-x sits at 76% so
     the near end stays safely short of the viewer plane (blow-up point). */
  transform-origin: 76% 88%;
  z-index: 1; pointer-events: none;
  opacity: 0; animation: cs-strip-in 1.2s ease 0.2s forwards;
  /* Mask stops are in unprojected space: the 0→46% fade projects to
     roughly the leftmost 15% of the screen. no-repeat so the track's
     overflow past the container is masked out entirely. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 86%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 86%, transparent 100%);
  mask-repeat: no-repeat;
}
.cs-hero-strip__track {
  display: flex; height: 100%; width: max-content;
  animation: cs-strip-drift 110s linear infinite;
}
.cs-hero-strip__track img {
  flex: 0 0 auto;
  width: clamp(210px, 24vw, 320px); height: 100%;
  object-fit: cover;
  /* margin, not flex gap — the 50% loop is only seamless when the
     track is two exactly equal halves, and a gap between the halves
     would be half a gap short of the inter-tile rhythm. */
  margin-right: 18px;
  border-radius: 0 24px 24px 24px;  /* teardrop, echoing the buttons */
  border: 1px solid rgba(244, 244, 244, 0.08);
  filter: grayscale(0.65) brightness(0.72);
}
/* Starts shifted left and drifts right, so tiles move toward the wedge's
   near (large) end — reading as "approaching". */
@keyframes cs-strip-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes cs-strip-in { to { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .cs-hero-strip__track { animation: none; }
}