/* ============================================================
   MARQUEE

   Two rows of template screenshots that slide in opposite
   directions as the page scrolls. Tile size and gaps match the
   reference (420 x 270, gap-3).

   The rows are wider than the viewport by design — `overflow: clip`
   on the section is what hides the ends. It must be `clip` rather
   than `hidden`: `hidden` would make this a scroll container and
   break `position: sticky` further down the page.
   ============================================================ */

.marquee {
  padding-block: var(--sp-section);
  overflow: clip;
  background-color: var(--c-bg);
}

.marquee__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);

  /* Opted out of RTL on purpose.

     Under dir="rtl" the tracks lay their tiles out right-to-left
     AND right-align their over-wide box, so a track's left edge
     starts at (rowWidth - trackWidth) — about -9300px here. The
     scroll transform then pushed it further off-screen and the
     rows rendered empty.

     These rows are a decorative image strip with no reading order,
     so forcing LTR is safe and makes the geometry match the
     reference design's maths exactly. */
  direction: ltr;
}

.marquee__track {
  display: flex;
  gap: var(--sp-sm);
  width: max-content;
  will-change: transform;
}

.marquee__tile {
  flex: none;
  width: 420px;
  height: 214px;
  aspect-ratio: 590 / 300;
  border-radius: var(--r-tile);
  background-color: var(--c-bg-elevated);
  overflow: hidden;
  position: relative;
  border: var(--bw-card, 1px) solid var(--c-card-border, rgb(var(--rgb-ink) / 0.08));
  box-shadow: var(--shadow-card-rest, 0 4px 14px rgb(0 0 0 / 0.15));
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
  cursor: pointer;
}

.marquee__tile-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 590 / 300;
  object-fit: cover;
  display: block;
  transition: scale var(--dur-slow) var(--ease-out);
}

.marquee__tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 590 / 300;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.24s var(--ease);
  pointer-events: none;
}

.marquee__tile.is-playing .marquee__tile-video {
  opacity: 1;
}

.marquee__tile:hover {
  border-color: rgb(var(--rgb-ink) / 0.35);
  scale: 1.02;
  z-index: 10;
}

.marquee__tile:hover .marquee__tile-img {
  scale: 1.05;
}

.marquee__tile-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-ink) / 0.08);
  z-index: 3;
}

@media (max-width: 767px) {
  .marquee__tile {
    width: 260px;
    height: 132px;
  }
}