/* =====================================================================
   1. DESIGN TOKENS  —  retheme the whole site from here
   ===================================================================== */
:root {
  /* Palette */
  --bg:        #0a0a0a;   /* page background */
  --bg-2:      #141414;   /* card / input background */
  --line:      #2a2a2a;   /* hairline borders */
  --line-2:    #3a3a3a;   /* slightly stronger borders */
  --fg:        #f5f5f5;   /* primary text */
  --muted:     #9a9a9a;   /* secondary text */
  --dim:       #666;      /* tertiary text */
  --accent:    #4ade80;   /* signature green */
  --accent-dim:#166534;   /* darker green (kept for theming) */
  --youtube:   #ff0000;   /* YouTube brand red */

  /* Type stack */
  --display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --body:    "Inter", -apple-system, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}
body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }

/* =====================================================================
   3. WIREFRAME CHROME
   Faint vertical column-grid overlay.
   ===================================================================== */
/* faint 12-col grid overlay (decorative scaffolding) */
.wf-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 8.333% 100%;
}

/* =====================================================================
   4. TOP BAR  —  fixed header (brand + sound toggle + book CTA)
   ===================================================================== */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-name {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-cta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
}

/* =====================================================================
   5. SCROLL PROGRESS RAIL  —  one dot per beat (right edge)
   ===================================================================== */
.rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.rail-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background 0.3s, transform 0.3s;
}
.rail-dot.is-active { background: var(--accent); transform: scale(1.4); }
.rail-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* =====================================================================
   6. HERO  (Beat 0)  —  full-viewport title screen
   ===================================================================== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 24px 40px;
  text-align: center;
  position: relative;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: "—";
  margin: 0 10px;
  color: var(--dim);
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(56px, 18vw, 180px);
  line-height: 0.85;
  letter-spacing: 0.01em;
  margin: 0;
}
.hero-title .accent { color: var(--accent); }
.hero-sub {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  max-width: 32ch;
}
.hero-scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.hero-scroll-cue .line {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--accent));
}
.hero-scroll-cue .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* =====================================================================
   7. PINNED SCROLL STAGE  —  shared layout for all scroll-driven beats
   - .track is a tall scroll-track; longer track = beat lasts longer.
   - .pin sticks the visual to the viewport while the track scrolls past.
   - body.mode-smooth (Tweaks panel) drops sticky behavior so beats
     scroll naturally past the viewport.
   ===================================================================== */
.stage { position: relative; }
.track {
  position: relative;
  height: 160vh;             /* mobile-first; desktop overrides below */
}
.pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
body.mode-smooth .track { height: auto; min-height: 100svh; }
body.mode-smooth .pin   { position: relative; height: 100svh; }

/* Beat 2 (stills) runs longer than the other beats so its spotlight
   sub-sequence (outer thumbs slide up/away while the middle thumb grows)
   has room to play out before the pin releases into Beat 3. */
[data-beat="0"] .track { height: 230vh; }
/* Smooth mode drops the pin, so skip the scroll-driven spotlight there. */
body.mode-smooth #card-player .sample-photo { transform: none; opacity: 1; }

/* =====================================================================
   9. BEATS 2–4 — GEAR CARDS  (stills, POV, full broadcast)
   - .gear-card.from-right / .from-left  : slide direction.
   - .gear-card.text-right               : on desktop, copy lands right.
   - --p (0→1) is set by JS based on track progress (drives translate).
   - Desktop layout: photo + copy in row 1, samples row 2 full-width.
   ===================================================================== */
.gear-beat .scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.gear-rail {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-2), transparent);
}

.gear-card {
  --p: 0;                    /* 0 = offscreen, 1 = centered (set by JS) */
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  width: min(92vw, 980px);
  padding: 0 16px;
}
.gear-card.from-right { transform: translate3d(calc((1 - var(--p)) * 60vw), 0, 0); }
.gear-card.from-left  { transform: translate3d(calc((var(--p) - 1) * 60vw), 0, 0); }

