/* --------------------------------------------------------
   Cinematic walkthrough — pinned canvas + overlay chrome
   -------------------------------------------------------- */

/* Loader covers the pinned canvas until chapter 0 has decoded. */
.cinema-loader {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--void);
  transition: opacity 1200ms cubic-bezier(.2,.7,.2,1), visibility 0ms linear 1200ms;
}
.cinema-loader.is-done {
  opacity: 0; pointer-events: none; visibility: hidden;
}
.cinema-loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  font-family: var(--mono); color: var(--steel-dim);
}
.cinema-loader-logo {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--accent-2), var(--accent) 55%, #7a2a0a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 36px rgba(255,106,42,0.4);
  animation: loaderPulse 1.8s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.92); opacity: 0.9; } }
.cinema-loader-copy { text-align: center; }
.cinema-loader-copy strong {
  display: block;
  font-family: var(--serif); font-weight: 300; font-size: 24px; color: var(--steel);
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.cinema-loader-copy span {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
}
.cinema-loader-bar {
  width: 220px; height: 1px; background: rgba(255,255,255,0.1); overflow: hidden;
}
.cinema-loader-bar > span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(0);
  transition: transform 240ms ease;
}
.cinema-loader-pct {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
}

/* Thin progress bar across the top of the viewport while cinematic plays. */
.cinema-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  height: 2px; background: rgba(255,255,255,0.06);
}
.cinema-progress > span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(0);
  transition: transform 120ms linear;
}

/* The scroll stage is a tall container; the stage inside is sticky 100vh. */
.cinema-stage { position: relative; width: 100%; }
.cinema-anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.cinema-pin {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden;
}
.cinema-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Readability scrims so overlay copy survives the brightest frames. */
.cinema-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(10,12,16,0.0) 0%, rgba(10,12,16,0.4) 80%),
    linear-gradient(to bottom, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.15) 30%, rgba(10,12,16,0.15) 55%, rgba(10,12,16,0.78) 100%);
}
.cinema-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* -------- Door split overlay (plays during the 'door' chapter) --------
   Two black panels slide inward from the viewport edges, meet at centre,
   then slide back out — revealing the interior frame underneath. */
.cinema-doors {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.cinema-door-left, .cinema-door-right {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(to right, #000 0%, #0b0e13 85%, #1b2029 100%),
    linear-gradient(#000, #000);
  transform: translateX(-100%);
  transition: transform 60ms linear;
  will-change: transform;
}
.cinema-door-right {
  left: auto; right: 0;
  background:
    linear-gradient(to left, #000 0%, #0b0e13 85%, #1b2029 100%),
    linear-gradient(#000, #000);
  transform: translateX(100%);
}
/* The warm thin seam that lights up the moment the doors meet, hinting at
   the interior waiting behind them. */
.cinema-door-seam {
  position: absolute; top: 10%; bottom: 10%; left: 50%;
  width: 2px; transform: translateX(-50%) scaleY(0);
  background: linear-gradient(to bottom, transparent 0%, var(--accent-2) 10%, var(--accent) 50%, var(--accent-2) 90%, transparent 100%);
  box-shadow: 0 0 24px rgba(255,180,106,0.55), 0 0 48px rgba(255,106,42,0.35);
  transition: transform 80ms linear, opacity 60ms linear;
  opacity: 0;
}

/* -------- Chapter rail (right side, vertical, hides on mobile) -------- */
.cinema-chapters {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--steel-dim);
  padding: 6px 10px 6px 0;
  transition: color 180ms ease;
}
.chip-tick {
  width: 22px; height: 1px; background: currentColor; opacity: 0.4;
  transition: 180ms ease;
}
.chip-label { opacity: 0; transform: translateX(4px); transition: 180ms ease; }
.chip:hover, .chip.is-active { color: var(--accent); }
.chip.is-active .chip-tick { width: 44px; opacity: 1; }
.chip.is-active .chip-label, .chip:hover .chip-label { opacity: 1; transform: none; }
@media (max-width: 820px) { .cinema-chapters { right: 12px; } .chip-label { display: none; } }

/* -------- Caption layer (one per chapter, stacked) -------- */
.cinema-captions {
  position: absolute; inset: 0;
  z-index: 8;
  pointer-events: none;
}
.cap {
  position: absolute;
  left: 48px; bottom: 15vh;
  max-width: 760px;
  opacity: 0;
  transition: opacity 380ms ease;
  pointer-events: none;
}
.cap-inner { transform: translateY(0); will-change: transform; transition: transform 380ms ease; }
.cap.center {
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 920px;
}
.cap.center .cap-eye { justify-content: center; }
.cap.center .cap-meta { justify-content: center; }

.cap-eye {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); padding: 6px 10px; border: 1px solid rgba(255,106,42,0.3); border-radius: 999px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
.cap-h {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1.03; letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--steel);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  white-space: pre-line;
}
.cap-h em { font-style: italic; color: var(--accent-2); font-weight: 300; }
.cap-body {
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--steel);
  opacity: 0.9; max-width: 580px; margin: 0 0 20px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.cap-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.cap-meta li {
  background: rgba(10,12,16,0.55);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel);
}

/* Caption-embedded CTA — the finale chapter uses it to send the viewer to
   the booking console the moment the walkthrough lands. */
.cap-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  padding: 14px 22px;
  background: var(--accent); color: #0b0d10;
  border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  pointer-events: auto;
  box-shadow: 0 10px 32px rgba(255,106,42,0.35);
  transition: 180ms ease;
}
.cap-cta:hover { background: var(--accent-2); transform: translateY(-2px); }
.cap.center .cap-cta { margin-left: auto; margin-right: auto; }
@media (max-width: 820px) {
  .cap { left: 20px; right: 20px; bottom: 12vh; }
}

/* -------- Scroll cue -------- */
.cinema-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 9; pointer-events: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--steel-dim);
  animation: cueFloat 2.2s ease-in-out infinite;
}
.cinema-cue svg { opacity: 0.6; }

