.club-section { position: relative; background: #101013; color: var(--paper); border-block: 3px solid var(--ink); }
.club-stage { position: relative; height: min(100svh,960px); min-height: 620px; isolation: isolate; overflow: clip; }
.scroll-stories-on .club-section { height: 340svh; }
.scroll-stories-on .club-stage { position: sticky; top: 0; height: 100svh; }
.club-room { position: absolute; inset: -4%; background: #101013 url('assets/nicki-club-room.893d23a13363.webp') center 58% / cover no-repeat; transform: translate3d(var(--club-room-x,0px),var(--club-room-y,0px),0) scale(var(--club-room-scale,1)); }
.club-stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(#0a0a12e8 0%,#0a0a1290 13%,transparent 33%,transparent 74%,#08080c 100%); }
.club-light { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 25% 35%,#fc76b870,transparent 55%),radial-gradient(ellipse at 80% 30%,#c4f52c70,transparent 50%); opacity: var(--club-light,.35); mix-blend-mode: screen; transform: translateX(var(--club-light-x,0px)); pointer-events: none; }
.club-heading { position: absolute; z-index: 6; top: clamp(1.5rem,4svh,3rem); left: 5%; right: 5%; display: flex; justify-content: space-between; gap: 1.5rem; align-items: start; }
.club-heading .eyebrow { color: var(--lime); margin-bottom: .7rem; font-size: .875rem; }
.club-heading h2 { font: 600 clamp(2.5rem,5.5vw,5.3rem)/1 var(--heading); letter-spacing: -.02em; }
.club-heading h2 span { color: var(--pink); }
.club-motion { flex-shrink: 0; min-height: 44px; padding: .7rem .9rem; border: 1px solid #f2f0e980; background: #141414a8; color: var(--paper); font: 750 .875rem var(--body); }
.club-motion:disabled { opacity: .65; cursor: default; }
.club-actors { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.club-performer { position: absolute; z-index: 2; left: 50%; bottom: 9%; width: min(75svh,57vw,780px); aspect-ratio: 1; transform: translate3d(-50%,var(--club-vocal-y,0px),0) rotate(var(--club-vocal-turn,0deg)); transform-origin: 50% 90%; }
.club-performer-art { display: block; width: 100%; height: 100%; background: url('assets/nicki-club-vocal.743f9f758d95.webp') center / contain no-repeat; clip-path: var(--club-vocal-clip); }
.club-speaker { position: absolute; z-index: 1; bottom: 9%; width: min(72svh,49vw,730px); aspect-ratio: 1; transform-origin: 50% 90%; }
.club-speaker-left { left: -4%; transform: translate3d(var(--club-left-x,0px),var(--club-left-y,0px),0) rotate(var(--club-left-turn,0deg)) scale(var(--club-left-scale,1)); }
.club-speaker-right { right: -4%; transform: translate3d(var(--club-right-x,0px),var(--club-right-y,0px),0) rotate(var(--club-right-turn,0deg)) scale(var(--club-right-scale,1)); }
.club-speaker-art { display: block; width: 100%; height: 100%; background-image: url('assets/nicki-club-speakers.4eb4ab7f1612.webp'); background-repeat: no-repeat; }
.club-speaker-left .club-speaker-art { background-size: var(--club-speaker-size-0); background-position: var(--club-speaker-position-0); clip-path: var(--club-speaker-clip-0); }
.club-speaker-right .club-speaker-art { background-size: var(--club-speaker-size-1); background-position: var(--club-speaker-position-1); clip-path: var(--club-speaker-clip-1); }
/* Comic sound lettering sits above the actors and the stage's dark overlay. */
.club-hit { position: absolute; z-index: 5; font: 400 clamp(2.8rem,7vw,7rem)/1 var(--display); color: var(--lime); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); pointer-events: none; }
.club-hit-left { left: 14%; top: 33%; transform: rotate(-13deg) scale(var(--club-left-scale,1)); opacity: var(--club-hit-left,.5); }
.club-hit-right { right: 12%; top: 40%; color: var(--pink); transform: rotate(12deg) scale(var(--club-right-scale,1)); opacity: var(--club-hit-right,.5); }
.club-footer { position: absolute; z-index: 6; left: 5%; right: 5%; bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.club-footer p { font: 750 .875rem/1.6 var(--body); letter-spacing: .03em; }
.club-footer p span { color: var(--pink); }
.club-footer a { padding: .8rem 1rem; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font: 750 .875rem var(--body); text-decoration: none; white-space: nowrap; }
.club-footer a:hover { background: var(--pink); }
.club-progress { display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 7; height: 4px; background: #ffffff18; }
.scroll-stories-on .club-progress { display: block; }
.club-progress::after { content: ''; display: block; width: calc(var(--club-progress,0) * 100%); height: 100%; background: var(--pink); }
.club-in-view .club-performer,.club-in-view .club-speaker,.club-in-view .club-room { will-change: transform; }
@media(max-width:760px) {
  .club-heading { display: block; top: 1.5rem; }
  .club-heading h2 { font-size: clamp(2.5rem,10vw,4.3rem); }
  .club-motion { position: absolute; right: 0; top: 0; padding: .6rem; font-size: .75rem; }
  .club-heading .eyebrow { max-width: 50%; font-size: .75rem; margin-bottom: 1.2rem; }
  .club-room { background-position: center; }
  .club-performer { width: min(78svh,94vw); bottom: 18%; }
  .club-speaker { width: min(60svh,78vw); bottom: 10%; }
  .club-speaker-left { left: -24%; }
  .club-speaker-right { right: -24%; }
  .club-hit-left { left: 4%; top: 35%; }
  .club-hit-right { right: 3%; top: 42%; }
  .club-footer { bottom: 1.5rem; gap: .75rem; }
  .club-footer p { font-size: .75rem; max-width: 43%; }
  .club-footer a { font-size: .75rem; padding: .8rem; }
}
@media(max-height:619px) {
  .club-stage { height: 620px; }
  .club-performer { width: min(470px,62vw); }
  .club-speaker { width: min(440px,46vw); }
}
@media(prefers-reduced-motion:reduce) {
  .club-in-view .club-performer,.club-in-view .club-speaker,.club-in-view .club-room { will-change: auto; }
}