/* main photo container */
.gear-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.02) 0 8px,
      transparent 8px 16px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gear-visual .gear-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* copy block (kicker + headline + sub) */
.gear-copy { position: relative; text-align: left; }
/* corner field-line motif behind the headline (bracket marker) */
.gear-copy::before {
  content: "";
  position: absolute;
  top: -10px; left: -10px;
  width: 64px; height: 64px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: 0.35;
  pointer-events: none;
}
.gear-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.gear-headline {
  font-family: var(--display);
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin: 0;
}
.gear-headline .num { color: var(--accent); }
.gear-sub {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  max-width: 36ch;
}
/* "Uploaded to YouTube" — base copy stays muted grey; the YouTube wordmark is
   bold + slightly larger, with "You" in brand red and "Tube" in white. */
.gear-sub .yt     { font-weight: 700; font-size: 1.2em; color: var(--fg); }
.gear-sub .yt-you { color: var(--youtube); }

/* sample-thumbnails strip — fades in once the card "locks" centered */
.samples {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s;
}
.gear-card.is-locked .samples { opacity: 1; transform: translateY(0); }
.sample {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 8px;
  border: 1px dashed var(--line-2);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.03) 0 6px,
      transparent 6px 12px),
    var(--bg-2);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.1em;
}
.sample-photo {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  object-fit: cover;
  object-position: center;
}

/* Beat 2 (stills) — "spotlight" sub-sequence. After the three thumbnails
   reveal, continued scrolling within the beat slides the outer two up and
   away while the middle one grows ~50%. Driven by --grow (0→1), which JS sets
   from the beat's later scroll progress (see updateStillsSpotlight). */
#card-player { --grow: 0; }
#card-player .sample-photo { transition: none; will-change: transform, opacity; }
#card-player .sample-photo:nth-child(2) {
  transform: scale(calc(1 + 1 * var(--grow)));   /* middle: grow ~50% */
  transform-origin: center;
  position: relative;
  z-index: 2;                                       /* grow over the outer thumbs */
}
#card-player .sample-photo:nth-child(1),
#card-player .sample-photo:nth-child(3) {
  transform: translateY(calc(var(--grow) * -160%)); /* outer: slide up */
  opacity: calc(1 - var(--grow));                   /* …and fade out */
}

/* POV section: vertical footage clip. Sized by height so a portrait
   aspect doesn't overflow the .scene's 100svh pin. */
.samples.samples-single {
  grid-template-columns: 1fr;
  opacity: 1;               /* stay visible so the grow-in is seen */
  transform: none;
  transition: none;
}
.sample.sample-clip {
  aspect-ratio: 280 / 608;        /* match the vertical SCORING.MP4 */
  width: auto;
  height: min(58svh, 480px);
  justify-self: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  /* grow from small → full as the card scrolls to center (--p: 0→1, set by JS) */
  transform: scale(calc(0.25 + 0.75 * var(--p, 1)));
  transform-origin: center;
}
.sample-clip .sample-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Full-gameplay beat: a single YouTube screenshot — centered and noticeably
   larger than the default 3-up thumbnail strip. Height-driven (like the POV
   clip) so it scales with the viewport and won't overflow the pinned scene. */
.samples.samples-shot { grid-template-columns: 1fr; }   /* one column, not 3 */
.sample.sample-shot {
  aspect-ratio: 946 / 691;        /* match youtube-example.png */
  height: min(30svh, 240px);      /* smaller overall */
  width: auto;
  max-width: 100%;                /* never overflow the column on mobile */
  justify-self: center;           /* center within the strip */
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.sample-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* show the full picture, no cropping */
  object-position: center;
  display: block;
}

/* POV beat layout — no static photo, so the portrait clip is the sole visual.
   On desktop it sits beside the copy and is vertically centered, so the video
   lands in the MIDDLE of the screen while the beat is pinned (instead of
   stacking below the copy and settling near the bottom). On mobile it falls
   back to the stacked layout, sitting just below the headline. */
