/* ============================================================
   REVISION 02 — page-turn rhythm, film backdrop, calibrated scale
   ============================================================ */

/* ---------- moving film backdrop (hero) ---------- */
.hero-film-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b0b0a;
  pointer-events: none;
}
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 52%;
  filter: grayscale(1) contrast(1.12) brightness(0.62);
  opacity: 0.82;
  transform: scale(1.055);
  animation: filmBreathe 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes filmBreathe {
  from { transform: scale(1.055) translate3d(-0.6%, 0, 0); }
  to { transform: scale(1.085) translate3d(0.8%, -0.8%, 0); }
}
.hero-film-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 11, 10, 0.94) 0%, rgba(11, 11, 10, 0.66) 30%, rgba(11, 11, 10, 0.12) 66%, rgba(11, 11, 10, 0.78) 100%),
    linear-gradient(180deg, rgba(11, 11, 10, 0.88) 0%, transparent 24%, transparent 72%, #0b0b0a 100%),
    radial-gradient(68% 82% at 74% 50%, transparent 0%, rgba(11, 11, 10, 0.32) 76%, #0b0b0a 100%);
}
.hero-film-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

/* ---------- ambient light field ---------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.38;
  transition: opacity 1.1s ease;
}
.ambient i {
  position: absolute;
  display: block;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.26;
  will-change: transform;
}
.ambient-a {
  left: -24vw;
  top: -8vh;
  background: radial-gradient(circle, rgba(232, 71, 42, 0.58) 0%, rgba(232, 71, 42, 0) 68%);
  animation: ambientA 21s ease-in-out infinite alternate;
}
.ambient-b {
  right: -22vw;
  bottom: -22vh;
  background: radial-gradient(circle, rgba(242, 238, 227, 0.2) 0%, rgba(242, 238, 227, 0) 70%);
  animation: ambientB 27s ease-in-out infinite alternate;
}
@keyframes ambientA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12vw, 9vh, 0) scale(1.18); }
}
@keyframes ambientB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to { transform: translate3d(-10vw, -8vh, 0) scale(0.92); }
}
body[data-surface="light"] .ambient { opacity: 0.16; mix-blend-mode: multiply; }
body[data-surface="light"] .ambient i { opacity: 0.14; }

/* ---------- grain drift ---------- */
.grain { animation: grainDrift 9s steps(7) infinite; }
@keyframes grainDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14% { transform: translate3d(-1.2%, 0.8%, 0); }
  28% { transform: translate3d(0.9%, -1.1%, 0); }
  42% { transform: translate3d(-0.7%, -0.5%, 0); }
  57% { transform: translate3d(1.1%, 1.2%, 0); }
  71% { transform: translate3d(-0.9%, 0.4%, 0); }
  85% { transform: translate3d(0.6%, -0.9%, 0); }
}

/* ---------- continuous small motions ---------- */
.orbit-label { animation: orbitFloat 11s ease-in-out infinite alternate; }
.orbit-b { animation-delay: -3s; }
.orbit-c { animation-delay: -5s; }
.orbit-d { animation-delay: -7s; }
.orbit-e { animation-delay: -2s; }
.orbit-f { animation-delay: -8s; }
.orbit-g { animation-delay: -4s; }
.orbit-h { animation-delay: -6s; }
@keyframes orbitFloat {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}
.hero-tag { animation: tagBreathe 8s ease-in-out infinite alternate; }
@keyframes tagBreathe {
  from { opacity: 0.42; }
  to { opacity: 0.8; }
}
.lens-arc { animation-duration: 24s; }
.lens-focus i { animation: focusPulse 2.4s ease-in-out infinite; }
@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 71, 42, 0); }
  45% { box-shadow: 0 0 0 5px rgba(232, 71, 42, 0.18); }
}
.map-crosshair { animation: crossPulse 4.2s ease-in-out infinite; }
@keyframes crossPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.evidence-trace path { animation: traceFlow 11s linear infinite; }
@keyframes traceFlow {
  to { stroke-dashoffset: -120; }
}
.folio-a { animation: pageFloatA 13s ease-in-out infinite alternate; }
.folio-b { animation: pageFloatB 15s ease-in-out infinite alternate; }
@keyframes pageFloatA {
  from { transform: rotate(-1.4deg) translateY(8px); }
  to { transform: rotate(-2.0deg) translateY(1px); }
}
@keyframes pageFloatB {
  from { transform: rotate(1.3deg) translateY(-10px); }
  to { transform: rotate(1.8deg) translateY(-3px); }
}
.corpus-stamp { animation: stampFloat 9s ease-in-out infinite alternate; }
@keyframes stampFloat {
  from { transform: rotate(11deg) translateY(0); }
  to { transform: rotate(8deg) translateY(-6px); }
}
.begin-ring { rotate: 0deg; animation: slowSpin 90s linear infinite; }
@keyframes slowSpin { to { rotate: 360deg; } }
.compare-line { animation: lineBreathe 6s ease-in-out infinite alternate; }
@keyframes lineBreathe {
  from { stroke-opacity: 0.72; }
  to { stroke-opacity: 1; }
}

