/* Giga Titty Ass ($GTA) — coastal-nightlife meme-token site.
   Copy placement is derived from the measured banner geometry in ASSETS.md:
   title in the upper-left quiet sky (never past x 0.40), control rail on the
   dark hood (never past x 0.44), nothing on the bright right-hand water. */

:root {
  --bg: #110B19;
  --pink: #FF2EAA;
  --magenta: #B51478;
  --coral: #FF7858;
  --gold: #FFD16A;
  --violet: #7637CB;
  --cyan: #66E7FF;
  --white: #FFF3E9;
  --muted: #C3AFD0;

  --display: 'Anton', Impact, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;

  --pano: 2.4;              /* desktop panorama aspect */
  --shell: 1480px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; margin: 0; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--pink); color: #fff; padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(17, 11, 25, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 46, 170, .28);
}

.nav-row {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px 26px;
  display: flex; align-items: center; gap: 28px;
}

.wordmark {
  display: flex; flex-direction: column; line-height: .82;
  font-family: var(--display); text-decoration: none;
  -webkit-text-stroke: 1px #0b0710;
}
.wm-1 { font-size: 19px; color: var(--white); letter-spacing: .02em; }
.wm-2 {
  font-size: 25px; letter-spacing: .04em;
  background: linear-gradient(95deg, var(--pink), var(--coral) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark.small .wm-1 { font-size: 15px; }
.wordmark.small .wm-2 { font-size: 20px; }

.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-decoration: none; color: var(--muted);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.on { color: var(--white); border-bottom-color: var(--pink); }

.nav-buy { padding: 9px 16px; font-size: 13px; }

.nav-rail {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 26px 9px;
  display: flex; align-items: center; gap: 16px;
}
.loc {
  font-size: 11px; font-weight: 700; letter-spacing: .26em;
  color: var(--gold); white-space: nowrap;
}
.rail-track { flex: 1; height: 2px; background: rgba(255, 46, 170, .2); }
.rail-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pink), var(--gold));
  transition: width .3s ease;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: 14px; font-weight: 800;
  letter-spacing: .1em; text-decoration: none;
  padding: 13px 22px; border: 2px solid transparent; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.btn-pink {
  background: var(--pink); color: #15070F;
  box-shadow: 0 6px 0 var(--magenta);
}
.btn-pink:hover { box-shadow: 0 8px 0 var(--magenta), 0 0 32px rgba(255, 46, 170, .5); }

.btn-ghost {
  background: rgba(10, 7, 16, .55); color: var(--white);
  border-color: rgba(255, 243, 233, .35);
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

.btn-cyan {
  background: rgba(10, 7, 16, .55); color: var(--cyan);
  border-color: var(--cyan);
}
.btn-cyan[aria-pressed="true"] {
  background: var(--cyan); color: #06121A;
  box-shadow: 0 0 34px rgba(102, 231, 255, .65);
}

/* ---------- scene shell ---------- */

/* Height of the sticky nav + location rail. Scene copy clears it so no
   headline is ever cut off when a section is scrolled to its anchor. */
:root { --navh: 92px; }

.scene { position: relative; scroll-margin-top: var(--navh); }
.stops { scroll-margin-top: var(--navh); }

.scene-art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pano);
  overflow: hidden;
  background: #0A0710;
}
/* A probed-missing image is hidden outright; `hidden` alone loses to the
   positioning rule below and would paint its alt text over the stand-in. */
.scene-art img[hidden] { display: none !important; }

.scene-art img, .standin, .standin svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vig {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,7,16,.72), rgba(10,7,16,0) 46%),
    linear-gradient(0deg, rgba(10,7,16,.62), rgba(10,7,16,0) 34%);
}

/* Copy layers sit over the art, inside the measured clear zones. */
.scene-copy {
  position: absolute; inset: 0;
  max-width: var(--shell); margin: 0 auto;
  padding: 0 26px;
  pointer-events: none;
}
.scene-copy a, .scene-copy button, .scene-copy .ca-pill, .scene-copy .board,
.scene-copy .display { pointer-events: auto; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  color: var(--gold); margin: 0 0 12px;
}
.eyebrow.center { text-align: center; }

