/* ===== 02 · Players: Norm on the left, 13 playable track windows on the right ===== */
.players {
  --gutter: clamp(18px, 4vw, 48px);
  --accent: #2f8cff; --accent-glow: rgba(47,140,255,.55); --cyan: #7fd4ff; --dim: #9c99a3; --line: rgba(255,255,255,.14);
  --wide: "Archivo", "Inter", system-ui, sans-serif;
  --col: 42%;
  position: relative; background: var(--bg);
}
/* the pinned piece paints over the players section while it slides away, so Norm is "uncovered" in place */
.hero.show { position: relative; z-index: 2; }

/* Norm: a fixed layer driven by players.js (starts exactly where the clip ended, then settles into the left column) */
.players__norm { position: fixed; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; }
.players__norm.is-on { visibility: visible; }
.players__norm img { position: absolute; left: 0; top: 0; height: auto; transform-origin: 0 0; will-change: transform; }
.players__glow {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse 22% 9% at var(--gx, 21%) 95%, rgba(47,140,255,.16), transparent 70%);
}
.players__norm.is-playing .players__glow { opacity: 1; }

.players__col { position: relative; z-index: 3; margin-left: var(--col); padding: 34vh var(--gutter) 18vh 2vw; }
/* the section heading: a clear label above the 13 windows (Nov 1). "02 /" and "13 tracks" on a top line, then the big
   "Play the album", then the one-line instruction. Same words as before, only bigger and brighter. */
.players__head { margin-bottom: 30px; padding-top: 16px; border-top: 1px solid rgba(127,212,255,.3); }
.players__head .section-top { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 10px; }
.players__head .section-index { grid-column: 1; grid-row: 1; color: var(--cyan); font-size: 13px; }
.players__head .section-label--dim { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; color: #c2bfc9; font-size: 12px; }
.players__head #players-title {
  grid-column: 1 / -1; grid-row: 2; color: #f4f3f6;
  font: 400 clamp(40px, 10.5vw, 64px)/.95 "Anton", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
/* focused only by script ("Play the album" link, skip link) so screen readers start here; not a tab stop, no outline box */
.players__head #players-title:focus { outline: none; }
.players__lede { margin: 14px 0 0; color: #cfccd5; font: 800 13px/1.35 var(--wide); font-stretch: 125%; letter-spacing: .05em; text-transform: uppercase; }
.players__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }

/* ---- a window ---- */
.player {
  position: relative; padding: 5px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 40%, rgba(255,255,255,.12));
  box-shadow: -1px 0 0 rgba(255,60,120,.35), 1px 0 0 rgba(60,200,255,.45), 0 24px 60px rgba(0,0,0,.5);
  transition: box-shadow .4s, background .4s, transform .4s;
}
.player.is-active {
  background: linear-gradient(150deg, rgba(127,212,255,.55), rgba(47,140,255,.18) 45%, rgba(47,140,255,.4));
  box-shadow: -1px 0 0 rgba(255,60,120,.35), 1px 0 0 rgba(60,200,255,.6), 0 0 0 1px rgba(47,140,255,.5), 0 0 44px rgba(47,140,255,.35), 0 24px 60px rgba(0,0,0,.5);
}
.player__screen { position: relative; aspect-ratio: 2.25 / 1; border-radius: 15px; overflow: hidden; background: #0b0c10; }
.player__poster, .player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player__video { opacity: 0; transition: opacity .4s; background: #000; }
.player.has-started .player__video { opacity: 1; }
.player__screen::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 30%),
              linear-gradient(to top, rgba(5,7,12,.92) 0%, rgba(5,7,12,.25) 55%, rgba(5,7,12,.45) 100%);
}
.player.is-video.has-started .player__screen::before { background: linear-gradient(to top, rgba(5,7,12,.9) 0%, rgba(5,7,12,0) 45%); }
.player__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); pointer-events: none; }

.player__no, .player__len, .player__credit, .player__mode {
  position: absolute; z-index: 2; font: 800 11px/1.3 var(--wide); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,241,244,.9);
}
.player__no { top: 18px; left: 22px; }
.player__len { top: 18px; right: 22px; color: var(--cyan); }
.player__mode { top: 36px; right: 22px; color: var(--dim); }
/* title + credit share one bottom-anchored stack: a credit that wraps pushes the title up instead of running under it */
.player__info { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 56px; display: flex; flex-direction: column; gap: 4px; }
.player__title {
  margin: 0;
  font: 900 clamp(22px, 2.6vw, 40px)/.92 var(--wide); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; color: #f4f3f6;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.player__credit { position: static; padding-right: 50px; color: rgba(242,241,244,.82); }   /* right padding clears the level bars */
.player__blurb { position: absolute; z-index: 2; left: 22px; right: 40%; top: 40px; margin: 0; color: #c4c1ca; font: 500 12px/1.4 "Inter", system-ui, sans-serif; }
.player__blurb[hidden] { display: none; }

/* level bars (audio mode) */
.player__bars { position: absolute; z-index: 2; right: 22px; bottom: 58px; display: flex; align-items: flex-end; gap: 3px; height: 16px; opacity: .25; transition: opacity .3s; }
.player__bars i { width: 3px; height: 30%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); border-radius: 1px; }
.player.is-playing .player__bars { opacity: 1; }
.player.is-playing .player__bars i { animation: bars 0.9s ease-in-out infinite alternate; }
.player__bars i:nth-child(2) { animation-delay: -.3s !important; } .player__bars i:nth-child(3) { animation-delay: -.6s !important; }
.player__bars i:nth-child(4) { animation-delay: -.15s !important; } .player__bars i:nth-child(5) { animation-delay: -.45s !important; }
@keyframes bars { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } }
.player.is-video .player__bars { display: none; }

