/* ============================================================================
   GigVite · neon honky-tonk cutlist
   Theme tokens first, then the page's own vocabulary. Engine selectors are
   never restyled here.
   ========================================================================== */

:root {
  --sc-canvas:      #0b0705;
  --sc-surface:     #171009;
  --sc-ink:         #f6eee0;
  --sc-ink-soft:    #b3a48d;
  --sc-accent:      #f2a41b;
  --sc-accent-ink:  #1d1204;
  --sc-font-display: "Alfa Slab One", "Archivo", system-ui, serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --sc-shadow-color: 24 60% 3%;

  /* page-only tokens */
  --gv-oxblood: #140a08;
  --gv-bruise:  #10080a;
  --gv-night:   #0a0c12;
  --gv-show:    #0b0a10;
  --gv-black:   #070605;
  --gv-vault:   #120d05;
  --gv-offer:   #120b06;
  --gv-neon:    #ffc247;
  --pot-h: clamp(2.6rem, 6vh, 3.4rem);
}

/* --------------------------------------------------------------- chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: stretch; gap: 0;
  height: 3.4rem; margin-top: 2px; /* clear the progress hairline */
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.bar__mark {
  display: flex; align-items: center; gap: 0.55rem;
  padding-inline: var(--sc-gutter);
  font-family: var(--sc-font-display);
  font-size: 1.15rem; letter-spacing: 0.01em;
  text-decoration: none; color: var(--sc-ink);
  border-right: 1px solid var(--sc-hairline);
  white-space: nowrap;
}
.bar__mark svg { width: 1.3rem; height: 1.3rem; }
.bar__marquee { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.bar__reel {
  display: flex; white-space: nowrap; width: max-content;
  animation: gv-reel 26s linear infinite;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.bar__reel > span { padding-right: 0.5rem; }
@keyframes gv-reel { to { transform: translateX(-50%); } }
.bar__cta {
  display: flex; align-items: center; padding-inline: clamp(1rem, 3vw, 2.2rem);
  font-family: var(--sc-font-display); font-size: 0.95rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none; white-space: nowrap;
  transition: filter var(--sc-d-fast) var(--sc-ease-out);
}
.bar__cta:hover { filter: brightness(1.08); }
.bar__cta:active { transform: translateY(1px); }

/* ----------------------------------------------------------------- cuts -- */
.cut {
  position: relative; overflow: clip;
  display: grid; align-items: center;
  min-height: 86svh;
  padding-block: clamp(3.5rem, 7vh, 6rem);
  background: var(--sc-canvas);
}
.cut__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
}
.cut__inner--center { text-align: center; display: grid; justify-items: center; gap: var(--sc-6); }
.cut__label { color: var(--sc-accent); }
/* over photography the label becomes a stamped chip: opaque ground, no leaks */
.cut--hero .cut__label {
  display: inline-block;
  background: var(--sc-canvas);
  border: 1.5px solid color-mix(in oklab, var(--sc-accent) 60%, transparent);
  border-radius: var(--sc-r-sm);
  padding: 0.45em 0.7em;
  transform: rotate(-1deg);
}

.cut__split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.cut__split--rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

/* hard-cut grounds, painted per section (a cut is not an interpolation) */
/* pinned scrub cuts: the engine owns their height; sticky needs no clip box */
.cut--hero, .cut--doors {
  display: block; overflow: visible;
  padding: 0; min-height: 0;
  background: var(--sc-canvas);
}
.cut--hero .slab--xl { max-width: 13ch; }
.hero__lede { max-width: 34ch; }
/* column of density under the copy, holding ≥0.8 alpha across its full reach
   so neon hot spots cannot leak through a single pixel of the text zone */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 56%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 76%,
    transparent 92%);
}
.cut--offer    { background: var(--gv-offer); }
.cut--app      { background: var(--sc-canvas); }
.cut--cancel   { background: var(--gv-oxblood); min-height: 78svh; }
.cut--sos      { background: var(--gv-bruise); }
.cut--filled   { background: var(--sc-canvas); }
/* dense top band: holds the headline against the clip's brightest late frames,
   when the push-in lifts the stage beams into the upper third */
.doors-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--gv-night) 97%, transparent) 0%,
    color-mix(in oklab, var(--gv-night) 90%, transparent) 30%,
    color-mix(in oklab, var(--gv-night) 62%, transparent) 46%,
    transparent 66%);
}

/* DOORS copy lives in the still's dark smoky upper band */
.doors-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  top: clamp(6rem, 15vh, 10rem);
  text-align: center;
  will-change: opacity, transform;
}
.cut--requests { background: var(--gv-show); }
.cut--pool     { background: var(--gv-night); }
.cut--lastcall { background: var(--gv-black); min-height: 92svh; }
.cut--split1   { background: var(--gv-vault); min-height: 88svh; }
.cut--split2   { background: var(--gv-vault); min-height: 92svh; padding-bottom: 42svh; }
.cut--settled  { background: var(--sc-canvas); }
.cut--close    { background: var(--sc-canvas); min-height: 100svh; }

