/* Hero chapter gets its OWN solid background — video is hidden behind it.
   This gives the title page its own screen; video only appears when scrolling past. */
.chapter--hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(29,78,216,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(154,66,0,.10) 0%, transparent 60%),
    var(--surface, #0e131e);
  z-index: 2;
  position: relative;
}
/* Subtle grid overlay on hero — engineered feel */
.chapter--hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(221,226,241,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221,226,241,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
/* Neural network canvas — sits between hero bg gradient and title content.
   Absolute-positioned, so not part of the flex layout of .chapter. */
.hero-network {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  display: block;
}
.chapter--hero .chapter__content { z-index: 3; }
/* Nav overlay on hero needs to sit above the backdrop */
.chapter--hero .nav--overlay { z-index: 5; }

/* ====== Cinematic overlay ====== */
body.cinematic {
  background: #000;
  color: #f2ede2;
  overflow-x: hidden;
}

/* Hero stage: full-screen mist video + still image on top */
.cine-stage {
  position: fixed;
  left: 0; right: 0; top: 0;
  /* Lock to the viewport so the video always fits the screen.
     On ultra-wide viewports the sides crop slightly (acceptable for 16:9 source),
     but the subject's head AND body stay visible — unlike the old 56.25vw rule
     which made the stage taller than the viewport and pushed the body below the fold. */
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: #000;
  overflow: hidden;
}
.hero-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity .4s linear;
}
.mist-video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  /* contain (not cover) so the full 16:9 frame is always visible —
     mechanical arm above, boy center, circuit board on the right all in view.
     On non-16:9 viewports this leaves thin letterbox bars matching the
     stage's black background, which is fine cinematographically. */
  object-fit: contain;
  object-position: 50% 50%;
  z-index: 0;
  will-change: opacity;
  /* Hidden until the watermark cover has been positioned, so the "即梦 AI"
     watermark is never visible for even a frame. wm-cover.js reveals it. */
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.mist-video.is-ready { opacity: 1; }
/* Mask out the bottom-right watermark with a soft blurred patch
   that fades outward so the edge isn't visible. */
/* Watermark cover — frosted-glass chip with a small label.
   Sits on the video's displayed right-bottom corner (positioned by JS). */
.cine-stage__wm-cover {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 10px;
  /* deep-blue tinted frosted glass (v1) */
  background: rgba(18, 24, 42, 0.42);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(235, 240, 250, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 24px rgba(0,0,0,0.35);
}
.cine-stage__wm-cover .wm-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(235, 240, 250, 0.72);
  white-space: nowrap;
}
.cine-stage__wm-cover .wm-label .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(245, 170, 80, 0.9);
  margin: 0 10px 1px 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(245, 170, 80, 0.6);
}
.cine-stage::after { content: none; }
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1.5%); }
}
.cine-stage__vignette {
  display: none;
}

