/* The two VIDEO variants of the sales page (video-hero.html, video-wide.html). Not loaded by the
   live page. The video is dressed as a billboard with the same lamps, frame and posts as the live
   board, so it belongs to the same road. Only transform and opacity ever animate. */

/* ── The video billboard (both variants) ─────────────────────────────────── */
.bb-video .bb-face { aspect-ratio: 16 / 9; perspective: none; }
.bb-video .bb-lamps { left: 6%; right: 6%; }
.vb { position: relative; }
.vb video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0d0820; }

/* the lamps wash the top of the poster in warm light until the film starts */
.vb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 184, 41, 0.16), rgba(245, 184, 41, 0) 34%), radial-gradient(90% 70% at 50% 60%, rgba(10, 6, 19, 0), rgba(10, 6, 19, 0.5));
  transition: opacity 400ms var(--ease-out);
}
.vb.is-playing::after { opacity: 0; }

.vb-play {
  /* sits in the lower half, so the end-card billboard on the poster stays readable above it */
  position: absolute; inset: 0; z-index: 2; display: grid; align-content: end; justify-content: center; justify-items: center; gap: 14px;
  padding: 0 0 9%; border: 0; background: none; color: var(--ink-night); cursor: pointer;
  transition: opacity 300ms var(--ease-out);
}
.vb.is-playing .vb-play { opacity: 0; pointer-events: none; }
.vb-play-disc {
  display: grid; place-items: center; width: clamp(72px, 9vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 0 0 10px rgba(245, 184, 41, 0.18), 0 18px 50px -12px rgba(245, 184, 41, 0.75);
  transition: transform 220ms var(--ease-out);
}
.vb-play-disc svg { width: 38%; height: 38%; margin-left: 8%; }
.vb-play-label {
  font-family: var(--sign); font-weight: 800; font-size: clamp(0.75rem, 1.4vw, 0.9375rem); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px 6px; border-radius: 6px; background: rgba(10, 6, 19, 0.78); box-shadow: inset 0 0 0 2px rgba(244, 238, 255, 0.5);
}
.vb-play:focus-visible { outline: none; }
.vb-play:focus-visible .vb-play-disc { outline: 3px solid var(--ink-night); outline-offset: 6px; }
.vb-play:active .vb-play-disc { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .vb-play:hover .vb-play-disc { transform: scale(1.07); } }

/* ── Variant A: the video IS the hero billboard, the live board gets its own stop beneath ── */
.flip { padding-block: var(--pad-standard) var(--pad-connective); background: radial-gradient(70% 60% at 80% 0%, rgba(168, 85, 247, 0.12), transparent 70%), var(--night); }
.flip-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.flip .section-head { margin-bottom: 0; }
.flip-stage { position: relative; padding-top: 24px; }
.flip-stage .remote { margin: -36px 0 0; position: relative; z-index: 5; }
.flip-stage .bb-posts { height: clamp(60px, 9vw, 110px); }
/* the hand-written nudge belongs to the hero's open road; here the heading already says it */
.flip-stage .note-flip { display: none; }
@media (min-width: 900px) { .flip-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4.5rem); } }

/* ── Variant B: a full-width cinema billboard right under the hero ───────── */
.cinema { padding: clamp(3rem, 6vw, 5rem) 0 var(--pad-connective); overflow: hidden; background: linear-gradient(180deg, var(--night), #0d0820 50%, var(--night)); }
.cinema-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.cinema-head h2 { margin: 1rem 0 0; }
/* the gantry beam runs edge to edge, the lamps hang off it and light the screen below */
.cinema-gantry { position: relative; z-index: 3; height: 22px; background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(58, 47, 75, 0.9) 14px 17px),
  repeating-linear-gradient(45deg, transparent 0 14px, rgba(58, 47, 75, 0.9) 14px 17px),
  linear-gradient(180deg, #2b2338, #120d1c);
  box-shadow: 0 1px 0 #3a2f4b inset, 0 -1px 0 #3a2f4b inset, 0 18px 40px -10px rgba(0, 0, 0, 0.9); }
.cinema-gantry .bb-lamps { left: 5%; right: 5%; top: 16px; }
.cinema-gantry .bb-lamps i::after { width: 320px; height: 300px; }
/* as wide as the window allows while the whole film (and its captions) stays on one screen */
.cinema-screen { position: relative; z-index: 2; width: min(100%, calc(84vh * 16 / 9)); margin-inline: auto; }
.cinema-screen .bb-frame { border-radius: 0; padding: clamp(6px, 0.8vw, 10px); box-shadow: 0 0 0 1px #3a2f4b, 0 40px 120px -40px rgba(0, 0, 0, 0.95), 0 0 160px -30px rgba(245, 184, 41, 0.4); }
.cinema-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.cinema-line { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.125rem, 2.4vw, 1.625rem); color: var(--ink-night); }
.cinema-line span { color: var(--gold); }
@media (max-width: 700px) { .cinema-gantry .bb-lamps i:nth-child(n + 5) { display: none; } }

/* a small ribbon so nobody mistakes a preview for the live page */
.preview-ribbon { position: fixed; z-index: 80; left: 12px; bottom: 88px; font-family: var(--sign); font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px 5px; border-radius: 6px; color: var(--gold-ink); background: var(--gold); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); }

/* screenshots only: the screenshot tool adds this so scroll-reveal sections are visible in a still */
.is-still { opacity: 1 !important; transform: none !important; }