.lede { color: var(--white); opacity: .92; max-width: 42ch; margin: 14px 0 0; }

.grad {
  background: linear-gradient(95deg, var(--pink), var(--coral) 52%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 01 hero ---------- */

.hero-copy {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: calc(var(--navh) * .34 + clamp(14px, 2.6vw, 42px));
}
.hero-copy > * { max-width: min(38%, 560px); }   /* never crosses x 0.40 */

.title-name {
  display: block;
  font-size: clamp(15px, 1.35vw, 21px);
  letter-spacing: .22em;
  font-family: var(--body); font-weight: 800;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(10, 7, 16, .9);
  margin-bottom: 10px;
}
.title-line {
  display: block;
  font-size: clamp(30px, 4.3vw, 70px);
  line-height: .93;
  -webkit-text-stroke: clamp(1.5px, .19vw, 3px) #0B0710;
  paint-order: stroke fill;
  text-shadow: 0 6px 26px rgba(10, 7, 16, .75);
}
.hero-copy .lede {
  font-size: clamp(14px, 1.15vw, 18px);
  text-shadow: 0 2px 12px rgba(10, 7, 16, .95);
}

.rail {
  position: absolute; left: 0; right: 0;
  bottom: clamp(16px, 2.6vw, 42px);
  max-width: var(--shell); margin: 0 auto;
  padding: 0 26px;
}
.rail-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  max-width: min(44%, 660px);              /* never crosses x 0.44 */
  background: rgba(10, 7, 16, .5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 46, 170, .3);
  border-radius: 4px; padding: 14px;
}
.light-caption {
  margin: 10px 0 0; font-style: italic; color: var(--cyan);
  font-size: 15px; text-shadow: 0 2px 10px rgba(10, 7, 16, .95);
}

/* ---------- contract pill ---------- */

.ca-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px; max-width: 100%;
  background: rgba(10, 7, 16, .72);
  border: 1px solid rgba(255, 46, 170, .42);
  border-radius: 3px; padding: 9px 10px 9px 12px;
}
.ca-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .2em;
  color: var(--gold); white-space: nowrap;
}
.ca-pill code {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copy {
  font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: .12em;
  background: var(--pink); color: #15070F; border: 0; border-radius: 2px;
  padding: 7px 11px; cursor: pointer; white-space: nowrap;
}
.copy:hover { background: var(--gold); }
.ca-pill.wide { display: flex; width: 100%; }
.ca-pill.wide code { flex: 1; }

/* ---------- bands between scenes ---------- */

.band {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  padding: 11px 26px;
  background: linear-gradient(90deg, var(--magenta), var(--pink) 45%, var(--coral));
  color: #15070F;
  font-size: 11px; font-weight: 800; letter-spacing: .3em;
}
.band-alt { background: linear-gradient(90deg, var(--violet), var(--magenta) 60%, var(--pink)); color: var(--white); }

/* ---------- 02 boulevard ---------- */

/* The painted ad board occupies y 0.14 → 0.62 of the plate; the copy
   block starts at that top edge so it lands on the blank surface. */
/* The ad board's frame and surface are painted into the plate (x 0.03 → 0.34,
   y 0.14 → 0.62), so the HTML block only supplies text inside it — no second
   border, no second background. */
/* The copy is centred inside the painted rectangle's vertical span rather than
   pinned to its top edge, so the block stays balanced as the text reflows. */
/* Pinned to the painted board's exact rectangle so the text is centred on the
   surface itself. These two layers must span the full scene, not the shell,
   or the percentages drift off the painted panel on wide viewports. */
.board-copy, .display-copy { max-width: none; padding: 0; }
/* Measured on the delivered plate: the blank board spans x 0.058 → 0.421,
   y 0.110 → 0.490. Inset a little so text never touches the painted bezel. */
.board {
  position: absolute;
  left: 7.5%; top: 13%; width: 33%; height: 33%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(12px, 1.3vw, 22px);
  /* The copy must not outgrow the painted surface: scale it to the board. */
  font-size: clamp(11px, .85vw, 14px);
}
.board .eyebrow { margin-bottom: 6px; font-size: .78em; }
.board h2 { font-size: clamp(18px, 2.2vw, 36px); line-height: .95; }
.board p { font-size: 1em; line-height: 1.45; color: var(--muted); margin: 10px 0 0; }

.quote {
  position: absolute; margin: 0;
  font-style: italic; font-size: clamp(13px, 1.1vw, 18px);
  color: var(--white); text-shadow: 0 2px 14px rgba(10, 7, 16, .95);
}
.quote-boulevard { left: 26px; bottom: 22%; max-width: 30%; }

.controls {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 2vw, 32px);
  max-width: var(--shell); margin: 0 auto; padding: 0 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.ctl-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ctl {
  font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: .14em;
  background: rgba(10, 7, 16, .62); color: var(--white);
  border: 1px solid rgba(255, 243, 233, .32); border-radius: 2px;
  padding: 9px 13px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ctl:hover { border-color: var(--pink); }
.ctl[aria-pressed="true"] { background: var(--pink); color: #15070F; border-color: var(--pink); }
.ctl-group.radio .ctl[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
.radio-line {
  margin: 0; font-style: italic; color: var(--gold); font-size: 14px;
  text-shadow: 0 2px 10px rgba(10, 7, 16, .95); flex-basis: 100%;
}

/* ---------- 03 waterfront display ---------- */


/* Measured on the delivered plate: the blank interior spans x 0.546 → 0.908,
   y 0.200 → 0.630. The art-deco frame is painted, so this is text only. */
.display {
  position: absolute;
  left: 56%; top: 21.5%; width: 33.5%; height: 40%;
  display: flex; flex-direction: column; justify-content: center;
  overflow: auto;
  padding: clamp(12px, 1.4vw, 24px) clamp(14px, 1.6vw, 28px);
}
/* Everything inside the display scales with the viewport so the block always
   fits the painted interior, which is only ~33.5% x 40% of the scene. */
.display-title { font-size: clamp(16px, 1.7vw, 30px); line-height: .95; }

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, .5vw, 9px); margin: clamp(7px, .8vw, 13px) 0;
}
.facts div { border-left: 2px solid var(--pink); padding-left: clamp(5px, .5vw, 9px); }
.facts dt { font-size: clamp(7px, .52vw, 9px); font-weight: 800; letter-spacing: .16em; color: var(--gold); }
.facts dd { margin: 1px 0 0; font-size: clamp(10px, .82vw, 14px); font-weight: 700; }

.display .eyebrow { font-size: clamp(7px, .52vw, 10px); margin-bottom: clamp(3px, .4vw, 7px); }
.display .ca-pill { margin-top: 0; padding: clamp(5px, .5vw, 8px) clamp(6px, .6vw, 10px); }
.display .ca-pill code { font-size: clamp(8px, .68vw, 12px); }
.display .ca-tag { font-size: clamp(7px, .5vw, 9px); }
.display .copy { font-size: clamp(7px, .52vw, 10px); padding: clamp(4px, .42vw, 7px) clamp(6px, .6vw, 10px); }

.display-actions { display: flex; flex-wrap: wrap; gap: clamp(5px, .5vw, 9px); margin-top: clamp(7px, .8vw, 13px); }
.display-actions .btn {
  font-size: clamp(8px, .62vw, 11px);
  padding: clamp(6px, .62vw, 10px) clamp(8px, .85vw, 15px);
}

.chart-panel { margin-top: 14px; border: 1px solid rgba(255, 46, 170, .4); }
.chart-panel iframe { display: block; width: 100%; height: 340px; border: 0; }
.chart-panel .chart-note {
  margin: 0; padding: 18px; font-size: 14px; color: var(--muted); text-align: center;
}

/* ---------- how to buy ---------- */

.stops { max-width: var(--shell); margin: 0 auto; padding: clamp(50px, 6vw, 92px) 26px; }
.stops h2 { font-size: clamp(30px, 4vw, 58px); line-height: .95; }
.center { text-align: center; }

.route {
  list-style: none; margin: clamp(34px, 4vw, 54px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  position: relative;
}
.route::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 22px, transparent 22px 40px);
}
.route li { position: relative; padding-top: 70px; }
.route .n {
  position: absolute; top: 0; left: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--pink);
  font-family: var(--display); font-size: 21px; color: var(--pink);
}
.route h3 { font-size: 19px; letter-spacing: .04em; }
.route p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- 04 last look ---------- */