@media (min-width: 760px) {
  .pov-card .gear-copy { align-self: center; }
  .pov-card .samples.samples-single {
    grid-column: 2;        /* beside the copy, not full-width below it */
    order: 0;              /* keep copy (col 1) → video (col 2) order */
    align-self: center;    /* vertical-center the clip in its column */
    margin-top: 0;
  }
}

/* =====================================================================
   10. CTA + BOOKING FORM
   Submit prefills a WhatsApp message via wa.me deep link.
   Update the phone number in <script> below — search `const phone`.
   ===================================================================== */
.cta {
  min-height: 100svh;
  padding: 80px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.cta-title {
  font-family: var(--display);
  font-size: clamp(48px, 12vw, 120px);
  line-height: 0.9;
  margin: 0 0 8px;
}
.cta-sub {
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 36ch;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--accent);
  color: #001016;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: transform 0.2s;
}
.cta-btn:hover { transform: translateY(-2px); }
.cta-btn .wa-icon {
  width: 22px; height: 22px;
  border: 2px solid #001016;
  border-radius: 999px;
  position: relative;
}
.cta-btn .wa-icon::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 6px; height: 6px;
  background: #001016;
  transform: rotate(45deg);
}
.cta-secondary {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* booking form */
.booking {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  text-align: left;
}
.booking-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.booking-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.booking input[type="date"],
.booking input[type="text"] {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  width: 100%;
  min-width: 0;            /* prevent intrinsic min-content from blowing out */
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  display: block;
}

/* iOS Safari sizes type=date by its content; force it to behave like text */
.booking input[type="date"] {
  -webkit-min-logical-width: 0;
  min-height: 46px;        /* match text inputs so heights stay consistent */
  text-align: left;
}

/* keep the native picker indicator from forcing extra width on WebKit */
.booking input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}
.booking input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  filter: invert(1) opacity(0.6);
  cursor: pointer;
}

.booking input:focus { outline: none; border-color: var(--accent); }
.booking-pkg {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.booking-pkg legend { display: contents; }
.booking-pkg > legend { display: block; margin-bottom: 6px; }
.booking-pkg label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.booking-pkg input { accent-color: var(--accent); }
.booking-pkg .pkg-price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.booking-pkg label:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}
.booking-pkg label:has(input:checked) .pkg-price { color: var(--accent); }

/* live total row */
.booking-total {
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.booking-total-value {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.booking .cta-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* =====================================================================
   11. FOOTER
   ===================================================================== */
.footer {
  padding: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.footer-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.footer-row .sep { opacity: 0.5; }
.footer-handles a { color: var(--muted); text-decoration: none; }
.footer-handles a:hover { color: var(--accent); }
.footer-meta { opacity: 0.7; }

/* =====================================================================
   12. RESPONSIVE OVERRIDES (≥760px)
   Tweak the breakpoint here if you need a wider mobile band.
   ===================================================================== */
@media (min-width: 760px) {
  body { font-size: 16px; }

  /* slow each beat down on desktop (more pixels of scroll per beat) */
  .track            { height: 220vh; }
  [data-beat="0"] .track { height: 320vh; }   /* extra room for the spotlight */

  /* gear cards: photo + copy side by side, samples full-width below */
  .gear-card {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .gear-card .samples {
    grid-column: 1 / -1;
    order: 3;
    justify-self: center;
  }
  .gear-sub { max-width: 40ch; }
  .samples  { gap: 12px; max-width: 480px; }

  .topbar { padding: 18px 32px; }
  .rail   { right: 24px; }
}

/* =====================================================================
   13. REDUCED MOTION  —  snap everything to its final state
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .track             { height: auto !important; min-height: 100svh; }
  .pin               { position: relative !important; height: 100svh; }
  .gear-card         { transform: none !important; }
  .gear-card .samples { opacity: 1 !important; transform: none !important; }
  .sample.sample-clip { transform: none !important; }  /* skip grow-in */
  #card-player .sample-photo { transform: none !important; opacity: 1 !important; }
}