/* ============================================================
   CLOCKSTOCK 2027 - line-up announcement (lineup.html only)
   Loaded AFTER style.css and scoped to body.page-lineup, so the
   live homepage, venue.html and privacy/terms are untouched.

   The client's new artwork changes the scene: the cartoon cloud sky
   and the spinning record are gone, replaced by a photographic
   orange sky with a ring of treetops and a white-lettered bill. So:

   - the bill IS the hero. Every line is the client's own lettering,
     cut row by row from lineup.png, at the poster's proportions.
   - signature: the bill is read out once on load, top to bottom,
     the way the names were announced, with the rule drawing itself
     across before the "very special guests" line. That replaces the
     record sheen (no record in this artwork).
   - the treetops frame an open "U" of sky in the middle of the
     photo; the layout keeps the white lettering inside that U, and a
     soft pool of sky colour sits behind the bill so foliage never
     shows through the letters on narrower crops.

   Palette sampled from background.png: sky centre #FFA522, left
   edge #FB6C15, right edge #F8A210, deep foliage #1F4A12.
   ============================================================ */

.page-lineup {
  --sky-mid:  #FFA522;
  --sky-red:  #FB6C15;
  --sky-gold: #F8A210;
  --leaf:     #1F4A12;
}
html:has(.page-lineup) { background: #FB8A12; }

/* --- background: the client's tree-ringed sky. Square source, so it is
   centred both ways: a landscape window crops top and bottom (keeping the
   open sky and the trees on both sides), a phone crops the side trees. --- */
.page-lineup .bg.bg--lineup {
  background: url("/assets/images/lineup/bg-1600.webp?v=20261004-1") center 42% / cover no-repeat,
              #FB8A12;
}
@media (min-aspect-ratio: 7/10) and (min-width: 1101px) {
  .page-lineup .bg.bg--lineup { background-image: url("/assets/images/lineup/bg-2560.webp?v=20261004-1"); }
}
/* Portrait: cover on the square photo would keep only a thin middle strip,
   leaving just slivers of tree at the very edges. bg-mobile.webp is the
   WHOLE square on a 9:16 canvas: sky extended upward (per-column sky
   colour + matched grain, seam feathered) and the canopy mirrored downward,
   so a phone sees both trees in full. The square sits HIGH (420px of sky
   above it at 1080 wide) so the tree line lands beside the bill rather than
   behind the sign-up card (Adam, 4 Oct). */
@media (max-aspect-ratio: 7/10) {
  .page-lineup .bg.bg--lineup {
    background-image: url("/assets/images/lineup/bg-mobile.webp?v=20261004-2");
    background-position: center bottom;
  }
}

/* ============================================================
   THE BILL
   Width is the FAITHLESS line. Every other image's width and every gap
   below is that row's share of it, measured off lineup.png (1753px
   FAITHLESS line). Vertical margins in % resolve against the bill's
   WIDTH, which is exactly what keeps the poster's spacing at any size.
   ============================================================ */
.page-lineup .bill {
  position: relative;
  isolation: isolate;
  width: min(88vw, 400px);
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
/* The sky pool below deliberately spills past the bill (inset -22% each
   side). On a phone that pushed the page ~52px wider than the screen and
   gave it a sideways scroll, so the stage clips horizontal overflow.
   `clip` (not hidden) so the stage never becomes a scroll container;
   `hidden` first is the fallback for Safari < 16. */
.page-lineup .stage { overflow-x: hidden; overflow-x: clip; }
/* the pool of sky behind the letters */
.page-lineup .bill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -22% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 24, 0.62), rgba(255, 150, 24, 0.34) 55%, rgba(255, 150, 24, 0) 100%);
  pointer-events: none;
}
.page-lineup .bill img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* a warm, low shadow lifts white off the brightest gold without
     reading as a grey drop shadow */
  filter: drop-shadow(0 1px 1px rgba(140, 50, 0, 0.30)) drop-shadow(0 4px 18px rgba(140, 50, 0, 0.28));
}
/* :where() keeps this reset at zero specificity, so the per-row margins
   below win without !important */
:where(.page-lineup .bill) :where(p, ul) { margin: 0; padding: 0; list-style: none; }

/* Lockup is well over its poster share (20.3%), at Adam's request: on the
   web it is the only brand mark on the page, not the top half of a pair.
   Cut at full source resolution (364px) so 38% stays sharp at 2x. */