/* ---------- final-page film echo ---------- */
.begin-film-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}
.begin-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  filter: grayscale(1) brightness(0.46) contrast(1.12);
  transform: scale(1.1);
  animation: filmBreathe 30s ease-in-out infinite alternate-reverse;
}
.begin-film-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,10,0.96) 0%, rgba(11,11,10,0.7) 48%, rgba(11,11,10,0.26) 100%),
    linear-gradient(180deg, #0b0b0a 0%, transparent 34%, transparent 66%, #0b0b0a 100%);
}
@media (max-width: 980px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .begin-film-wrap { opacity: 0.3; }
}

/* ---------- page rail ---------- */
.page-rail {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(242, 238, 227, 0.5);
  transition: color 0.5s ease;
}
.page-rail i {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.38;
  transition: width 0.5s var(--ease-out), opacity 0.4s ease, background 0.4s ease;
}
.page-rail i.is-current {
  width: 34px;
  background: var(--red);
  opacity: 1;
}
.fixed-ui.is-light .page-rail { color: rgba(11, 11, 10, 0.48); }

/* ---------- the actual page turn ---------- */
.turn-sweep {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: 32vw;
  pointer-events: none;
  opacity: 0;
  transform: translateX(110vw);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242, 238, 227, 0.02) 22%,
    rgba(242, 238, 227, 0.13) 46%,
    rgba(232, 71, 42, 0.12) 54%,
    transparent 100%);
  mix-blend-mode: screen;
}
body.is-turning[data-turn-dir="next"] .turn-sweep { animation: sweepNext 860ms cubic-bezier(.76, 0, .24, 1) both; }
body.is-turning[data-turn-dir="prev"] .turn-sweep { animation: sweepPrev 860ms cubic-bezier(.76, 0, .24, 1) both; }
@keyframes sweepNext {
  0% { opacity: 0; transform: translateX(110vw); }
  18% { opacity: 0.75; }
  80% { opacity: 0.28; }
  100% { opacity: 0; transform: translateX(-36vw); }
}
@keyframes sweepPrev {
  0% { opacity: 0; transform: translateX(-36vw); }
  18% { opacity: 0.75; }
  80% { opacity: 0.28; }
  100% { opacity: 0; transform: translateX(110vw); }
}
.rail.is-bumping { animation: edgeBump 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes edgeBump {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-9px); }
  58% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}
body.is-turning { cursor: default; }
body.is-turning .site-head,
body.is-turning .fixed-ui {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-turning .chapter.is-active .chapter-ui {
  opacity: 1;
  transition: opacity 0.3s ease;
}
body.is-turning .chapter.is-active .chapter-copy,
body.is-turning .chapter.is-active .chapter-link {
  transition-delay: 0.12s;
}
body.is-turning .chapter.is-active .curtain {
  transition-duration: 0.58s;
  transition-delay: 0s;
}
body.is-turning .chapter.is-active .split .art {
  filter: grayscale(0) contrast(1);
  opacity: 1;
}
body.is-turning .site-head > *,
body.is-turning .fixed-ui .scroll-cue { pointer-events: none; }
body.is-turning .rail { cursor: default; }
body.is-turning .chapter.is-leaving .chapter-word span {
  animation: turnTypeOut 0.9s var(--ease-curtain) both;
}
body.is-turning .chapter.is-leaving .chapter-copy,
body.is-turning .chapter.is-leaving .chapter-link {
  animation: turnCopyOut 0.55s ease both;
}
@keyframes turnTypeOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-3vw); opacity: 0.15; }
}
@keyframes turnCopyOut {
  to { opacity: 0.18; transform: translateY(8px); }
}

/* ============================================================
   Desktop scale correction
   ============================================================ */
