:root {
  --bg: #ffffff;
  --ink: #000000;
  --cols: 6;
  --gap: clamp(14px, 2.2vw, 32px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: "Inter Tight", system-ui, -apple-system, sans-serif; color: var(--ink); }

/* The wall: columns of tees drifting bottom to top */
.wall {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  padding: 0 var(--gap);
}
.col { overflow: hidden; position: relative; }
.track {
  display: flex; flex-direction: column; gap: var(--gap);
  animation: rise var(--dur, 60s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.col:hover .track { animation-play-state: paused; }
@keyframes rise {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - var(--gap) / 2)); }
}
.tee {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.tee svg { width: 100%; height: 100%; display: block; }
.tee path { fill: var(--ink); }
.tee:hover { transform: scale(1.06) translateY(-4px); }

/* Wordmark: inverts over the shirts */
.mark {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  color: #fff; mix-blend-mode: difference;
  text-align: center;
}
.mark h1 {
  font-weight: 800;
  font-size: clamp(48px, 11vw, 190px);
  line-height: .86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.mark p {
  margin-top: clamp(14px, 2vw, 26px);
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .32em;
  text-transform: uppercase;
}

@media (max-width: 1000px) { :root { --cols: 4; } }
@media (max-width: 560px)  { :root { --cols: 3; } }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}