/* Sports Club OS hero, wall of screens (B2): real app screens in plain browser frames, in four straight
   columns that drift slowly, neighbours in opposite directions. Built by wall.js into <div class="hw">.
   The wall sits to the right of the hero's words and bleeds off the right edge; it never covers the words.
   Colours are the site's own. */

.hw { position: static; min-width: 0; --gap: 16px; --bar: 20px; --tile: 210px; --left: 553px; }
/* motion.js still looks for .hero-visual; this hidden stub keeps it quiet. */
.hero-visual[hidden] { display: none !important; }

.hw-wall { position: absolute; z-index: 1; top: -65px; bottom: 0; left: var(--left); right: calc(50% - 50vw); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }
.hw-plane { position: absolute; left: 0; top: 0; display: flex; gap: var(--gap); }
.hw-col { flex: none; width: var(--tile); }
.hw-track { display: flex; flex-direction: column; gap: var(--gap); animation: hw-drift var(--dur, 80s) linear infinite; will-change: transform; }
.hw-col:nth-child(even) .hw-track { animation-direction: reverse; }
.hw.is-paused .hw-track { animation-play-state: paused; }
@keyframes hw-drift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }

/* A screen in a plain browser frame (after claude-demo/player.css .dv-browser). */
.hw-tile { position: relative; overflow: hidden; border-radius: 9px; background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .09), 0 2px 4px rgba(27, 26, 23, .04), 0 18px 34px -20px rgba(60, 46, 10, .4); }
.hw-bar { position: relative; height: var(--bar); display: flex; align-items: center; justify-content: center; background: #f4f2ec; border-bottom: 1px solid #e6e1d5; }
.hw-dots { position: absolute; left: 8px; top: 50%; display: flex; gap: 4px; transform: translateY(-50%); }
.hw-dots i { width: 6px; height: 6px; border-radius: 50%; background: #dcd7cb; }
.hw-url { display: flex; align-items: center; justify-content: center; gap: 4px; width: 56%; height: 12px; padding: 0 6px; border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 1px #e8e3d7; font: 500 7px/1 Geist, Arial, sans-serif; color: #6e6a60; white-space: nowrap; overflow: hidden; }
.hw-url svg { flex: none; width: 5px; height: 6px; color: #9a958a; }
.hw-url span { overflow: hidden; text-overflow: ellipsis; }
.hw-url b { font-weight: 500; color: #1b1a17; }
.hw-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f5f3ee; }
.hw-view img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }

/* ---------- widths: about three and a half columns show, the fourth bleeds off the edge ---------- */
@media (min-width: 1393px) { .hw { --tile: clamp(200px, calc(13.9vw + 11px), 250px); } }
@media (min-width: 1151px) and (max-width: 1392px) { .hw { --left: 528px; --tile: clamp(180px, calc((100vw - 632px) / 3.6), 214px); } }
@media (max-width: 1150px) { .hw { --left: calc(50% + 20px); --gap: 14px; --tile: clamp(160px, calc(19.2vw - 20px), 205px); } }
/* Two columns beside the words. */
@media (max-width: 900px) { .hw { --tile: calc(25vw - 17px); } }
/* On a phone: a band of two columns under the words. */
@media (max-width: 650px) {
  .hw { position: relative; height: 340px; margin-top: 52px; --gap: 12px; --tile: calc(50vw - 21px); }
  .hw-wall { top: 0; bottom: 0; left: -20px; right: -20px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .hw-plane { left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-track { animation: none; }
}