/* what the window is doing (Nov 2): "Loading…" while the file starts, a message if it can't play. Never silent. */
.player__audio { display: none; }
.player__status {
  position: absolute; z-index: 3; left: 22px; top: 40px; max-width: calc(100% - 44px);
  padding: 5px 10px; border-radius: 999px; background: rgba(5,7,12,.72); border: 1px solid rgba(127,212,255,.45);
  color: var(--cyan); font: 800 11px/1.2 var(--wide); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.player__status[hidden] { display: none; }
.player.is-error .player__status { color: #ffb3b3; border-color: rgba(255,110,110,.6); }
.player.is-error { box-shadow: -1px 0 0 rgba(255,60,120,.5), 1px 0 0 rgba(255,90,90,.6), 0 0 0 1px rgba(255,90,90,.45), 0 24px 60px rgba(0,0,0,.5); }
.player__btn--play { position: relative; }
.player.is-loading .player__btn--play::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(127,212,255,.18); border-top-color: var(--cyan); animation: player-spin .8s linear infinite;
}
@keyframes player-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player.is-loading .player__btn--play::after { animation: none; border-color: var(--cyan); } }

/* controls */
.player__controls { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 12px; }
.player__btn {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(47,140,255,.55); background: rgba(47,140,255,.12); color: var(--ink); transition: background .25s, color .25s, box-shadow .25s;
}
.player__btn svg { width: 12px; height: 12px; fill: currentColor; }
.player__btn:hover, .player__btn:focus-visible { background: var(--accent); color: #05070a; box-shadow: 0 0 18px var(--accent-glow); outline: none; }
.player__btn--mute { width: 30px; height: 30px; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.player__btn--mute[hidden] { display: none; }
.player__time { flex: none; min-width: 34px; font: 700 11px/1 var(--wide); font-stretch: 112%; letter-spacing: .04em; color: rgba(242,241,244,.9); font-variant-numeric: tabular-nums; }
.player__seek { flex: 1; min-width: 40px; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --pct: 0%; }
.player__seek::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--pct), rgba(255,255,255,.22) var(--pct)); }
.player__seek::-moz-range-track { height: 2px; background: rgba(255,255,255,.22); }
.player__seek::-moz-range-progress { height: 2px; background: var(--accent); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 8px var(--accent-glow); }
.player__seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); }
.player__seek:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* minimal footer */
.outro--min { padding: 9vh var(--gutter) 7vh; border-top: 1px solid rgba(255,255,255,.06); }
.outro--min .section-top { flex-wrap: wrap; row-gap: 10px; }
.outro__link { margin-left: auto; text-decoration: none; transition: color .3s; }
.outro__link:hover, .outro__link:focus-visible { color: var(--cyan); }

/* ---- mobile: Norm on top (scrolls normally), windows full width ---- */
@media (max-width: 768px) {
  .players__norm { position: relative; inset: auto; visibility: visible; height: 72vh; }
  .players__norm img { left: 50% !important; top: 3vh !important; height: 68vh !important; width: auto !important; transform: translateX(-50%) !important; }
  .players__glow { --gx: 50%; }
  .players__col { margin-left: 0; padding: 0 var(--gutter) 12vh; }
  .player__screen { aspect-ratio: 1.45 / 1; }
  .player__title { font-size: min(24px, 6.4vw); }   /* 24px from 375px wide up; a touch smaller on the narrowest phones */
  .player__info { bottom: 62px; }
  .player__btn { width: 44px; height: 44px; }
  .player__btn--mute { width: 40px; height: 40px; }
  .player__seek { height: 32px; }
  .player__blurb { right: 22px; }
}
/* ---- phones, upright and sideways (Nov 1): the hero has just ended on Norm's full body, so the players section doesn't
   show him a second time. Straight from the hero into the heading and the 13 windows. Tablets and desktops keep Norm.
   (Same phone test as PHONE_MQ in players.js and main.js.) ---- */
/* Nov 1 (label): also narrow tablets, and the heading now sits directly under walking Norm. The section is pulled up
   by --pull (set by main.js: the empty strip between his lowest foot and the bottom of the stage) and drawn over that
   strip, fading in from transparent so the floor of the studio frame runs smoothly into it. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) {
  .players__norm { display: none; }
  .players { margin-top: calc(-1 * var(--pull, 0px)); z-index: 3; background: linear-gradient(to bottom, rgba(21,20,23,0), var(--bg) 64px); }
  .players__col { margin: 0 auto; max-width: 640px; padding: 22px var(--gutter) 12vh; }
}
/* sideways phones: each window fits between the nav and the bottom of the screen, so "Listen" / tap-to-play shows it whole */
@media (orientation: landscape) and (max-height: 520px) {
  .players__list { width: min(100%, (100vh - 160px) * 2.2); margin: 0 auto; }
  .player__screen { aspect-ratio: 2.25 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .player.is-playing .player__bars i { animation: none; height: 70%; }
  .player, .player__video, .players__glow { transition: none; }
}
.outro--min { z-index: 3; background: var(--bg); }