.page-lineup .bill img.bill__lockup { width: 38%; }
.page-lineup .bill__kicker  { width: 76.8%; margin: 4.6% auto 0; }
.page-lineup .bill__faithless { width: 100%; margin: 5.2% auto 0; }
.page-lineup .bill__tong    { width: 59.7%; margin: 8.7% auto 0; }
.page-lineup .bill__rule {
  display: block;
  width: 35.9%;
  height: 0;
  padding-top: 0.91%;           /* the poster's rule: 629 x 16 */
  margin: 7.6% auto 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(140, 50, 0, 0.25);
}
.page-lineup .bill__guests  { width: 70.1%; margin: 7.2% auto 0; }
.page-lineup .bill__date    { width: 100%; margin: 9.5% auto 0; }
.page-lineup .bill img.bill__day  { width: 65.7%; }
.page-lineup .bill img.bill__park { width: 51.2%; margin-top: 1.4%; }

/* The poster's small print. Live text, body face, white on the sky. Each
   fact is its own span so a narrow screen breaks between facts, never
   inside one. */
.page-lineup .bill__info {
  margin: 5% auto 0;
  max-width: 34em;
  font-size: clamp(11.5px, 3vw, 13.5px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(140, 50, 0, 0.45), 0 0 14px rgba(140, 50, 0, 0.3);
}
.page-lineup .bill__info span { display: inline-block; white-space: nowrap; margin: 0 0.45em; }

/* ============================================================
   LAYOUT - bill and card side by side, centred as a pair inside the
   open sky (style.css lets the card column take all spare width and
   pins the card left, which pushes the pair off-centre over the
   right-hand tree).
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .page-lineup .stage__inner {
    max-width: 1120px;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: clamp(32px, 5vw, 80px);
  }
  .page-lineup .bill { width: clamp(300px, 34vw, 450px); margin: 0; }
  .page-lineup .signup { width: clamp(340px, 36vw, 470px); --panel-max: 100%; }
  .page-lineup .bill__info { font-size: clamp(11.5px, 1vw, 13.5px); }
}
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .page-lineup .bill { width: min(68vw, 480px); }
}
@media (max-width: 767px) {
  .page-lineup .stage__inner { padding-top: 26px; gap: 26px; }
}
/* landscape phones: the bill has to fit a ~375px-tall screen */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .page-lineup .bill { width: min(30vw, 236px); align-self: center; }
  .page-lineup .signup { width: auto; }
  .page-lineup .bill__info { font-size: 10.5px; }
}

/* --- socials: over the treetops on a phone, so they get a solid disc
   rather than bare ink on foliage --- */
.page-lineup .social__link { background: rgba(255, 255, 255, 0.88); opacity: 1; }
.page-lineup .social__link:hover,
.page-lineup .social__link:focus-visible { background: #fff; color: var(--orange-dk); }

/* --- footer: sits on the foliage now, so a firmer frosted strip --- */
.page-lineup .foot { background: rgba(255, 255, 255, 0.78); border-top-color: rgba(23, 23, 23, 0.1); }

/* ============================================================
   MOTION - the bill read out once, top to bottom. The card arrives
   early (0.2s) so the form is never waiting on the announcement.
   style.css's reduced-motion block kills all of this.
   ============================================================ */
@keyframes bill-in {
  from { opacity: 0; transform: translateY(0.6em) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Gated on no-preference rather than relying on style.css's reduced-motion
   kill switch: these selectors out-rank its `*` rule. Each row sets only its
   delay (--d) so one shorthand drives the whole sequence. */
@media (prefers-reduced-motion: no-preference) {
  .page-lineup .bill > *:not(.bill__acts),
  .page-lineup .bill__acts > li {
    animation: bill-in var(--dur, 0.7s) cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
  }
  .page-lineup .bill > .bill__rule {
    animation: rule-draw 0.6s cubic-bezier(0.65, 0, 0.35, 1) var(--d) both;
  }
}
.page-lineup .bill__lockup    { --d: 0.05s; }
.page-lineup .bill__kicker    { --d: 0.30s; }
.page-lineup .bill__faithless { --d: 0.60s; --dur: 0.9s; }
.page-lineup .bill__tong      { --d: 1.00s; --dur: 0.9s; }
.page-lineup .bill__rule      { --d: 1.40s; }
.page-lineup .bill__guests    { --d: 1.75s; }
.page-lineup .bill__date      { --d: 2.00s; }
.page-lineup .bill__info      { --d: 2.15s; }
.page-lineup .signup { animation-delay: 0.2s; }