/* ----------------------------------------------------------------- type -- */
.slab {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.002em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.slab--xl { font-size: clamp(2.6rem, 7.4vw, 6.4rem); }
.slab--lg { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
.slab--md { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }

.hero__lede { max-width: 38ch; }

/* poster-wall texture: giant outlined words behind the copy */
.wall {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center; overflow: clip;
}
.wall__word {
  font-family: var(--sc-font-display);
  font-size: clamp(9rem, 30vw, 26rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--sc-ink) 11%, transparent);
  transform: rotate(-4deg);
  user-select: none;
}
.wall--tape .wall__word { transform: rotate(3deg); -webkit-text-stroke-color: color-mix(in oklab, #e0637a 22%, transparent); }
.wall--set {
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding-inline: 4vw;
}
.wall--set span {
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--sc-ink) 9%, transparent);
  white-space: nowrap;
  user-select: none;
}
.wall--set span:nth-child(even) { align-self: flex-end; transform: rotate(-1.5deg); }
.wall--set span:nth-child(odd)  { transform: rotate(1deg); }

/* neon: earned by the brief ("neon honky-tonk night"), used exactly twice */
.neon {
  font-family: var(--sc-font-display);
  color: var(--gv-neon);
  text-shadow:
    0 0 6px color-mix(in oklab, var(--gv-neon) 55%, transparent),
    0 0 24px color-mix(in oklab, var(--sc-accent) 40%, transparent),
    0 2px 30px color-mix(in oklab, var(--sc-accent) 26%, transparent);
}
.neon--corner {
  position: absolute; z-index: 1; top: clamp(4.6rem, 10vh, 7rem); right: var(--sc-gutter);
  font-size: clamp(0.9rem, 1.6vw, 1.3rem);
  letter-spacing: 0.22em;
  border: 2px solid color-mix(in oklab, var(--gv-neon) 55%, transparent);
  border-radius: var(--sc-r-lg);
  padding: 0.7em 1.1em;
  transform: rotate(2deg);
  box-shadow: 0 0 22px -6px color-mix(in oklab, var(--sc-accent) 45%, transparent);
  animation: gv-flicker 7s step-end infinite;
}
.neon--big { font-size: clamp(4rem, 15vw, 13rem); line-height: 0.95; margin: 0; }
@keyframes gv-flicker {
  0%, 6.9%, 7.4%, 44.9%, 45.3%, 100% { opacity: 1; }
  7% , 45% { opacity: 0.35; }
}

/* --------------------------------------------------------------- ticket -- */
.ticket {
  position: relative; margin: 0;
  width: min(34rem, 92%);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), var(--sc-edge);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  transform: rotate(-1.6deg);
  text-align: left;
}
.ticket__punch {
  position: absolute; inset: 0 auto 0 4.2rem; width: 0;
  border-left: 2px dashed var(--sc-hairline-strong);
}
.ticket__venue {
  margin: 0 0 0.3rem; padding-left: 4.6rem;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.ticket__room {
  margin: 0; padding-left: 4.6rem;
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.05; color: var(--sc-ink);
}
.ticket__row {
  display: flex; gap: 1.4rem; padding-left: 4.6rem; margin-top: 1rem;
  font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
}
.ticket__money {
  margin: 1.4rem 0 0; padding-left: 4.6rem;
  font-size: var(--sc-t-lg); color: var(--sc-ink);
}
.ticket__money strong {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--sc-accent);
  margin-right: 0.35rem;
}
.ticket__stamp {
  position: absolute; top: 1.1rem; right: 1rem; margin: 0;
  font-family: var(--sc-font-text); font-weight: 900; font-size: 0.85rem;
  letter-spacing: 0.16em; color: var(--sc-accent);
  border: 2px solid var(--sc-accent); border-radius: var(--sc-r-sm);
  padding: 0.35em 0.6em; transform: rotate(7deg); opacity: 0.9;
}

/* --------------------------------------------------------------- phones -- */
.phone { margin: 0; display: grid; justify-items: center; }
.phone__frame {
  width: min(17rem, 74vw);
  border-radius: 44px;
  border: 6px solid #241c11;
  outline: 1.5px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  background: var(--gv-black);
  box-shadow: var(--sc-e3);
  overflow: hidden;
}
.phone__video { width: 100%; aspect-ratio: 900 / 1794; object-fit: cover; border-radius: 38px; }

