/* Two strips of barrier tape crossing the page, carrying the real tech stack. */
.tape-zone {
  position: relative;
  display: grid;
  place-content: center;
  place-items: center;
  height: clamp(280px, 30vw, 520px);
  overflow: hidden;
}

.tape {
  position: absolute;
  display: none;
  top: 50%;
  left: -10%;
  width: 120%;
  overflow: hidden;
  color: #111;
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 7px 9px rgb(0 0 0 / 0.3);  /* not filter: repainting it under the moving print slowed scrolling on laptops */
}
.tape-front { z-index: 2; background: #ffd21f; transform: translateY(-50%) rotate(-8deg); }
.tape-back { z-index: 1; background: #edbb0c; transform: translateY(-50%) rotate(7deg); }

/* Red and blue police lights washing over the scene. They trade places slowly on
   purpose: anything near 3 flashes a second is a seizure risk, so this never strobes. */
.tape-zone::before, .tape-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: police-light 1.8s ease-in-out infinite;
}
.tape-zone::before { background: radial-gradient(70% 130% at 12% 50%, #ff2233 0%, rgb(255 34 51 / 0.42) 42%, transparent 74%); }
.tape-zone::after {
  background: radial-gradient(70% 130% at 88% 50%, #2a5bff 0%, rgb(42 91 255 / 0.45) 42%, transparent 74%);
  animation-delay: -0.9s;
}
@keyframes police-light {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.12; }
}

/* Printed black edges */
.tape::before, .tape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 5px;
  background: #111;
}
.tape::before { top: 7px; }
.tape::after { bottom: 7px; }

.tape-track { display: flex; width: max-content; animation: tape-run 70s linear infinite; }
.tape-back .tape-track { animation-direction: reverse; animation-duration: 85s; }
@media (hover: hover) {
  .tape:hover .tape-track { animation-play-state: paused; }
}

@keyframes tape-run { to { transform: translateX(-50%); } }

/* The creases travel with the print, as they would on real plastic. */
.tape-set {
  display: flex;
  flex: none;
  align-items: center;
  padding-block: clamp(20px, 2.4vw, 28px);
  background-image: linear-gradient(97deg,
    transparent 0 11%, rgb(255 255 255 / 0.34) 13%, transparent 15% 29%,
    rgb(0 0 0 / 0.09) 31%, transparent 34% 52%, rgb(255 255 255 / 0.26) 54%,
    transparent 57% 73%, rgb(0 0 0 / 0.07) 76%, transparent 79% 90%,
    rgb(255 255 255 / 0.3) 92%, transparent 94%);
}
.tape-set span { padding-inline: 0.55em; }
.tape-set span::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.72em;
  margin-left: 1.1em;
  background: #111;
  transform: skewX(-22deg);
}

.stack-list {
  position: relative;
  z-index: 3;
  max-width: 62em;
  padding: 0 20px;
  color: #fff;
  text-align: center;
}

/* The tape replaces the list only when tape.js has built it and it can move: still strips can't show every item. */
@media (prefers-reduced-motion: no-preference) {
  .taped .tape { display: block; }
  .taped .stack-list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tape-zone::before, .tape-zone::after { animation: none; opacity: 0.55; }
}