/* legacy selectors kept as no-ops in case referenced elsewhere */
.hero-canvas, .fog-video, #cineCanvas, .cine-stage__grain, .cine-stage__noise, .cine-scope, .cine-stage__vignette, .hero-still {
  display: none !important;
}
.cine-scope__corner {
  position: absolute; width: 18px; height: 18px;
  border: 1.5px solid var(--primary, #b7c4ff);
}
.cine-scope__corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cine-scope__corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cine-scope__corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cine-scope__corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.cine-scope__meta {
  position: absolute; top: 8px; left: 32px;
  display: flex; align-items: center; gap: 10px;
}
.cine-scope__meta--right { left: auto; right: 32px; }
.cine-scope__meta .blink { color: #ff4949; animation: blinkfast 1s infinite; }
@keyframes blinkfast { 50% { opacity: 0; } }
.cine-scope__meta .sep {
  width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: .4;
}
.cine-scope__progress {
  position: absolute; bottom: 8px; left: 32px; right: 32px;
  height: 1px; background: rgba(255,255,255,.08);
}
.cine-scope__progress-bar {
  height: 100%; background: var(--primary, #b7c4ff);
  width: 0;
  transition: width .1s linear;
}

/* ====== Chapters (scroll zones) ====== */
/* IMPORTANT: .chapters must NOT create a higher stacking context than
   .cine-stage, otherwise the fixed video gets hidden behind it. Hero
   chapter has its own opaque background; other chapters are transparent
   so the video shows through. */
.chapters { position: relative; }
.chapter {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px clamp(24px, 6vw, 100px);
  position: relative;
}
/* When pillarboxed/letterboxed the video only occupies part of the viewport;
   push chapter padding so copy starts INSIDE the video rect, not over the
   black bars. --frame-offset-y is set by wm-cover.js. */
.chapter:not(.chapter--hero) {
  padding-top: max(80px, calc(var(--frame-offset-y, 0px) + 40px));
  padding-bottom: max(80px, calc(var(--frame-offset-y, 0px) + 40px));
}
.chapter--hero {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(60px, 8vh, 100px);
  padding-top: 120px;
}

.chapter__content {
  max-width: 1100px; width: 100%;
  position: relative; z-index: 3;
}
.chapter__content--center { text-align: center; }
.chapter__content--right { margin-left: auto; margin-right: 0; max-width: 720px; text-align: right; }
.chapter__content--left { margin-right: auto; margin-left: 0; max-width: 720px; }

/* ====== Nav overlay ====== */
.nav--overlay {
  position: fixed !important; top: 0; left: 0; right: 0;
  background: rgba(14, 19, 30, 0.88) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(221,226,241,.06) !important;
  padding: 20px clamp(24px, 4vw, 60px) !important;
  z-index: 9999 !important;
}
body.cinematic .nav--overlay {
  background: rgba(14, 19, 30, 0.88) !important;
  backdrop-filter: blur(20px) saturate(140%);
}
body.cinematic .nav--overlay .nav__brand img { width: 32px; height: 32px; }
body.cinematic .nav--overlay .nav__links a { color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: 0.04em; }
body.cinematic .nav--overlay .nav__links a:hover { color: #fff; }
body.cinematic .lang-toggle { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
body.cinematic .lang-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ====== Hero copy ====== */
.chapter--hero .chapter__content--center { text-align: center; max-width: 1100px; margin: 0 auto; }

/* Inline logo beside "穹狼科创" — logo + wordmark as one unit. */
.hero-title--compact {
  font-size: clamp(44px, 7vw, 108px) !important;
  margin-bottom: 28px !important;
}
.line--with-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 26px);
  flex-wrap: nowrap;
}
.hero-title__logo {
  flex: 0 0 auto;
  width: clamp(48px, 6.2vw, 96px);
  height: clamp(48px, 6.2vw, 96px);
  border-radius: 18%;
  display: block;
  box-shadow:
    0 0 0 1px rgba(246,217,138,.22),
    0 10px 30px -8px rgba(0,0,0,.6),
    0 0 32px rgba(246,217,138,.10);
  filter: saturate(.88) hue-rotate(-6deg) brightness(1.02);
  /* Optical centering: CJK glyphs sit low in their line-box, so align-items:
     center leaves the logo visually floating above the characters. Nudge
     down ~8% of the line-height to land on the true glyph midline. */
  transform: translateY(0.08em);
}
@media (max-width: 640px) {
  .line--with-logo { gap: 12px; }
  .hero-title__logo { width: 44px; height: 44px; border-radius: 14%; }
}

/* Signature logo: sits below the lede as a closing mark, flanked by thin
   gold rules so it reads as a typographic signature, not a paste-in. */
.hero-logo--signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px auto 0;
  max-width: 320px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.hero-logo--signature.is-visible { opacity: 1; transform: none; }
.hero-logo--signature img {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: block;
  border-radius: 9px;
  box-shadow:
    0 0 0 1px rgba(246,217,138,.25),
    0 8px 22px -6px rgba(0,0,0,.55),
    0 0 24px rgba(246,217,138,.10);
  filter: saturate(.85) hue-rotate(-6deg) brightness(1.02);
}
.hero-logo__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(246,217,138,.45), transparent);
  max-width: 120px;
}
@media (max-width: 640px) {
  .hero-logo--signature { gap: 14px; margin-top: 22px; max-width: 260px; }
  .hero-logo--signature img { width: 30px; height: 30px; }
  .hero-logo__rule { max-width: 90px; }
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-label, 'Space Grotesk'), 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600;
  color: var(--on-surface, #E8ECF5);
  margin-bottom: 36px;
  padding: 12px 24px;
  border: 1px solid rgba(183,196,255,.22);
  border-radius: 999px;
  background: rgba(14,19,30,.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.hero-kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tertiary, #ffb690);
  box-shadow: 0 0 14px var(--tertiary, #ffb690);
  animation: blinkfast 1.4s infinite;
}

.hero-title {
  font-family: 'Noto Sans SC', 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(56px, 9.5vw, 148px);
  margin-bottom: 36px;
  color: #fff;
  text-shadow: 0 4px 48px rgba(0,0,0,.55);
}
.hero-title--stack .line { display: block; }
.hero-title .line { display: block; }
.hero-title .line--solid { color: #fff; }
.hero-title .line--gradient {
  /* Goldleaf gradient with a bright cream "shine" — cyclic (starts and
     ends on the same amber so the one-way sweep loops without a pop). */
  background: linear-gradient(
    115deg,
    #f0c77a 0%,
    #e8b978 20%,
    #dfae6d 40%,
    #fff1c8 50%,   /* shine */
    #e8b978 60%,
    #dfae6d 80%,
    #f0c77a 100%
  );
  background-size: 600% 600%;
  background-origin: padding-box;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 24px rgba(232, 177, 95, .28));
  animation: gradientShift 28s linear infinite;
}
.hero-title__serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--primary, #b7c4ff);
  font-size: 0.9em;
}
.hero-title .line--sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.28em;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.02em;
  margin-top: 24px;
}

.hero-lede {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
  color: rgba(232,236,245,.82);
  max-width: 58ch;
  margin: 0 0 36px 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.hero-lede--center { margin-left: auto; margin-right: auto; text-align: center; }

.hero-scroll-hint {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.4em; opacity: .4;
  text-transform: uppercase;
}
.hero-scroll-hint__line {
  width: 48px; height: 1px; background: currentColor;
  position: relative; overflow: hidden;
}
.hero-scroll-hint__line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--primary, #b7c4ff);
  animation: slide 2s linear infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ====== Reveal (disabled — no fade effect) ====== */
[data-reveal],
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ====== Chapter text ====== */
.chapter-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--primary, #b7c4ff);
  margin-bottom: 28px;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(183,196,255,.3);
}
.chapter-title {
  font-family: 'Noto Sans SC', 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 40px;
}
.chapter-title--huge {
  font-size: clamp(48px, 7vw, 128px);
  line-height: 1.04;
}
/* ====== Below-fold atmosphere ======
   Stat-strip and standard-content should feel like a control panel
   continuing the cinematic hero, not a naked Bootstrap page. */
.standard-content {
  position: relative;
  background:
    /* subtle gold glow from top-right */
    radial-gradient(ellipse at 85% 0%, rgba(232, 177, 95, 0.10) 0%, transparent 45%),
    /* cool tech glow from bottom-left */
    radial-gradient(ellipse at 10% 100%, rgba(80, 130, 200, 0.08) 0%, transparent 50%),
    var(--surface, #0e131e);
}
/* Fine engineering grid that fades — reads as blueprint, not wallpaper */
.standard-content::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200, 210, 230, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 210, 230, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,.15) 40%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,.15) 40%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
/* Corner bracket marks — film-scope / engineering-drawing feel */
.standard-content::after {
  content: '';
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  height: 56px;
  background:
    linear-gradient(90deg, rgba(232, 177, 95, .55) 0 28px, transparent 28px) top left / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(232, 177, 95, .55) 0 28px, transparent 28px) top left / 1px 100% no-repeat,
    linear-gradient(90deg, transparent calc(100% - 28px), rgba(232, 177, 95, .55) calc(100% - 28px)) top right / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(232, 177, 95, .55) 0 28px, transparent 28px) top right / 1px 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* Stat-strip reads like telemetry read-out on top of the panel */
