/* ==========================================================================
   cinema.css — Scroll-narrative opening (Zont1x)
   A sticky full-bleed video stage; a black curtain (the narrative block)
   rises from the bottom on scroll and covers it. Copy reveals inside the
   curtain. Apple-inspired pacing, restrained black/white/grey.
   Self-scoped under .cinema-* so it never bleeds into the existing system.
   ========================================================================== */

.cinema-intro {
  --cinema-ink: #f5f5f7;
  --cinema-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Scroll progress of the curtain (0 = video solo, 1 = fully covered).
     Driven by js/cinema.js. */
  --cinema-cover: 0;
  position: relative;
  margin-top: -52px; /* sit under the 52px translucent sticky header */
  background: #000;
  color: var(--cinema-ink);
}

/* ---- Sticky video stage ---------------------------------------------------- */
.cinema-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

.cinema-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  /* Fade in once frames are ready (cinema.js); recede subtly as the
     curtain rises. */
  opacity: 0;
  transform: scale(calc(1 + var(--cinema-cover) * -0.05));
  transition: opacity 1200ms var(--cinema-ease);
  will-change: transform;
}
.cinema-intro.is-video-ready .cinema-hero-video {
  opacity: 1;
}

/* Graceful fallback: deep charcoal field before the video paints and
   whenever it fails. The poster on <video> covers "loading"; this covers
   "failed/unsupported" — and prevents any white flash. */
.cinema-hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2a2e 0%, #161618 46%, #000 100%);
}
.cinema-intro.is-video-ready .cinema-hero-fallback {
  opacity: 0;
  transition: opacity 1200ms var(--cinema-ease);
}

/* Static readability scrim — a whisper at the top for the translucent nav,
   a touch at the bottom for the curtain handoff. The video breathes. */
.cinema-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.32) 100%);
}

/* Cinematic vignette — edges gently pressed down, center untouched. */
.cinema-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 115% at 50% 48%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.16) 78%, rgba(0, 0, 0, 0.4) 100%);
}

/* Scroll-driven dim: deepens as the curtain rises so the handoff to black
   feels continuous rather than abrupt. */
.cinema-stage-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--cinema-cover) * 0.45);
  pointer-events: none;
}

/* ---- Spacer: scroll distance where the video plays solo --------------------- */
.cinema-spacer {
  height: 64vh;
}

/* ---- The glass curtain ------------------------------------------------------ */
/* In normal flow after the spacer, so it scrolls up OVER the stuck stage.
   Native scrolling does the covering — no JS positioning, perfectly smooth.
   Frosted liquid-glass: the video stays faintly visible through it while
   the stage is stuck behind; further down it reads as near-black because
   the intro's #000 field is the backdrop. */
.cinema-narrative {
  position: relative;
  z-index: 2;
  /* Fallback when backdrop-filter is unsupported: nearly opaque so text
     stays readable over the un-blurred video. */
  background: rgba(8, 8, 10, 0.94);
  border-top: var(--glass-border-dark);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow-lg);
  padding: clamp(110px, 18vh, 200px) 28px clamp(96px, 14vh, 170px);
  overflow: hidden;
}
@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
  .cinema-narrative {
    background: rgba(8, 8, 10, 0.42);
    backdrop-filter: var(--liquid-glass-card-filter);
    -webkit-backdrop-filter: var(--liquid-glass-card-filter);
  }
}

/* Liquid-glass top sheen — one quiet highlight, no color, no glow. */
.cinema-narrative::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: var(--glass-highlight-gradient);
  opacity: 0.28;
  pointer-events: none;
}

.cinema-narrative-inner {
  max-width: 1060px;
  margin: 0 auto;
}

.cinema-narrative-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
}

.cinema-narrative-title {
  margin: 22px 0 0;
  max-width: 14ch;
  font-size: clamp(44px, 7.6vw, 96px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
  /* Keeps the title crisp where the video moves behind the glass. */
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.35);
}

.cinema-narrative-sub {
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(245, 245, 247, 0.72);
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.cinema-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
}

.cinema-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 152px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 280ms var(--cinema-ease), background 220ms ease,
    border-color 220ms ease, box-shadow 220ms ease;
}
.cinema-button:hover {
  transform: translateY(-2px);
}
.cinema-button:active {
  transform: translateY(0) scale(0.98);
}
.cinema-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

.cinema-button-primary {
  background: #f5f5f7;
  color: #1d1d1f;
}
.cinema-button-primary:hover {
  background: #fff;
}

.cinema-button-ghost {
  color: #f5f5f7;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
.cinema-button-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---- Second movement: statement + three quiet columns ----------------------- */
.cinema-narrative-line {
  margin: clamp(96px, 14vh, 170px) 0 0;
  max-width: 20ch;
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.32);
}

.cinema-narrative-lede {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.62);
}

.cinema-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(56px, 8vh, 96px);
}

/* Quiet columns: a hairline rule and air, no card chrome. */
.cinema-story-cell {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cinema-story-cell-index {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(245, 245, 247, 0.4);
}

.cinema-story-cell h3 {
  margin: 16px 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f5f5f7;
}

.cinema-story-cell p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 245, 247, 0.58);
}

/* ---- Reveal animation -------------------------------------------------------- */
[data-cinema-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--cinema-ease), transform 900ms var(--cinema-ease);
}
[data-cinema-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-cinema-delay="1"] { transition-delay: 120ms; }
[data-cinema-delay="2"] { transition-delay: 240ms; }
[data-cinema-delay="3"] { transition-delay: 360ms; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .cinema-story-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 600px) {
  .cinema-spacer {
    height: 56vh;
  }
  .cinema-narrative {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Lighter blur on phones — same look, cheaper to composite. */
  @supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
    .cinema-narrative {
      backdrop-filter: var(--glass-filter-md);
      -webkit-backdrop-filter: var(--glass-filter-md);
    }
  }
  .cinema-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cinema-button {
    width: 100%;
    max-width: 340px;
  }
}

/* Short / landscape phones */
@media (max-height: 480px) {
  .cinema-stage {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-hero-video {
    transition: none;
    transform: none;
  }
  .cinema-hero-fallback {
    transition: none;
  }
  [data-cinema-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}