/* /vip: the VIP Perks page in the console world (views/modules/sb_vip/index.php).
   Loads after tokens, base, landing and vendor; reuses .mod, .facts, .btn, .lamp, .sec__title from them. */

.sb-page--vip main, .sb-page--vip .foot { position: relative; z-index: 1; }
/* The ambient glows reach past the modules; clip them at the page edge so phones never scroll sideways. */
.sb-page--vip main { overflow-x: clip; }
.vip .vip-num { font-family: var(--font-mono); font-weight: 700; }
.vip .vip-num--go { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.vip .sec__title { margin-top: 0; margin-bottom: var(--s-4); }
.vip-sec { padding-block: 0 var(--s-7); scroll-margin-top: 80px; }
@media (min-width: 900px) { .vip-sec { padding-bottom: var(--s-8); } }

/* ---------- Hero: the patch beside the promise ---------- */
.vip-hero { position: relative; display: grid; align-content: center; min-height: calc(100svh - 65px); padding-block: var(--s-5) var(--s-7); }
.vip-hero__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "patch" "title" "intro" "facts"; }
.vip-hero__patch { grid-area: patch; position: relative; justify-self: center; width: min(58vw, 240px); margin: 0; }
.vip-hero__title { grid-area: title; font-size: clamp(2.25rem, 1rem + 4.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; max-width: 16ch; color: #fff; }
.vip-hero__intro { grid-area: intro; display: grid; gap: var(--s-4); align-content: start; }
.vip-hero__facts { grid-area: facts; }
.vip-hero__lead { font-size: var(--text-md); color: var(--ink-2); max-width: 46ch; }
.vip-hero__lead .vip-num { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.vip-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }
@media (min-width: 720px) { .vip-hero__lead { font-size: var(--text-lg); line-height: 1.5; } }
@media (min-width: 900px) {
  .vip-hero { padding-block: var(--s-6) var(--s-7); }
  .vip-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: var(--s-7); row-gap: var(--s-5); grid-template-areas: "title patch" "intro patch" "facts patch"; align-items: start; }
  .vip-hero__patch { align-self: center; justify-self: center; width: min(100%, 400px); }
  .vip-hero__title { margin-bottom: var(--s-2); }
}

/* The patch sits on a dial: a bezel ring with four index marks, and the green ambient the lit console spills. */
.vip-hero__patch img { width: 100%; height: auto; aspect-ratio: 1; position: relative; z-index: 1; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55)); }
.vip-hero__patch::before { content: ""; position: absolute; inset: -22%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 227, 140, 0.11), rgba(0, 227, 140, 0.035) 55%, transparent); }
.vip-hero__patch::after { content: ""; position: absolute; inset: -9%; pointer-events: none; border-radius: 50%; border: 1px solid var(--bezel-2); background:
  linear-gradient(var(--bezel-2), var(--bezel-2)) 50% 0 / 1px 10px no-repeat,
  linear-gradient(var(--bezel-2), var(--bezel-2)) 50% 100% / 1px 10px no-repeat,
  linear-gradient(var(--bezel-2), var(--bezel-2)) 0 50% / 10px 1px no-repeat,
  linear-gradient(var(--bezel-2), var(--bezel-2)) 100% 50% / 10px 1px no-repeat; }
.vip-hero__facts .fact dd { flex-wrap: wrap; }
.vip-hero__facts .fact dd strong { font-size: var(--text-md); color: var(--ink); }

/* ---------- The meter: lifetime deposits against the line ---------- */
.vip-meter { position: relative; }
.vip-meter::before { content: ""; position: absolute; inset: -8% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 227, 140, 0.06), transparent); }
.vip-meter__tag { display: inline-flex; align-items: center; gap: var(--s-2); }
.vip-meter__tag .lamp { width: 8px; height: 8px; }
.vip-meter__tag--go { color: var(--green); }
.vip-meter__body { display: grid; gap: var(--s-3); padding: var(--s-4); }
.vip-meter__read { display: grid; gap: var(--s-1); margin-bottom: var(--s-2); }
.vip-meter__big { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-2); word-spacing: -0.2em; }
.vip-meter__big .vip-num { font-size: inherit; color: var(--ink); }
.vip-meter__big--go { font-family: var(--font-body); letter-spacing: -0.01em; color: var(--green); text-shadow: 0 0 14px var(--green-glow); }
.vip-meter--guest .vip-meter__big .vip-num { color: var(--ink); }
.vip-meter__sub { font-size: var(--text-sm); color: var(--ink-2); max-width: 60ch; }
.vip-meter__sub .vip-num { color: var(--ink); }
.vip-meter__since { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }

