marquee-panes {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  --pane-gap: clamp(12px, 1.4vw, 22px);
  --pane-radius: clamp(14px, 1.6vw, 26px);
  --column-width: clamp(160px, 15vw, 240px);
}

/* ---------- STAGE ---------- */
marquee-panes .stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The tilted wall. Rotated and scaled up so the marquee columns overflow the
   viewport edges and the seams never show. */
marquee-panes .plane {
  display: flex;
  gap: var(--pane-gap);
  width: max-content;
  height: 160%;
  /* min-height:0 stops this flex/grid item from expanding to its (tall)
     content, which would break the percentage-height chain and let the
     columns grow without bound. */
  min-height: 0;
  overflow: hidden;
  transform: rotate(var(--tilt, -24deg)) scale(1.4);
  transform-origin: center;
  will-change: transform;
}

/* ---------- COLUMNS ---------- */
marquee-panes .column {
  position: relative;
  flex: 0 0 var(--column-width);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

marquee-panes .column-track {
  display: flex;
  flex-direction: column;
  gap: var(--pane-gap);
  will-change: transform;
  animation-iteration-count: infinite;
}

/* ---------- ENDLESS MODE ----------
   Track holds two identical stacked sets; one loop = translate by exactly one
   set (-50% of the track), so it repeats seamlessly forever. */
marquee-panes .column--endless .column-track {
  animation-name: marquee-panes-endless;
  animation-timing-function: linear;
}
/* 'down' columns run the same loop in reverse. */
marquee-panes .column--endless.column--down .column-track {
  animation-direction: reverse;
}

@keyframes marquee-panes-endless {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* ---------- CYCLE MODE ----------
   Track holds a single filled set; it scrolls to the boundary then reverses
   (ping-pong) via alternate iteration. --dist is set per column in logic. */
marquee-panes .column--cycle .column-track {
  animation-name: marquee-panes-cycle;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
marquee-panes .column--cycle.column--down .column-track {
  animation-direction: alternate-reverse;
}

@keyframes marquee-panes-cycle {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-1 * var(--dist, 0px)));
  }
}

/* ---------- PANES ---------- */
marquee-panes .pane {
  margin: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--pane-radius);
  background-color: color-mix(in srgb, var(--background), var(--text) 8%);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ---------- SCRIM ---------- */
/* Fades the wall into the background at every edge so it reads as a surface,
   not a hard-cropped rectangle. */
marquee-panes .stage-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 120% at 50% 50%,
      transparent 45%,
      color-mix(in srgb, var(--background), transparent 20%) 100%
    );
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  marquee-panes .column-track {
    animation: none !important;
  }
}