.standard-content .stat-strip {
  position: relative;
  z-index: 2;
  background: rgba(14, 19, 30, 0.55);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-top: 1px solid rgba(232, 177, 95, 0.22);
  border-bottom: 1px solid rgba(232, 177, 95, 0.12);
  gap: 0;
}
.standard-content .stat-strip__cell {
  background: transparent;
  position: relative;
}
.standard-content .stat-strip__cell + .stat-strip__cell::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 177, 95, 0.28), transparent);
}
/* Gold-tinted index badges above each stat */
.standard-content .stat-strip__cell::after {
  content: '0' counter(stat-index);
  counter-increment: stat-index;
  position: absolute;
  top: 14px; right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(232, 177, 95, 0.6);
}
.standard-content .stat-strip { counter-reset: stat-index; }
.standard-content .section { position: relative; z-index: 2; background: transparent; }
.standard-content .section--dark {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 177, 95, 0.06) 0%, transparent 55%),
    rgba(8, 10, 16, 0.4);
}

/* Keep scroll-chapter copy inside the video's rendered rect so the text
   never spills into the letterbox gutters. The stage is 100vh tall, the
   video is object-fit: contain inside it. On 16:9+ viewports the video
   fills the whole stage; on ultra-wide viewports it's only as tall as
   (100vw * 9/16), so we cap copy to that. */