@media (min-width: 981px) {
  body:not(.is-vertical) .site-head {
    height: 98px;
    padding-inline: clamp(36px, 5vw, 84px);
  }
  body:not(.is-vertical) .brand { gap: 12px; }
  body:not(.is-vertical) .brand-mark { width: 33px; height: 33px; font-size: 16px; }
  body:not(.is-vertical) .brand-word { font-size: 19px; }
  body:not(.is-vertical) .brand-meta { font-size: 8px; margin-left: 10px; }
  body:not(.is-vertical) .primary-nav { gap: clamp(20px, 2.45vw, 38px); }
  body:not(.is-vertical) .primary-nav a {
    font-size: 11.5px;
    gap: 7px;
    padding: 10px 0;
  }
  body:not(.is-vertical) .primary-nav a span { font-size: 8px; }
  body:not(.is-vertical) .head-tools { gap: 20px; }
  body:not(.is-vertical) .quiet-link { font-size: 10.5px; }
  body:not(.is-vertical) .workbench-link {
    font-size: 10px;
    padding: 11px 15px 10px;
  }

  /* hero */
  body:not(.is-vertical) .hero-main {
    top: 19.5vh;
    left: clamp(38px, 5vw, 86px);
    width: min(53vw, 760px);
  }
  body:not(.is-vertical) .hero-kicker { font-size: 9.5px; letter-spacing: 0.17em; }
  body:not(.is-vertical) .hero-kicker span { font-size: 10.5px; }
  body:not(.is-vertical) .hero-title {
    margin-top: clamp(32px, 5vh, 58px);
    font-size: clamp(72px, 8.05vw, 136px);
    line-height: 1.02;
    letter-spacing: -0.048em;
  }
  body:not(.is-vertical) .hero-title .line { padding-bottom: 0.1em; margin-bottom: -0.08em; }
  body:not(.is-vertical) .hero-lede {
    margin-top: 30px;
    font-size: 15.5px;
    line-height: 1.9;
    letter-spacing: 0.045em;
  }
  body:not(.is-vertical) .hero-actions { margin-top: 34px; gap: 14px; }
  body:not(.is-vertical) .btn { min-height: 51px; padding-inline: 20px; font-size: 10.5px; }
  body:not(.is-vertical) .hero-proof {
    gap: 26px;
    width: min(51vw, 720px);
    margin-top: clamp(34px, 5.5vh, 64px);
    padding-top: 17px;
  }
  body:not(.is-vertical) .hero-proof strong { font-size: clamp(27px, 2.15vw, 34px); }
  body:not(.is-vertical) .hero-proof small { margin-top: 9px; font-size: 8px; }
  body:not(.is-vertical) .hero-lens {
    width: clamp(430px, 42.7vw, 650px);
    right: 5.2vw;
    top: 49.5%;
    border-color: rgba(242, 238, 227, 0.2);
    box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.5), 0 60px 150px rgba(0, 0, 0, 0.32);
  }
  body:not(.is-vertical) .lens-center strong { font-size: clamp(70px, 6.6vw, 110px); }
  body:not(.is-vertical) .lens-center::before { width: 280px; height: 280px; }
  body:not(.is-vertical) .hero-foot { bottom: 68px; font-size: 8px; }
  body:not(.is-vertical) .hero-tag { font-size: 8px; }
  body:not(.is-vertical) .fixed-ui {
    bottom: 24px;
    left: clamp(38px, 5vw, 84px);
    right: clamp(38px, 5vw, 84px);
  }

  /* chapter system */
  body:not(.is-vertical) .chapter-ui {
    left: clamp(38px, 5vw, 84px);
    width: min(35vw, 500px);
    top: 49%;
  }
  body:not(.is-vertical) .chapter-meta {
    gap: 14px;
    padding-top: 13px;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    opacity: 0.62;
  }
  body:not(.is-vertical) .meta-index { font-size: 9px; }
  body:not(.is-vertical) .chapter-word {
    margin-top: 28px;
    font-size: clamp(66px, 6.75vw, 112px);
    line-height: 0.84;
    letter-spacing: -0.078em;
  }
  body:not(.is-vertical) .chapter-word b { font-size: 0.32em; }
  body:not(.is-vertical) .chapter-copy { margin-top: 32px; max-width: 380px; }
  body:not(.is-vertical) .chapter-copy h3 { font-size: 22px; line-height: 1.55; }
  body:not(.is-vertical) .chapter-copy p {
    margin-top: 13px;
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.018em;
  }
  body:not(.is-vertical) .chapter-link {
    width: 325px;
    margin-top: 25px;
    padding-top: 13px;
    font-size: 10px;
  }
  body:not(.is-vertical) .chapter-link i { font-size: 15px; }
  body:not(.is-vertical) .chapter-num { top: 112px; font-size: 11.5vw; }
  body:not(.is-vertical) .art-side { font-size: 7.5px; right: 17px; }
  body:not(.is-vertical) .corpus-count strong { font-size: 43px; }
  body:not(.is-vertical) .evidence-quote {
    top: 17.5vh;
    font-size: clamp(33px, 3.15vw, 51px);
  }
  body:not(.is-vertical) .evidence-card {
    bottom: 8vh;
    padding: 26px 30px 22px;
  }
  body:not(.is-vertical) .evidence-card > p {
    margin: 28px 0 23px;
    font-size: clamp(21px, 1.75vw, 28px);
  }
  body:not(.is-vertical) .report {
    top: 12vh;
    height: 78.5vh;
    padding: 2.15vw 2vw 2.6vw;
  }
  body:not(.is-vertical) .report-title h4 { font-size: 40px; }
  body:not(.is-vertical) .report-lede { font-size: 11px; }
  body:not(.is-vertical) .begin-content { top: 22vh; left: clamp(38px, 5vw, 84px); width: min(57vw, 840px); }
  body:not(.is-vertical) .begin-title {
    font-size: clamp(120px, 14.7vw, 226px);
    margin: 32px 0 30px;
  }
  body:not(.is-vertical) .begin-content h3 { font-size: 28px; }
  body:not(.is-vertical) .begin-lede { font-size: 13.5px; line-height: 1.9; }
  body:not(.is-vertical) .begin-notes { font-size: 8px; margin-top: 48px; }
  body:not(.is-vertical) .site-foot { bottom: 82px; font-size: 8px; left: clamp(38px, 5vw, 84px); right: clamp(38px, 5vw, 84px); }
}

