/* ==========================================================================
   Band bio popups
   Artwork: futbolito/Stickers 2/  •  Layout: pages 17-20 of the stickers PDF

   Each popup is three supplied stickers stacked and overlapped - logo, then
   the bio blob (the copy is baked into that artwork), then the photo. They
   are laid out as a flex column with negative margins rather than absolute
   percentages: the four bands' assets have quite different aspect ratios
   (CMeza's photo is a portrait oval, Sorbo's is wide landscape), and a
   column keeps every one of them composed without per-band nudging.
   ========================================================================== */

.lineup-item {
  background: none;
  border: none;
  padding: 0;
  /* NOT `font: inherit` - the shorthand resets font-size, and because this
     file loads after style.css that silently dropped the lineup from its
     clamp() down to the inherited 16px. Only the colour needs resetting;
     style.css already sets the face and size. */
  color: inherit;
  display: block;
  width: 100%;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.lineup-item:hover,
.lineup-item:focus-visible {
  transform: scale(1.04);
}

.lineup-item:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.band-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(20, 6, 8, 0.72);
  opacity: 0;
  transition: opacity 0.22s ease;
  overflow-y: auto;
}

.band-overlay[hidden] { display: none; }
.band-overlay.open { opacity: 1; }

.band-stage {
  position: relative;
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.band-layer {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.72) rotate(var(--rot, 0deg));
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.band-layer.shown {
  opacity: 1;
  transform: scale(1) rotate(var(--rot, 0deg));
}

/* Overlap, and stack the way the artwork does: logo on top of the bio blob,
   bio on top of the photo. */
.band-logo  { z-index: 3; --rot: -1.5deg; }
.band-bio   { z-index: 2; width: 94%; margin-top: -3%; --rot: 1deg; }
.band-photo { z-index: 1; width: 84%; margin-top: -4%; --rot: -1deg; }

/* Portrait artwork needs reining in or it dominates the column. */
.band-stage[data-band='cmeza'] .band-photo     { width: 56%; margin-top: -3%; }
.band-stage[data-band='la-casita'] .band-photo { width: 62%; margin-top: -2%; }
.band-stage[data-band='la-casita'] .band-logo  { width: 88%; }

.band-close {
  position: fixed;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  z-index: 8100;
  background: none;
  border: none;
  color: var(--lime);
  font-size: 26px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

.band-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(14px, 3vh, 36px);
  text-align: center;
  font-family: 'KCFunkWagon XWide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-nav);
  color: var(--lime);
  font-size: clamp(12px, 1.3vw, 18px);
  margin: 0;
  z-index: 8100;
  pointer-events: none;
  animation: gate-pulse 1.5s ease-in-out infinite;
}

/* Screen readers get the bio as real text - the supplied artwork has the
   copy baked into the image, so without this it would be unreadable. */
.band-sr-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .band-layer { transition: opacity 0.2s ease; transform: rotate(var(--rot, 0deg)); }
  .band-layer.shown { transform: rotate(var(--rot, 0deg)); }
  .band-hint { animation: none; opacity: 1; }
  .lineup-item:hover { transform: none; }
}