/* ==========================================================================
   MEMBER THEMES
   Selecting a member (body[data-member], set by collection-room.js) re-tints
   the homepage in their colours, lays a themed pattern behind the content and
   sweeps a one-off colour wash with their name across the screen.
   "Everyone" keeps the default palette. Pure CSS: no layout changes.
   ========================================================================== */

body { transition: background-color 600ms ease, color 600ms ease; }

/* Themed pattern layer: behind the content, under the film-grain canvas. */
body:not([data-member='everyone'])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* One-off colour wash with the member's name. A distinct animation name per
   member makes the sweep replay whenever the selection changes. */
body:not([data-member='everyone'])::after {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: 700 clamp(56px, 13vw, 200px)/1 var(--sans, sans-serif);
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 6px 30px #0003;
  clip-path: inset(0 0 0 100%);
  animation-duration: 950ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: both;
}

body:not([data-member='everyone']) .audio-dock { background: color-mix(in srgb, var(--player-accent) 7%, var(--canvas-card)); }
body:not([data-member='everyone']) .dock-btn-play {
  background: color-mix(in srgb, var(--player-accent) 12%, var(--canvas-card));
  border-color: color-mix(in srgb, var(--player-accent) 20%, var(--canvas-card));
}

/* --- Grown: matchday pitch ------------------------------------------------ */
body[data-member='grown'] {
  --canvas: #dce8d8; --canvas-card: #ebf2e7; --ink: #1d3024; --ink-bright: #11201a; --muted: #4a6152;
  --line: #1f4a2e24; --line-strong: #1f4a2e45;
}
html:has(> body[data-member='grown']) { background: #dce8d8; }
body[data-member='grown']::before {
  background:
    radial-gradient(circle at 50% 55%, transparent 0 calc(17vmin - 1px), #ffffff8c calc(17vmin - 1px) calc(17vmin + 1px), transparent calc(17vmin + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), #ffffff8c calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, #2f7a4f12 0 8vw, transparent 8vw 16vw);
  animation: theme-in-grown 700ms ease both;
}
body[data-member='grown']::after {
  content: 'GROWN';
  background: linear-gradient(100deg, #1f5c3a, #2f7a4f 60%, #8cc472);
  animation-name: wash-grown;
}

/* --- Josh: military HUD ---------------------------------------------------- */
body[data-member='josh'] {
  --canvas: #ece8da; --canvas-card: #f3f0e6; --ink: #26271b; --ink-bright: #16170f; --muted: #58563f;
  --line: #3d3a2424; --line-strong: #3d3a2447;
}
html:has(> body[data-member='josh']) { background: #ece8da; }
body[data-member='josh']::before {
  background:
    repeating-radial-gradient(ellipse 70% 50% at 12% 22%, transparent 0 46px, #4b532014 46px 47px),
    linear-gradient(#4b53200d 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, #4b53200d 1px, transparent 1px) 0 0 / 48px 48px;
  animation: theme-in-josh 700ms ease both;
}
body[data-member='josh']::after {
  content: 'JOSH';
  background: linear-gradient(100deg, #2f3418, #4b5320 55%, #c8a24a);
  animation-name: wash-josh;
}

/* --- Chinny: red ranger ---------------------------------------------------- */
body[data-member='chinny'] {
  --canvas: #f4e4e2; --canvas-card: #f9efed; --ink: #351416; --ink-bright: #230b0d; --muted: #774648;
  --line: #8a1c2224; --line-strong: #8a1c2245;
}
html:has(> body[data-member='chinny']) { background: #f4e4e2; }
body[data-member='chinny']::before {
  background:
    linear-gradient(180deg, #d7262e 0 4px, transparent 4px),
    repeating-linear-gradient(45deg, #d7262e14 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-45deg, #d7262e14 0 1px, transparent 1px 36px);
  animation: theme-in-chinny 700ms ease both;
}
body[data-member='chinny']::after {
  content: 'CHINNY';
  background: linear-gradient(100deg, #8e0f16, #d7262e 55%, #f06a6f);
  animation-name: wash-chinny;
}

/* --- Vince: arcade fighter ------------------------------------------------- */
body[data-member='vince'] {
  --canvas: #ede3ec; --canvas-card: #f4ecf3; --ink: #2c1829; --ink-bright: #1c0d1a; --muted: #694d66;
  --line: #6b1f5224; --line-strong: #6b1f5245;
}
html:has(> body[data-member='vince']) { background: #ede3ec; }
body[data-member='vince']::before {
  background:
    radial-gradient(#9c397230 1.4px, transparent 1.9px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 95%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 95%);
  animation: theme-in-vince 700ms ease both;
}
body[data-member='vince']::after {
  content: 'VINCE';
  background: linear-gradient(100deg, #3a0f36, #9c3972 50%, #f2c14e);
  animation-name: wash-vince;
}

/* --- qrd: rhythm circles --------------------------------------------------- */
body[data-member='qrd'] {
  --canvas: #dcebee; --canvas-card: #eaf4f5; --ink: #13282e; --ink-bright: #0a1a1f; --muted: #43626a;
  --line: #14677c24; --line-strong: #14677c45;
}
html:has(> body[data-member='qrd']) { background: #dcebee; }
body[data-member='qrd']::before {
  background:
    radial-gradient(circle at 100% 0%, transparent 0 150px, #ff66aa66 150px 155px, transparent 155px),
    radial-gradient(circle at 100% 0%, transparent 0 232px, #ff66aa2e 232px 235px, transparent 235px),
    radial-gradient(circle at 0% 100%, transparent 0 120px, #14677c55 120px 125px, transparent 125px),
    radial-gradient(circle at 0% 100%, transparent 0 196px, #14677c24 196px 199px, transparent 199px),
    radial-gradient(#14677c1c 1px, transparent 1.5px) 0 0 / 22px 22px;
  animation: theme-in-qrd 700ms ease both;
}
body[data-member='qrd']::after {
  content: 'qrd';
  background: linear-gradient(100deg, #14677c, #ff66aa 62%, #ffb3d5);
  animation-name: wash-qrd;
}

/* --- Said: tactical shooter ------------------------------------------------ */
body[data-member='said'] {
  --canvas: #ebe7e0; --canvas-card: #f4f1ec; --ink: #0f1923; --ink-bright: #070c11; --muted: #4a5560;
  --line: #0f192322; --line-strong: #0f192340;
}
html:has(> body[data-member='said']) { background: #ebe7e0; }
body[data-member='said']::before {
  background:
    linear-gradient(115deg, transparent 0 66%, #ff465522 66% 67.2%, transparent 67.2% 69%, #ff465512 69% 78%, transparent 78%),
    linear-gradient(#0f19230a 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, #0f19230a 1px, transparent 1px) 0 0 / 64px 64px;
  animation: theme-in-said 700ms ease both;
}
body[data-member='said']::after {
  content: 'SAID';
  background: linear-gradient(100deg, #0f1923 0 46%, #ff4655 46% 100%);
  animation-name: wash-said;
}

/* Identical keyframes under different names so each change restarts them. */
@keyframes theme-in-grown { from { opacity: 0; } }
@keyframes theme-in-josh { from { opacity: 0; } }
@keyframes theme-in-chinny { from { opacity: 0; } }
@keyframes theme-in-vince { from { opacity: 0; } }
@keyframes theme-in-qrd { from { opacity: 0; } }
@keyframes theme-in-said { from { opacity: 0; } }

@keyframes wash-grown { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes wash-josh { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes wash-chinny { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes wash-vince { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes wash-qrd { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes wash-said { 0% { clip-path: inset(0 100% 0 0); } 42%, 52% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  body:not([data-member='everyone'])::before { animation: none; }
  body:not([data-member='everyone'])::after { display: none; }
}