/* -------- Hero slab (sits over the first few frames) -------- */
.cinema-hero {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 7;
  pointer-events: none;
  padding: 140px 48px 0;
  max-width: 1400px; margin: 0 auto;
}
.cinema-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel-dim); padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: 999px;
  margin-bottom: 24px;
}
.cinema-hero .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,106,42,0.18);
  animation: pulse 1.8s ease-in-out infinite;
}
.cinema-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 8vw, 112px);
  line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 20px;
  max-width: 1100px;
  color: var(--steel);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.cinema-hero h1 em { font-style: italic; color: var(--accent-2); font-weight: 300; }
.cinema-hero p {
  font-size: clamp(15px, 1.1vw, 18px); color: var(--steel); opacity: 0.9;
  max-width: 580px; margin: 0 0 24px;
}
@media (max-width: 820px) {
  .cinema-hero { padding: 110px 20px 0; }
}

/* -------- Floating telemetry (hero chapter) -------- */
.cinema-telemetry {
  position: absolute; left: 48px; right: 48px; bottom: 80px;
  z-index: 7; pointer-events: none;
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  transition: opacity 400ms ease;
}
.cinema-telemetry > div {
  background: rgba(10,12,16,0.55); backdrop-filter: blur(6px);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 2px;
}
.cinema-telemetry strong {
  font-family: var(--serif); font-size: 32px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--accent-2);
}
.cinema-telemetry span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel-dim);
}
@media (max-width: 820px) {
  .cinema-telemetry { left: 20px; right: 20px; bottom: 24px; grid-template-columns: repeat(2, 1fr); }
}

/* -------- Quiet divider between the cinema and the editorial sections.
   Just a vertical rule and a single orange node — a visual beat so the
   finale caption doesn't collide with the capacity grid. -------- */
.cinema-divider {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 0 48px;
  background: var(--void);
}
.cinema-divider .div-line { width: 1px; height: 72px; background: linear-gradient(to bottom, transparent, var(--rule-2), transparent); }
.cinema-divider .div-dot  {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,106,42,0.14), 0 0 24px rgba(255,106,42,0.4);
  margin: 10px 0;
}

/* Ensure the top nav sits above the pinned canvas. */
.nav { z-index: 60; }
.nav-cinema-item { color: var(--steel-dim); font-size: 13px; }
.nav-cinema-item:hover { color: var(--accent); }

/* Reduce motion → freeze on first frame, show captions always */
@media (prefers-reduced-motion: reduce) {
  .cinema-stage { height: 100vh !important; }
  .cinema-captions .cap:first-child { opacity: 1 !important; transform: none !important; }
  .cinema-loader-logo { animation: none; }
}