/* ============================================================
   v8 — "Line-Up"
   Scroll-driven drink fan. Loaded on top of v1.css + v4.css.

   The whole section is driven by three progress values that
   v8.js writes onto .lineup__stage once per frame:

     --grow    0..1  hero cup scales up from the stack
     --fan     0..1  the other eight slide out left/right
     --settle  0..1  final easing for chrome (rule, counter)

   Every transform below is a pure function of those three, so
   scrubbing backwards is exact and nothing accumulates drift.
   ============================================================ */

.lineup {
  --spread: clamp(3.6rem, 8.9vw, 9.8rem);   /* horizontal step per slot */
  --lift: clamp(0.6rem, 1.4vw, 1.6rem);     /* arc height per slot */
  --cup-h: clamp(19rem, 54vh, 34rem);
  --grow: 0;
  --fan: 0;
  --settle: 0;
  position: relative;
  background: var(--cream, #fdf3ee);
  color: var(--fg, #511c35);
}

/* Tall spacer that defines how much scroll the sequence gets. */
.lineup__track {
  height: 380svh;
}

.lineup__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: clamp(4.5rem, 9vh, 7rem) var(--pad-x, clamp(1.25rem, 5vw, 5rem)) clamp(2rem, 5vh, 3.5rem);
}

/* Warm glow behind the centre cup — gives the cutouts somewhere to sit. */
.lineup__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(120vw, 68rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(238, 182, 160, .55) 0%, rgba(238, 182, 160, 0) 62%);
  opacity: calc(0.25 + 0.75 * var(--grow));
  scale: calc(0.6 + 0.4 * var(--grow));
  pointer-events: none;
}

/* ---------- Type ---------- */

.lineup__head {
  position: relative;
  z-index: 1;
  text-align: center;
  transform: translateY(calc(var(--grow) * -2.5vh));
  opacity: calc(1 - var(--fan) * .38);
}

.lineup__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral-ink, #a20811);
  margin-bottom: .9rem;
}

.lineup__title {
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  line-height: .92;
  text-transform: uppercase;
}

.lineup__title em {
  font-style: normal;
  color: var(--accent, #d90b17);
}

/* ---------- The fan ---------- */

.lineup__cups {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
}

.lineup__cup {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  z-index: var(--z, 1);
  /* Slots start stacked dead centre at the hero's small scale, so only the
     hero cup is visible until --fan lifts them out from behind it. */
  --s: calc((0.34 + 0.66 * var(--grow)) * (1 - (1 - var(--se)) * var(--fan)));
  transform:
    translate(calc(var(--slot) * var(--spread) * var(--fan)),
              calc(var(--lift) * var(--arc) * var(--fan)))
    rotate(calc(var(--slot) * 2.4deg * var(--fan)))
    scale(var(--s));
  will-change: transform;
}

.lineup__cup img {
  display: block;
  height: var(--cup-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  filter:
    brightness(calc(1 - var(--dim, 0) * var(--fan)))
    blur(calc(var(--blur, 0) * var(--fan) * 1px));
}

/* Contact shadow — replaces the reflection cut off the source photos. */
.lineup__cup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(50% - var(--cup-h) / 2 - .6rem);
  width: calc(var(--cup-h) * .42);
  height: calc(var(--cup-h) * .07);
  translate: -50% 0;
  background: radial-gradient(ellipse, rgba(81, 28, 53, .34) 0%, rgba(81, 28, 53, 0) 70%);
  opacity: calc((0.35 + 0.65 * var(--grow)) * (1 - var(--dim, 0)));
  pointer-events: none;
}

.lineup__cup--hero {
  --slot: 0;
  --arc: 0;
  --se: 1;
}

/* ---------- Bottom chrome ---------- */

.lineup__rule {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-top: 1px solid currentColor;
  padding-top: .8rem;
  opacity: calc(var(--settle) * .75);
  transform: translateY(calc((1 - var(--settle)) * 1.2rem));
}

/* ---------- Mobile: fewer cups, tighter fan ---------- */

@media (max-width: 860px) {
  .lineup {
    --spread: clamp(2.4rem, 11vw, 4.2rem);
    --cup-h: clamp(15rem, 42vh, 22rem);
  }
  .lineup__track { height: 320svh; }
  .lineup__cup[data-far] { display: none; }
}

/* ---------- Reduced motion: no pin, no scrub, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  .lineup__track { height: auto; }
  .lineup__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--section-y, clamp(4rem, 9vw, 7rem));
  }
  .lineup__stage::before { opacity: .5; scale: 1; }
  .lineup__head { transform: none; opacity: 1; }
  .lineup__cups {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
    gap: 1.5rem;
    margin: clamp(2rem, 5vw, 3.5rem) 0;
  }
  .lineup__cup {
    position: static;
    transform: none;
    display: block;
  }
  .lineup__cup[data-far] { display: block; }
  .lineup__cup img {
    height: clamp(11rem, 22vw, 17rem);
    filter: none;
  }
  .lineup__cup::after { display: none; }
  .lineup__rule { opacity: .75; transform: none; }
}