/* ==========================================================================
   PULSE — THE LINEUP.

   No portrait cards, no tiles, no carousel dots. The names ARE the interface:
   four of them at display size, overlapping down the page, and the photograph
   pushes out from behind the letters of whichever one is active.

   ONE MECHANIC, TWO SHAPES. There is always exactly one active artist, and
   every input sets it: pointer, keyboard focus, the PREV/NEXT buttons and a
   horizontal swipe. Desktop shows all four names with the active one forward;
   a phone shows the active one alone, full width, with 01 OF 04 underneath.
   Nothing here is hover-only, and nothing is disabled below 768px — it is the
   same state machine drawn twice.

   The figures are mounted eagerly by assets/js/site/lineup.js when the section
   approaches, precisely so this file may clip them: a figure hidden with
   clip-path is invisible to an IntersectionObserver, and media.js's lazy mount
   would never fire. See assets/css/motion.css for the general rule.
   ========================================================================== */
.lineup {
  padding-block: var(--stack);
  overflow: hidden;
}
.lineup .lead { margin-bottom: clamp(2rem, 5vw, 4rem); }

.lineup__stack {
  position: relative;
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}

/* --- one artist ------------------------------------------------------------- */
.art {
  position: relative;
  /* the names overlap: the stack is tighter than the sum of its rows, which is
     what makes it read as one object rather than four list items */
  margin-top: clamp(-1.4rem, -2.4vw, -0.6rem);
}
.art:first-child { margin-top: 0; }

.art__hit {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding-block: clamp(0.2rem, 0.8vw, 0.6rem);
}

.art__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(3rem, 15vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  /* inactive names are an outline: present, spatial, and clearly not the one
     you are looking at — a difference in WEIGHT and fill, not only in colour */
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 42%, transparent);
  transition: color var(--snap), -webkit-text-stroke-color var(--snap),
              transform var(--snap);
  transform-origin: left center;
}
.art.is-live .art__name {
  color: var(--ink);
  -webkit-text-stroke-color: transparent;
  /* forward in z-space through scale, as the brief asks — not a shadow */
  transform: scale(1.04);
}

/* --- the photograph, pushing out from behind the letters --------------------- */
.art__fig {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.art:nth-child(odd) .art__fig  { right: 4%; }
.art:nth-child(even) .art__fig { right: 30%; }
.art.is-live .art__fig { clip-path: inset(0 0 0 0); }

/* --- the foot: who is playing, the index, and their own waveform ------------- */
.lineup__foot { margin-top: clamp(2.4rem, 6vw, 4.5rem); }

.lineup__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.6rem;
  min-height: 3.2rem;          /* reserved, so stepping through does not jump */
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.lineup__role { color: var(--glow); }
.lineup__style { color: var(--ink-dim); font-size: 0.98rem; max-width: 46ch; }

.lineup__nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.lineup__step {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color var(--cut), background-color var(--cut), color var(--cut);
}
.lineup__step:hover, .lineup__step:focus-visible {
  border-color: var(--glow);
  color: var(--glow);
}
.lineup__index { color: var(--ink-dim); letter-spacing: 0.22em; }
.lineup__index b { color: var(--ink); font-weight: 400; }

/* --- phone: one artist at a time --------------------------------------------
   Not a disabled desktop layout — a different drawing of the same state. The
   inactive names are removed from the flow entirely, the active name is full
   width, and the photograph is the largest thing on the screen. */
@media (max-width: 899px) {
  .lineup__stack { touch-action: pan-y; }
  /* The inactive cards leave the flow entirely rather than being stacked
     absolutely inside a fixed-height box: an absolute stack needs a min-height
     guess, and every guess left a dead gap under the active artist. The figure
     has a fixed aspect ratio, so stepping between artists cannot jump. */
  .art { position: static; margin: 0; display: none; }
  .art.is-live { display: flex; flex-direction: column; gap: 1rem; }
  /* name first, photograph second — the name is the interface here too */
  .art__hit { order: -1; }
  .art__name { font-size: clamp(2.8rem, 15vw, 5rem); transform: none; }
  .art.is-live .art__name { transform: none; }
  .lineup__meta { min-height: 4.4rem; }
  .art__fig {
    position: relative;
    top: auto;
    right: auto !important;
    translate: none;
    width: 100%;
    aspect-ratio: 4 / 3;
    clip-path: none;
  }
}