/* ============================================================
   Vertical / mobile scale correction
   ============================================================ */
@media (max-width: 980px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-film { opacity: 0.38; object-position: 62% 50%; filter: grayscale(1) brightness(0.48); }
  .hero-film-veil {
    background:
      linear-gradient(180deg, rgba(11, 11, 10, 0.9) 0%, rgba(11, 11, 10, 0.55) 38%, rgba(11, 11, 10, 0.92) 100%),
      linear-gradient(90deg, rgba(11, 11, 10, 0.92), rgba(11, 11, 10, 0.25));
  }
  .ambient { opacity: 0.3; }
  body[data-surface="light"] .ambient { opacity: 0.12; }
  .page-rail { display: none; }
  .hero-main { top: 12.5vh; }
  .hero-title { font-size: clamp(51px, 14.2vw, 78px); line-height: 1.01; }
  .hero-kicker { font-size: 7.5px; }
  .hero-lede { font-size: 13px; line-height: 1.85; }
  .hero-actions { margin-top: 24px; }
  .hero-proof { margin-top: 28px; }
  .hero-proof strong { font-size: 24px; }
  .hero-proof small { font-size: 7px; }
  .hero-lens { width: 80vw; right: -20vw; top: 55%; opacity: 0.32; }
  .lens-center strong { font-size: 54px; }
  .chapter-word { font-size: clamp(51px, 15vw, 78px); }
  .chapter-copy h3 { font-size: clamp(18px, 5vw, 22px); }
  .chapter-copy p { font-size: 12px; line-height: 1.8; }
  .chapter-meta { font-size: 7px; }
  .begin-title { font-size: clamp(92px, 24.5vw, 150px); }
  .begin-content h3 { font-size: 22px; }
  .begin-lede { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film { display: none; }
  .begin-film { display: none; }
  .ambient { display: none; }
  .grain { animation: none; }
  .hero-film-veil { background: #0b0b0a; }
  body.is-turning .site-head,
  body.is-turning .fixed-ui { opacity: 1 !important; }
}

/* ---------- 进入工作台：合幕 ---------- */
.enter-veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #0b0b0a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s;
}
.enter-veil.is-on { opacity: 1; visibility: visible; }
.enter-veil .enter-word {
  font-family: "Instrument Serif", "Noto Serif SC", serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  color: #f2eee3;
}
.enter-veil .enter-word b { color: #e8472a; font-weight: 400; }
.enter-veil .enter-line {
  display: block;
  width: 0;
  height: 1px;
  background: #e8472a;
  transition: width 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) 0.04s;
}
.enter-veil.is-on .enter-line { width: min(180px, 32vw); }
@media (prefers-reduced-motion: reduce) {
  .enter-veil { display: none; }
}