/* site.css — ba-nd.com's extensions to the Band kit.
   Two additions, both candidates for the kit proper; nothing here overrides a
   kit rule, and every value is a kit token.

   1. The marquee moves. The kit's .marquee is a static strip — a component
      called a marquee that doesn't scroll reads as broken. Two identical
      tracks each slide one full track-width, so the loop is seamless.
      base.css's reduced-motion block already stops it for users who ask.

   2. .roster — the portfolio list. A register the kit has no component for:
      brand name, one line, one door out, hairline rows. */

[data-theme="band"] .marquee--roll { gap: 0; }
[data-theme="band"] .marquee__track {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-right: var(--s-5);
  animation: marquee-roll 75s linear infinite;
}
@keyframes marquee-roll { to { transform: translateX(-100%); } }

[data-theme="band"] .roster__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
[data-theme="band"] .roster__row:first-child { border-top: 1px solid var(--line); }
[data-theme="band"] .roster__d {
  margin-left: auto;
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
[data-theme="band"] a.roster__row:hover .display-m { color: var(--accent); }

/* The same hover idiom for a display-scale name that links out on its own
   (the founder's name) — one behaviour, learned once. */
[data-theme="band"] a.hov-accent:hover { color: var(--accent); }
/* .logowall span pins its own color, so a linked wall entry needs the hover
   carried through to the span. */
[data-theme="band"] .logowall a.hov-accent:hover span { color: var(--accent); }

/* .strip — the back catalogue. The marquee idiom carrying photographs instead
   of type: two identical tracks, one very slow loop. Decorative by design —
   the caveat line above it does the talking, the strip just rolls. */
[data-theme="band"] .strip {
  display: flex;
  overflow: hidden;
}
[data-theme="band"] .strip__track {
  flex: none;
  display: flex;
  gap: var(--s-3);
  padding-right: var(--s-3);
  animation: marquee-roll 120s linear infinite;
}
[data-theme="band"] .strip__track img {
  height: 220px;
  width: auto;
  border-radius: var(--r-md);
}

/* .media--shot — a live-site capture in a media card, playing as a little
   tour. --tour slow-scrolls a tall page capture top to bottom and back;
   --zoom breathes on a single frame (for gate pages with nothing to scroll).
   Stills, not video files: crisp, ~100 KB each, and reduced-motion simply
   leaves a screenshot. */
[data-theme="band"] .media--shot { height: 420px; }
[data-theme="band"] .media--tour .media__bg {
  height: auto;
  animation: site-tour 26s ease-in-out infinite alternate;
}
@keyframes site-tour {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% + 420px)); }
}
[data-theme="band"] .media--zoom .media__bg {
  animation: site-zoom 16s ease-in-out infinite alternate;
}
@keyframes site-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}