/* shelf.css — standalone "shelf" component: a row of vertical screens drifting
   sideways, the one crossing the centre scaled up to full size. Pairs with
   shelf.js, which positions and scales every screen per frame.
   Tokens come from ../tokens.css; when dropped inside a .cs-image-block the
   card background, radius and caption styling come from case-study.css. */

.shelf {
  --shelf-h: 260px;        /* height of the screen at dead centre */
  --shelf-gap: 24px;       /* space between screens at full size */
  --shelf-pad: 12px;       /* breathing room so the centre screen's shadow fits */
  --shelf-fade: 32px;

  position: relative;
  /* Bleed out to the edges of the padded card so screens run off both sides
     instead of stopping short of the padding. Image-block cards keep 20px
     horizontal padding at every breakpoint — `.cs-image-block .cs-section-inner`
     outranks the wider `0 32px` set for other sections — so this stays -20px. */
  margin-inline: -20px;
  height: calc(var(--shelf-h) + var(--shelf-pad) * 2);
  overflow: hidden;
  /* Feathered edges, so screens enter and leave instead of being cut hard. */
  mask-image: linear-gradient(to right, transparent, #000 var(--shelf-fade), #000 calc(100% - var(--shelf-fade)), transparent);
}

.shelf .shelf-track {
  position: absolute;
  inset: 0;
}

/* Every screen is taken out of flow and placed by shelf.js; `left`/`top` stay
   fixed and the per-frame transform carries both position and scale, so the
   whole animation is one compositor-friendly property. */
.shelf .shelf-track img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  height: var(--shelf-h);
  width: auto;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  border-radius: var(--radius-sm);
  box-shadow: var(--screencap-shadow);
  will-change: transform;
}

/* Let the viewer stop the row to look at a screen (shelf.js reads these). */
.shelf { cursor: default; }

@media (min-width: 768px) {
  .shelf {
    /* 476 + 2x12 padding = 500px overall, the same height the other image
       blocks land on (their media is capped at max-height: 500px). */
    --shelf-h: 476px;
    --shelf-gap: 64px;
    --shelf-fade: 64px;
  }
}

/* No drift: shelf.js skips the animation entirely and adds .is-static, which
   returns the screens to normal flow as a plain scrollable strip. */
.shelf.is-static {
  height: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf.is-static::-webkit-scrollbar { display: none; }
.shelf.is-static .shelf-track {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: var(--shelf-gap);
  width: max-content;
  padding: var(--shelf-pad) 20px;
}
.shelf.is-static .shelf-track img {
  position: static;
  transform: none;
  will-change: auto;
  height: var(--shelf-h);
}