/* --------------------------------------------------------------- claims -- */
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; max-width: 26rem; }
.claims li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.65rem 0.9rem;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e1), var(--sc-edge);
  font-weight: 600; font-size: 0.95rem;
}
.claims li em { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- ticker -- */
.ticker {
  position: absolute; top: clamp(4.2rem, 9vh, 6.4rem); left: 0; right: 0; z-index: 1;
  overflow: hidden;
  border-block: 1px solid var(--sc-hairline);
  padding-block: 0.5rem;
}
.ticker__reel {
  display: flex; white-space: nowrap; width: max-content;
  animation: gv-reel 22s linear infinite;
  font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--sc-accent);
}

/* ------------------------------------------------------- pool + lastcall -- */
.pool__frame { display: inline-block; }
.pool__lede { max-width: 44ch; margin-inline: auto; }
.quiet {
  margin: 0; font-size: var(--sc-t-lg); line-height: 1.5;
  color: var(--sc-ink-soft); letter-spacing: var(--sc-track-snug);
}
.quiet--dread { color: var(--sc-ink); }

.split__note { max-width: 40ch; margin-inline: auto; }

/* ---------------------------------------------------------------- close -- */
.close__line { max-width: 12ch; margin-inline: auto; }
.cta {
  display: inline-block;
  font-family: var(--sc-font-display); font-size: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none;
  padding: 0.9em 1.8em; border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), filter var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.cta:active { transform: translateY(1px); }
.foot { margin-top: clamp(2.5rem, 7vh, 5rem); display: grid; gap: 0.4rem; justify-items: center; }
.foot__note { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 52ch; }
.foot__legal { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- THE POT -- */
.pot {
  position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-mono);
}
.pot__bar {
  display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.4rem);
  height: var(--pot-h);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--gv-black) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sc-hairline-strong);
}
.pot__word {
  font-family: var(--sc-font-text); font-weight: 900; font-size: 0.72rem;
  letter-spacing: 0.2em; color: var(--sc-ink-soft);
}
.pot__amount {
  font-size: clamp(1rem, 2.4vw, 1.35rem); font-weight: 600;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
  min-width: 5.2ch;
}
.pot__state {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pot__dots { margin-left: auto; display: flex; gap: 0.4rem; }
.pot__dots i {
  width: 0.55rem; height: 0.55rem; border-radius: 999px;
  background: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  transition: background var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.pot--lineup .pot__dots i {
  background: var(--sc-accent);
  box-shadow: 0 0 10px -2px color-mix(in oklab, var(--sc-accent) 70%, transparent);
}
.pot--settled .pot__amount { color: #9fe6a0; }

.pot__ledger {
  position: absolute; left: 0; right: 0; bottom: var(--pot-h);
  display: grid; gap: 1px;
  background: var(--gv-black);
  border-top: 1px solid var(--sc-hairline-strong);
  /* hidden state must clear its own height PLUS the bar it sits above */
  transform: translateY(calc(100% + var(--pot-h) + 4px));
  will-change: transform;
}
.pot--open .pot__ledger { box-shadow: 0 -30px 60px -30px hsl(var(--sc-shadow-color) / 0.8); }
.pot__row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: clamp(0.8rem, 3vw, 2rem);
  padding: clamp(0.55rem, 1.6vh, 0.9rem) var(--sc-gutter);
  background: var(--gv-vault);
  opacity: 0.35;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.pot__row.is-filling, .pot__row.is-done { opacity: 1; }
.pot__who { font-family: var(--sc-font-text); font-weight: 700; font-size: clamp(0.85rem, 2vw, 1.05rem); color: var(--sc-ink); }
.pot__who em { font-style: normal; font-weight: 400; font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--sc-ink-soft); margin-left: 0.5rem; }
.pot__cash {
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-weight: 600;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
  min-width: 4.5ch; text-align: right;
}
.pot__paid {
  font-family: var(--sc-font-text); font-weight: 900; font-size: 0.68rem;
  letter-spacing: 0.14em; color: #9fe6a0;
  border: 1.5px solid color-mix(in oklab, #9fe6a0 55%, transparent);
  border-radius: var(--sc-r-sm);
  padding: 0.28em 0.5em;
  opacity: 0; transform: rotate(-6deg) scale(1.3);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.pot__row.is-done .pot__paid { opacity: 1; transform: rotate(-6deg) scale(1); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 860px) {
  .bar__marquee { display: none; }
  .cut__split, .cut__split--rev { grid-template-columns: 1fr; gap: 2.2rem; }
  .cut__split--rev .phone { order: 2; }
  .neon--corner { display: none; }
  .ticket__punch { display: none; }
  .ticket__venue, .ticket__room, .ticket__row, .ticket__money { padding-left: 0; }
  .slab--xl { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .cut--split2 { padding-bottom: 56svh; }
  .pot__state { display: none; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .bar__reel, .ticker__reel { animation: none; }
  .neon--corner { animation: none; }
  .pot__ledger { transition: none; }
}