.chapter:not(.chapter--hero) .chapter__content {
  /* Clamp to the video's actually-rendered box so content never escapes the
     cinematic frame, on any aspect ratio. --frame-height is published by
     wm-cover.js once the video lays out; fallback to the old formula. */
  max-height: min(
    calc(var(--frame-height, 100vh) - 140px),
    calc(100vh - 140px)
  );
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 96%, transparent 100%);
}
.chapter-title em {
  font-style: normal;
  font-weight: 900;
  /* Goldleaf gradient with a bright cream shine band; cyclic for seamless loop. */
  background: linear-gradient(
    115deg,
    #f0c77a 0%,
    #e8b978 20%,
    #dfae6d 40%,
    #fff1c8 50%,   /* shine */
    #e8b978 60%,
    #dfae6d 80%,
    #f0c77a 100%
  );
  background-size: 600% 600%;
  background-origin: padding-box;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(232, 177, 95, .28));
  animation: gradientShift 28s linear infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: -600% -600%; }
}
.chapter-title .strike {
  position: relative;
  color: rgba(255,255,255,.3);
}
.chapter-title .strike::after {
  content: ''; position: absolute;
  left: -2%; right: -2%; top: 52%;
  height: 4px; background: var(--tertiary, #ffb690);
  transform: rotate(-3deg);
}
.chapter-body {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.7;
  max-width: 52ch;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.8);
}