/* The scale: a recessed track, four index ticks, the fill that carries the real ratio, and the VIP mark at the far end. */
.vip-meter__scale { position: relative; height: 12px; background: var(--panel-2); border: 1px solid var(--bezel-2); border-radius: var(--r-sm); }
.vip-meter__fill { position: absolute; inset: 0; width: var(--pct, 0%); min-width: 0; border-radius: 2px; background: var(--green); box-shadow: 0 0 10px var(--green-glow); transform-origin: left; transition: transform var(--t-slow) var(--ease-out) 300ms; }
.vip-meter--guest .vip-meter__fill { display: none; }
.vip-meter__tick { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--bezel-2); }
.vip-meter__mark { position: absolute; top: -6px; right: -1px; width: 3px; height: 22px; border-radius: 2px; background: var(--bezel-2); transition: background var(--t-med), box-shadow var(--t-med); }
.vip-meter--vip .vip-meter__mark { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }
.vip-meter__ends { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--text-xs); color: var(--ink-2); }
.vip-meter__ends .vip-num { font-weight: 400; }
.vip-meter__ends em { font-style: normal; font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; margin-left: var(--s-1); color: var(--ink); }
.vip-meter--vip .vip-meter__ends em { color: var(--green); }
.vip-meter__hint { font-size: var(--text-sm); color: var(--ink-2); }
.sb:not(.is-live) .vip-meter__fill { transform: scaleX(0); }

/* The three stages, divided by bezels (one row each on phones, three across from 900px). */
.vip-steps { display: grid; border-top: var(--line); counter-reset: none; }
.vip-step { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-3); padding: var(--s-4); border-bottom: var(--line); }
.vip-step:last-child { border-bottom: 0; }
.vip-step__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); line-height: 1.55; color: var(--green); }
.vip-step p { font-size: var(--text-sm); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 900px) {
  .vip-steps { grid-template-columns: repeat(3, 1fr); }
  .vip-step { border-bottom: 0; border-right: var(--line); padding: var(--s-5) var(--s-4); }
  .vip-step:last-child { border-right: 0; }
}

/* ---------- The perks board: a lamp, the perk, its readout ---------- */
.vip-perks { display: grid; }
.vip-perk { display: grid; grid-template-columns: 10px 1fr; grid-template-areas: "lamp text" "lamp ro"; column-gap: var(--s-4); row-gap: var(--s-3); padding: var(--s-4); border-bottom: var(--line); }
.vip-perk:last-child { border-bottom: 0; }
.vip-perk > .lamp { grid-area: lamp; margin-top: 0.55em; }
.vip-perk__text { grid-area: text; display: grid; gap: var(--s-1); min-width: 0; }
.vip-perk__title { font-size: var(--text-lg); line-height: 1.3; font-weight: 700; color: #fff; text-wrap: balance; }
.vip-perk__desc { font-size: var(--text-sm); color: var(--ink-2); max-width: 58ch; }
.vip-perk__ro { grid-area: ro; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.vip-perk__v { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.1; color: var(--green); text-shadow: 0 0 12px var(--green-glow); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.vip-perk__v:not(.vip-num) { font-size: var(--text-md); letter-spacing: 0.08em; }
.vip-perk__n { font-size: var(--text-xs); color: var(--ink-2); }
@media (min-width: 720px) {
  .vip-perk { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "lamp text ro"; align-items: start; padding: var(--s-5) var(--s-4); }
  .vip-perk__ro { display: grid; justify-items: end; text-align: right; align-content: start; gap: var(--s-1); min-width: 7.5rem; padding-top: 0.15em; }
}
/* The board lights lamp by lamp once the meter above has scrolled in (theme.js adds is-live); reduced motion lands lit. */
.sb.is-live .vip-perk .lamp[data-seq] { transition-delay: calc(var(--i, 0) * 140ms + 300ms); }
.vip-api { margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-2); max-width: 70ch; }

/* ---------- Close ---------- */
.vip-close { padding-block: var(--s-6) var(--s-8); border-top: var(--line); }
.vip-close__body { display: grid; justify-items: start; gap: var(--s-5); }
.vip-close__title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; color: #fff; text-wrap: balance; max-width: 22ch; }
@media (min-width: 900px) {
  .vip-close { padding-block: var(--s-7) var(--s-9); }
  .vip-close__body { grid-template-columns: 1fr auto; align-items: center; }
}