/* ---------- Toolkit: infinite card marquee (inspired by thedesignsociety.fr) ---------- */
.stack {
  --paper: #eceeed;
  --lime: #c8f26a;
  position: relative;
  z-index: 3;
  padding: 120px 0 110px;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
/* CRT scanlines over the whole section */
.stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(17, 19, 18, .05) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

.stack__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2.2vw;
  font: 600 13px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stack__eyebrow i { width: 11px; height: 11px; background: #23b97f; }

.stack__title {
  margin-top: 18px;
  padding: 0 2.2vw;
  max-width: 1200px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.stack__rail {
  margin-top: 70px;
  overflow: hidden;
  padding: 30px 0 10px;
}
.stack__track {
  list-style: none;
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
}

.stack__card { position: relative; width: clamp(220px, 21vw, 300px); flex: none; cursor: crosshair; }
.stack__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: #222;
}
.stack__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.stack__tags {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
}
.stack__tags span {
  padding: 4px 6px 3px;
  background: var(--lime);
  border: 2px solid #1b1d1c;
  border-radius: 6px;
  margin-right: -2px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .04em;
  color: #1b1d1c;
  text-transform: uppercase;
}

.stack__name {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.5vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* pixel stickers that sit across the gaps between cards */
.stack__sticker {
  position: absolute;
  z-index: 3;
  width: 120px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.stack__card:hover .stack__sticker { transform: rotate(var(--r, 0deg)) scale(1.15) !important; }

@media (max-width: 640px) {
  .stack { padding: 100px 0 80px; }
  .stack__rail { margin-top: 40px; }
  .stack__sticker { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .stack__rail { overflow-x: auto; }
}

/* reserve the card strip's height up front: the cards are built later, and without this the section
   grew by ~450px on load and shifted the footer (and anything measured before that) out of place */
.stack__rail { min-height: calc(clamp(220px, 21vw, 300px) * 1.25 + 90px); }