/* Spec sheet */
.spec-sheet {
  font-family: 'JetBrains Mono', monospace;
  margin-top: 24px;
}
.spec-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 16px;
  align-items: center;
  text-align: left;
}
.spec-k {
  color: var(--primary, #b7c4ff);
  letter-spacing: 0.15em;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.spec-v {
  color: rgba(255,255,255,.95);
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 20px;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.spec-v[lang-en] { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .4; letter-spacing: 0.2em; text-align: right; }

/* CTA row */
.cta-row {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 48px;
}
.btn-cine {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  /* Synthesized glass — same look as the SHOT 01 chip. This chapter has
     no video behind it (the video is position:absolute in the hero stage),
     so backdrop-filter has nothing to blur. Instead we fake the tint +
     inner highlight with layered gradients on top of a deep-blue base. */
  border: 1px solid rgba(235, 240, 250, 0.10);
  border-radius: 10px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.00) 35%,
      rgba(0, 0, 0, 0.10) 100%),
    rgba(18, 24, 42, 0.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  transition: all .3s;
  cursor: pointer;
}
.btn-cine:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.00) 35%,
      rgba(0, 0, 0, 0.10) 100%),
    rgba(18, 24, 42, 0.68);
  border-color: rgba(235, 240, 250, 0.22);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.45);
}
.btn-cine--primary {
  /* Match the secondary button — same synthesized glass. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.00) 35%,
      rgba(0, 0, 0, 0.10) 100%),
    rgba(18, 24, 42, 0.55);
  border: 1px solid rgba(235, 240, 250, 0.10);
  color: #fff;
}
.btn-cine--primary:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.00) 35%,
      rgba(0, 0, 0, 0.10) 100%),
    rgba(18, 24, 42, 0.68);
  border-color: rgba(235, 240, 250, 0.22);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.45);
}
.btn-cine--ignition {
  background: var(--tertiary-container, #9a4200);
  border-color: transparent;
  color: var(--on-tertiary-container, #ffdbcc);
  font-weight: 700;
}
.btn-cine--ignition:hover {
  background: var(--tertiary, #ffb690);
  color: var(--on-tertiary, #592200);
  box-shadow: 0 12px 40px rgba(154,66,0,.45);
}
.btn-cine__arrow {
  transition: transform .3s;
}
.btn-cine:hover .btn-cine__arrow { transform: translateX(6px); }

/* CJK text inside cine buttons shouldn't inherit the mono/uppercase styling —
   it makes the Chinese fall through to a system fallback and look "off".
   Use the page's Chinese family and drop the letter-spacing/uppercase. */
.btn-cine [lang-cn] {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 15px;
}

/* ====== Standard content transition — Monolith dark everywhere ====== */
.standard-content {
  position: relative;
  z-index: 5;
  background: var(--surface);
  color: var(--on-surface);
  margin-top: 0;
}
body.cinematic .standard-content { background: var(--surface); color: var(--on-surface); }
body.cinematic .standard-content .section { background: var(--surface); color: var(--on-surface); }
body.cinematic .standard-content .section--dark { background: var(--surface-container-lowest); color: var(--on-surface); }

/* Monolith override — all standard content is dark */
body.cinematic .standard-content .ladder__age { color: var(--primary); }
body.cinematic .standard-content .ladder { border-top-color: rgba(67,70,85,.30); }
body.cinematic .standard-content .ladder__age,
body.cinematic .standard-content .ladder__content { border-bottom-color: rgba(67,70,85,.30); }
body.cinematic .standard-content .stat-strip { background: var(--surface-container-lowest); color: var(--on-surface); }
body.cinematic .standard-content .stat-strip__cell { background: var(--surface); }
body.cinematic .standard-content .honor { background: var(--surface-container); }
body.cinematic .standard-content .dl-card { background: rgba(22,28,38,.60); color: var(--on-surface); }
body.cinematic .standard-content .dl-card__title { color: var(--on-surface); }

/* ====== Below-fold atmosphere (applied LAST so it wins the cascade) ======
   Stat-strip + standard-content should feel like a control panel continuing
   the cinematic hero, not a naked page. */
body.cinematic .standard-content {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(232, 177, 95, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 10% 100%, rgba(80, 130, 200, 0.09) 0%, transparent 50%),
    var(--surface, #0e131e) !important;
}
body.cinematic .standard-content > *:first-child { position: relative; }
/* Blueprint grid that fades toward the page */
body.cinematic .standard-content::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200, 210, 230, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 210, 230, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.15) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.15) 45%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}
/* Gold corner-bracket marks — film-scope / engineering drawing */
body.cinematic .standard-content::after {
  content: '';
  position: absolute;
  top: 28px; left: 28px; right: 28px;
  height: 64px;
  background:
    linear-gradient(90deg, rgba(232, 177, 95, .7) 0 32px, transparent 32px) top left / 100% 1px no-repeat,
    linear-gradient(0deg,  rgba(232, 177, 95, .7) 0 32px, transparent 32px) top left / 1px 100% no-repeat,
    linear-gradient(90deg, transparent calc(100% - 32px), rgba(232, 177, 95, .7) calc(100% - 32px)) top right / 100% 1px no-repeat,
    linear-gradient(0deg,  rgba(232, 177, 95, .7) 0 32px, transparent 32px) top right / 1px 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* Stat strip: telemetry readout on the panel */
body.cinematic .standard-content .stat-strip {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(232, 177, 95, 0.32);
  border-bottom: 1px solid rgba(232, 177, 95, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.35);
  gap: 0;
  counter-reset: stat-index;
}
body.cinematic .standard-content .stat-strip__cell {
  background: transparent !important;
  position: relative;
}
body.cinematic .standard-content .stat-strip__cell + .stat-strip__cell::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 177, 95, 0.32), transparent);
}
body.cinematic .standard-content .stat-strip__cell::after {
  content: '0' counter(stat-index);
  counter-increment: stat-index;
  position: absolute;
  top: 16px; right: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #f0c77a;
  text-shadow: 0 0 12px rgba(232, 177, 95, 0.6);
  z-index: 3;
}
/* Keep the cell-divider ::before; add a gold dot via outline on the num */
body.cinematic .standard-content .stat-strip__num {
  position: relative;
}
body.cinematic .standard-content .stat-strip__num::after {
  content: '';
  position: absolute;
  top: -4px; right: -14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f0c77a;
  box-shadow: 0 0 10px rgba(232, 177, 95, 0.7);
}
body.cinematic .standard-content .section {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
body.cinematic .standard-content .section--dark {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 177, 95, 0.07) 0%, transparent 55%),
    rgba(8, 10, 16, 0.5) !important;
}

body.past-hero .cine-scope { opacity: 1; }

/* No overlay on hero — video stays pure. Text gets local scrim only. */
.chapter--hero .chapter__content { position: relative; z-index: 3; }

.dolly-flash::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(183,196,255,.4) 0%, transparent 60%);
  z-index: 50;
  pointer-events: none;
  animation: dolly-flash 1.8s ease-out forwards;
}
@keyframes dolly-flash {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(3); }
}