.final-copy {
  display: flex; flex-direction: column; justify-content: center;
}
.final-copy > * { max-width: min(34%, 520px); }   /* left third, x 0.02–0.34 */
.final-copy h2 {
  font-size: clamp(28px, 3.8vw, 62px); line-height: .93;
  -webkit-text-stroke: clamp(1.5px, .18vw, 3px) #0B0710; paint-order: stroke fill;
}
.final-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- footer ---------- */

.foot {
  max-width: var(--shell); margin: 0 auto;
  padding: 40px 26px 56px;
  border-top: 1px solid rgba(255, 46, 170, .25);
}
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--pink); }
.disclaimer { margin: 22px 0 0; font-size: 12px; color: var(--muted); max-width: 70ch; }
.visits { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- light-it-up overlay ---------- */

.lightfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.lightfx.on { opacity: 1; }

/* The delivered headlight mask is registered to the car's painted lamps and
   is composited with `screen`. When it loads, the CSS beam below stands down.
   The pack's light-underglow.png arrived truncated and was rejected, so the
   pink ground pool stays a CSS gradient. */
.lightfx .beam-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen;
  /* The painted hood is already bright pink, so screen alone reads faint.
     Lift the mask's own contrast so the cyan lamp separates from the paint. */
  filter: brightness(1.45) saturate(1.2) contrast(1.15);
}
/* Same treatment for the ground pool. The delivered file was rejected, so this
   is the derived stand-in from tools/derive.py until a clean export lands. */
