/* Home team wall: an edge-to-edge, tilted wall of every squad photo whose columns drift up and down without end.
   It spans the full window width and fades into the page at top and bottom, so it has no visible frame.
   Compositor-only CSS animation; paused off screen (team-wall.js), per column on hover, and off for reduced motion. */
.team-wall { position: relative; width: 100vw; margin: clamp(30px, 5vw, 70px) 0 0 calc(50% - 50vw); }
.team-wall-stage {
  --tile-w: max(16vw, 150px); --tile-h: calc(var(--tile-w) * .66); --gap: calc(var(--tile-w) * .055);
  position: relative; height: min(100svh, 1000px); min-height: 560px;
}
/* Dark field holding the wall; the mask feathers it into the page so the section has no hard edge. */
.team-wall-field {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; perspective: 1600px;
  background: radial-gradient(90% 70% at 50% 45%, #1b2f4a, #070f1b 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.team-wall-grid {
  position: absolute; left: 50%; top: 50%; display: flex; gap: var(--gap);
  width: calc(var(--tile-w) * 7 + var(--gap) * 6); height: 140%;
  transform: translate(-50%, -50%) rotateX(22deg) rotateZ(-7deg) scale(1.12);
}
.wall-col { flex: 0 0 var(--tile-w); }
/* Four copies of the column (the bottom padding evens out the gaps), so moving by one copy loops seamlessly
   even on very tall windows. */
.wall-track { display: flex; flex-direction: column; gap: var(--gap); padding-bottom: var(--gap); animation: wall-up var(--speed, 60s) linear infinite; }
.wall-col:nth-child(even) .wall-track { animation-name: wall-down; }
.wall-col:hover .wall-track, .team-wall.is-offscreen .wall-track { animation-play-state: paused; }

.wall-tile { position: relative; flex: 0 0 var(--tile-h); overflow: hidden; border-radius: calc(var(--tile-w) * .04); background: #13233a; }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.78); transition: filter .4s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.wall-tile span {
  position: absolute; left: 8%; bottom: 7%; color: #fff; font-size: clamp(9px, calc(var(--tile-w) * .075), 15px); font-weight: 800;
  letter-spacing: .04em; text-shadow: 0 1px 6px #000a;
}
.wall-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--brand, #d33e50); transition: box-shadow .3s; }
.wall-tile:hover img, .wall-tile:focus-visible img { filter: none; transform: scale(1.06); }
.wall-tile:hover::after, .wall-tile:focus-visible::after { box-shadow: inset 0 0 0 3px var(--brand, #d33e50); }

.team-wall-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #050b14f0 0%, #050b1499 30%, #050b1400 60%), linear-gradient(90deg, #050b14b3, transparent 55%),
              linear-gradient(180deg, #050b1499, transparent 18%);
}
.team-wall-copy { position: absolute; z-index: 2; left: max(var(--space), 4vw); right: var(--space); bottom: max(17%, 110px); color: #fff; max-width: 760px; pointer-events: none; }
.team-wall-copy > * { pointer-events: auto; }
.team-wall-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #ffd58a; }
.team-wall-kicker::before { content: ''; width: 34px; height: 2px; background: currentColor; }
.team-wall-copy h2 { margin: 14px 0 24px; color: #fff; font: 900 clamp(34px, 5.4vw, 76px)/1.15 var(--wcu-zh, 'WCU Serif SC', 'Noto Serif SC', serif); letter-spacing: .01em; }
.team-wall-link { display: inline-flex; padding: 14px 24px; border-radius: 999px; background: var(--brand, #d33e50); color: #fff; font-weight: 800; font-size: 14px; }
.team-wall-link:hover { color: #fff; filter: brightness(1.08); }

@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-25%); } }
@keyframes wall-down { from { transform: translateY(-25%); } to { transform: translateY(0); } }

@media (max-width: 700px) {
  .team-wall-copy h2 { font-size: clamp(30px, 8.6vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
}