/* ============================================================
   STATE OF US — V1 artwork rebuild (image-faithful)
   Structure scaffold + horizontal-scroll (marquee) engine.
   Visual fidelity comes from the designer's own artwork; this
   CSS only positions, scrolls, and composites those pieces.
   ============================================================ */

:root{
  /* Palette sampled from the supplied artwork (fallbacks only —
     most colour is carried by the images themselves). */
  --bg-pink:   #e86fc4;   /* base swirl field magenta */
  --bg-pink-2: #ff9be6;
  --ink:       #2a0033;
  --cyan:      #22e0ff;
  --lime:      #7CFF3A;
  --orange:    #ff7a1a;

  /* Layout: the design is one tall portrait column. Full-bleed on
     phones, capped + centred on desktop with the swirl field around. */
  --col: 760px;            /* max content-column width */
  --gap: 0px;              /* sections butt together like the comp */

  /* Carousel tokens (carried over from the original build) */
  --pad: clamp(16px, 5vw, 30px);
  --neon-lime: #7CFF3A;
  --ink-2: #1a0030;
  --hot-pink: #ff2db5;
  --cream: #ffffff;
  --radius: 16px;
  --f-display: "Sigmar", "Outfit", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Outfit",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg-pink) url("/assets/img/v2/bg-swirl.webp") center top / 760px auto repeat;
  /* NOTE: normal-flow background (not fixed) so the verify harness can
     trim the screenshot to true content height. */
}

/* Centred content column; full-bleed bands live inside it. */
.page{
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  position:relative;
  overflow:hidden;              /* clip the horizontal marquees */
}

/* ---- generic full-width band ---- */
.band{ position:relative; width:100%; display:block; line-height:0; }
.band img{ display:block; width:100%; height:auto; }

/* ============================================================
   Horizontal scroll engine (the designer's "SCROLL →" bands)
   A track holds the image twice; we translateX -50% for a
   seamless loop. Direction + speed set per-band.
   ============================================================ */
.scroller{ position:relative; width:100%; height:100%; overflow:hidden; line-height:0; }
.scroller__track{
  display:flex; width:max-content; height:100%;
  animation:scroll-x var(--spd,40s) linear infinite;
  will-change:transform;
}
.scroller--rev .scroller__track{ animation-direction:reverse; }
.scroller__track > *{ flex:0 0 auto; height:100%; width:auto; }
.scroller__track img{ display:block; height:100%; width:auto; }
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes scroll-x3{ from{transform:translateX(0)} to{transform:translateX(-33.333%)} }
.scroller__track--3{ animation-name:scroll-x3; }
@media (prefers-reduced-motion:reduce){
  .scroller__track{ animation:none; }
}

/* ---- SECTION 1 — fixed crowd background + centred logo ---- */
.sec1{
  position:relative; width:100%; aspect-ratio:2727/1117;
  background:#2a0033 url("/assets/img/v2/section1.webp") center center / cover no-repeat;
}
.sec1__logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.sec1__logo img{ width:60%; max-width:440px; height:auto; }