.lightfx .glow-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen;
}
.lightfx:has(.beam-art:not([hidden])) .beam { display: none; }
.lightfx:has(.glow-art:not([hidden])) .underglow { display: none; }

/* Fallback beam, used when the painted mask is unavailable. */
.lightfx .beam {
  position: absolute; left: 1%; bottom: 0; width: 46%; height: 30%;
  background: radial-gradient(ellipse at 22% 72%, rgba(216, 246, 255, .95), rgba(102, 231, 255, .42) 32%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(2px);
}
.lightfx .underglow {
  position: absolute; left: 0; bottom: 0; width: 56%; height: 22%;
  background: radial-gradient(ellipse at 42% 100%, rgba(255, 46, 170, .85), rgba(181, 20, 120, .35) 46%, transparent 76%);
  mix-blend-mode: screen; filter: blur(10px);
}
.lightfx .sweep {
  position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 243, 233, .5) 48%, transparent 58%);
  mix-blend-mode: screen; transform: translateX(-120%);
}
.lightfx.on .sweep { animation: sweep 1.1s ease-out .05s 1; }
@keyframes sweep { to { transform: translateX(120%); } }

/* The opening sequence reflection, once, under two seconds. */
.scene-art.intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 243, 233, .4) 46%, transparent 56%);
  mix-blend-mode: screen;
  animation: sweep 1.25s ease-out 1 forwards;
}

/* ---------- reveals ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.ready .reveal { animation: rise .6s cubic-bezier(.2,.7,.3,1) forwards; }
.ready .reveal[data-d="1"] { animation-delay: .35s; }
.ready .reveal[data-d="2"] { animation-delay: .55s; }
.ready .reveal[data-d="3"] { animation-delay: .8s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Ambient drift on the art itself — light and environment only. */
.scene-art img { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.012) translateX(-.35%); } to { transform: scale(1.012) translateX(.35%); } }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--pink); color: #15070F;
  font-weight: 800; font-size: 13px; letter-spacing: .1em;
  padding: 12px 20px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 60;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-art img { animation: none; }
  .reveal { opacity: 1; transform: none; animation: none !important; }
  .lightfx .sweep, .scene-art.intro::after { animation: none; display: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}