/* Mobile */
@media (max-width: 900px) {
  .hero-title { font-size: clamp(56px, 15vw, 120px); }
  .chapter-title { font-size: clamp(28px, 7vw, 48px); }
  .chapter-title--huge { font-size: clamp(32px, 8.5vw, 60px); line-height: 1.05; }
  .cine-scope__meta { font-size: 9px; gap: 6px; }
  .spec-row { grid-template-columns: 90px 1fr; gap: 12px; }
  .spec-v[lang-en] { display: none; }
  .chapter__content--right { text-align: left; }

  /* Narrow viewports: keep the frame-height clamp (set by JS) active so
     text stays within the visible video rect — just give a bit of breathing
     room on padding and sizing. */
  .chapter:not(.chapter--hero) {
    padding-top: 100px;
    padding-bottom: 80px;
  }
  .chapter-title { margin-bottom: 24px; }
  .chapter-body { font-size: clamp(14px, 3.6vw, 18px); line-height: 1.6; }

  /* Mobile hero: let the video show through — the desktop "private title
     screen" feels disconnected on small screens, so we put text ON the
     video, the same way it floats once you scroll on desktop. */
  .chapter--hero {
    background: transparent;
  }
  .chapter--hero::before { opacity: 0.3; }

  /* On portrait mobile, the 16:9 video leaves huge black bars — the text
     ends up floating OFF the video. Switch to cover so the video fills the
     viewport (head/body still visible, sides crop a little), and the text
     always sits on actual imagery. */
  .mist-video {
    object-fit: cover !important;
    object-position: 50% 35%; /* bias up so the boy stays in frame */
  }

  /* In mobile cover mode the original "AI-gen" watermark is cropped off-screen
     naturally. The wm-cover chip — positioned by wm-cover.js assuming
     object-fit:contain — drifts onto the copy area. Hide it here; it still
     does its job on desktop/tablet letterbox layouts. */
  .cine-stage__wm-cover { display: none; }

  /* CRITICAL: the desktop rule clamps .chapter__content to the video's
     rendered rect (via --frame-height, computed for object-fit:contain). On
     mobile the video is object-fit:cover and fills the viewport, so the
     clamp collapses to ~80px and overflow:hidden + mask crops the title
     and buttons. Release the clamp so content can flow naturally. */
  .chapter:not(.chapter--hero) .chapter__content {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Readability scrim behind EVERY cinematic chapter's copy on mobile so
     text stays legible over whatever frame of video is showing. */
  .chapter .chapter__content {
    position: relative;
    padding: 28px 22px;
  }
  .chapter .chapter__content::before {
    content: '';
    position: absolute;
    inset: -20px -16px;
    background: radial-gradient(
      ellipse at 50% 50%,
      rgba(8, 10, 16, 0.82) 0%,
      rgba(8, 10, 16, 0.6) 50%,
      rgba(8, 10, 16, 0) 90%
    );
    z-index: -1;
    pointer-events: none;
    border-radius: 24px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .cine-stage__noise, .hero-scroll-hint__line::after { animation: none; }
}

/* ====== Letterbox (cinematic frame constraint) ======
   On ultra-wide viewports the video is letterboxed (object-fit: contain).
   When that happens, wm-cover.js sets --frame-width and adds .has-letterbox
   to body, and we constrain page content to match the video frame so text
   never escapes the cinematic viewport. */
body.has-letterbox .nav--overlay,
body.has-letterbox .chapters,
body.has-letterbox .standard-content,
body.has-letterbox .footer,
body.has-pillarbox .chapters {
  max-width: var(--frame-width);
  width: var(--frame-width);
  margin-left: auto;
  margin-right: auto;
}
/* Individual sections inherit the frame via their parent — but make sure
   any .section or .chapter that breaks out (has its own width) gets capped too. */
body.has-letterbox .section,
body.has-letterbox .chapter {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* The fixed cinematic stage also gets cropped to the frame width so the
   video's rendered edges align exactly with the content columns — no
   stray video pixels bleeding past the letterbox edge. */
body.has-letterbox .cine-stage {
  left: var(--frame-offset-x);
  right: var(--frame-offset-x);
}
/* Hero copy keeps its centered layout within the frame */
body.has-letterbox .chapter--hero .chapter__content {
  max-width: min(1100px, var(--frame-width));
}
/* Pure black gutters on the body so the letterbox reads as cinematic film bars */
body.has-letterbox { background: #000; }