/* ---- flower/star tickers ---- */
.ticker{ background:#01ff5a; display:block; line-height:0; font-size:0; padding:5px 0; }
.ticker .scroller__track{ --spd:75s; }
.ticker--red{ background:#ff5a5c; }

/* ---- SECTION 3 — pill + poster + BOOK NOW stacked on the gradient ---- */
.sec3{
  position:relative; width:100%;
  background:#6a4cd0 url("/assets/img/v2/section3.webp") center center / cover no-repeat;
  display:flex; flex-direction:column; align-items:center;
  padding:6% 0 7%;
}
.sec3__pill{ width:94%; max-width:700px; height:auto; display:block; }
.sec3__poster{ width:80%; margin-top:clamp(6px,1.8vw,14px); }   /* tight gap under the wider pill */
.sec3__poster img{ display:block; width:100%; height:auto; }
.sec3__booknow{ width:54%; max-width:420px; display:block; margin-top:clamp(20px,6vw,52px); }
.sec3__booknow img{ display:block; width:100%; height:auto; }

/* ---- dance-floor scrolling strip ---- */
/* Explicit integer px on both axes eliminates sub-pixel rounding gaps.
   Image 1332x233 @ 84px tall → width = 84×(1332/233) = 480px (rounded).
   Animation moves exactly 2×480px = 960px → -50% of max-content. */
.dancefloor{
  background:#ff00f1; display:block; line-height:0; font-size:0;
  height:84px; overflow:hidden;
}
.dancefloor .scroller{ height:84px; }
.dancefloor .scroller__track{ height:84px; animation:scroll-df 8s linear infinite; gap:10px; }
.dancefloor .scroller__track img{ display:block; width:480px; height:84px; flex-shrink:0; }
@keyframes scroll-df{ to{ transform:translateX(-490px); } }

/* ---- LINE UP heading ---- */
.lineup-head{ text-align:center; padding:5% 0 2%; }
.lineup-head img{ display:inline-block; width:74%; max-width:560px; height:auto; }

/* ---- SECTION 8 — fixed seagulls background + centred BOOK NOW ---- */
.sec8{
  position:relative; width:100%; aspect-ratio:3158/1065;
  background:#7ee0a0 url("/assets/img/v2/section8.webp") center center / cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.sec8__cta{ display:block; width:54%; max-width:420px; }
.sec8__cta img{ display:block; width:100%; height:auto; }

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Lineup carousel — carried over from the original build
   (Hannah confirmed this "works really well").
   ============================================================ */
.lineup{ position:relative; }
/* SECTION 6 — purple background holding the LINE UP head (swirls + heading) + carousel */
.sec6{
  background:#7a3cf0 url("/assets/img/v2/section6.webp") center center / cover no-repeat;
  padding:11% 0 9%;
}
.sec6__head{
  position:relative; width:62%; max-width:460px;
  margin:0 auto clamp(34px,8vw,64px);
  display:flex; align-items:center; justify-content:center;
}
.sec6__swirls{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:108%; height:auto; pointer-events:none;
}
.sec6__lineup{ position:relative; z-index:2; width:94%; height:auto; display:block; }
.lineup__nav{ display:flex; gap:10px; justify-content:center; margin-top:clamp(14px,3vw,22px); }
.lineup__btn{
  width:52px; height:52px; border-radius:50%;
  background:rgba(26,0,48,.55); border:2px solid var(--cyan); color:var(--cyan);
  font-size:22px; display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s ease; backdrop-filter:blur(8px);
}
.lineup__btn:hover{ background:var(--neon-lime); border-color:var(--neon-lime);
  color:var(--ink); transform:scale(1.06); }
.lineup__btn:active{ transform:scale(.95); }
.lineup__rail{
  overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
  scroll-padding:var(--pad); scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding:clamp(12px,2vw,22px) var(--pad); cursor:grab;
}
.lineup__rail::-webkit-scrollbar{ height:0; }
.lineup__rail{ scrollbar-width:none; }
.lineup__rail.is-dragging{ cursor:grabbing; }
.lineup__rail.is-dragging *{ pointer-events:none; }
.lineup__track{ display:flex; gap:clamp(16px,2vw,28px); align-items:stretch; width:max-content; }
.lcard{
  flex:0 0 clamp(120px,30vw,200px); aspect-ratio:9/16; border-radius:var(--radius);
  overflow:hidden; scroll-snap-align:center; position:relative;
  box-shadow:0 0 0 4px #fff, 0 12px 26px rgba(0,0,0,.45); background:var(--ink);
  transition:transform .35s ease, box-shadow .35s ease;
}
.lcard:nth-child(odd){ transform:rotate(-1.5deg) translateY(8px); }
.lcard:nth-child(even){ transform:rotate(1.5deg) translateY(-8px); }
.lcard:hover{ transform:rotate(0) translateY(0) scale(1.04); z-index:5; }
.lcard img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s ease, filter .35s ease; }
.lcard:hover img{ transform:scale(1.06); filter:saturate(1.15); }
.lcard--more{ display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 50% at 50% 30%, rgba(95,239,255,.3), transparent 70%),
             radial-gradient(60% 50% at 50% 70%, rgba(255,54,200,.3), transparent 70%), var(--ink-2);
  padding:14px; box-shadow:0 0 0 4px #fff, 0 18px 40px rgba(0,0,0,.45); }
.lcard__more{ text-align:center; font-family:var(--f-display); color:var(--cream);
  font-size:clamp(13px,3.2vw,18px); line-height:1.25; }
.lcard__more p{ margin:8px 0; }
.lineup__progress{ margin:20px var(--pad) 0; height:4px; background:rgba(255,255,255,.18);
  border-radius:999px; overflow:hidden; }
.lineup__progress-bar{ height:100%; width:100%;
  background:linear-gradient(90deg, var(--hot-pink), var(--neon-lime), var(--cyan));
  transform-origin:0 0; transform:scaleX(0); transition:transform .15s ease-out; }

/* ---- scrolling-band heights (column-relative, capped for the 760px column) ---- */
.ticker{    height: min(8vw, 56px); }
.seagulls{  height: min(34vw, 258px); }

/* ---- SECTION 9 — footer ---- */
.sec9{
  background:#2a0033;
  color:#fff;
  text-align:center;
  padding:clamp(26px,7vw,46px) var(--pad) clamp(30px,8vw,52px);
}
.sec9__legal{
  margin:4px 0; font-size:clamp(11px,3vw,13px); letter-spacing:.12em;
  text-transform:uppercase; opacity:.82;
}
.sec9__built{ margin:clamp(16px,4vw,26px) 0 0; }
.sec9__built a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; text-decoration:none;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s ease;
}
.sec9__built a:hover{ background:rgba(255,255,255,.2); }
.sec9__built img{ display:block; height:14px; width:auto; }