/* ====================================================================
   As You Like It · Fanxing Drama Club
   主题色:阿登森林 — 晨光、橡树、玫瑰、暖金
   ==================================================================== */

:root {
  --c-night:        #0d1f1a;
  --c-forest-deep:  #1e3a2a;
  --c-forest:       #2d5a3d;
  --c-moss:         #5e7d4a;
  --c-leaf:         #7a9a5a;
  --c-gold:         #c89b3c;
  --c-gold-soft:    #d9b765;
  --c-cream:        #f5ecd9;
  --c-parchment:    #faf6ed;
  --c-rose:         #d4667a;        /* Rosalind 的玫瑰 */
  --c-rose-deep:    #a84056;
  --c-rose-soft:    #f4c4ce;
  --c-bark:         #4a3520;
  --c-ink:          #1c1a14;

  --f-display: "Cinzel", "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-zh:      "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-zh-ui:   "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-zh-calli:"Ma Shan Zheng", "Noto Serif SC", serif;
  --f-zh-disp: "ZCOOL XiaoWei", "Noto Serif SC", serif;

  --ease: cubic-bezier(.16,1,.32,1);

  /* 滚动距离 (由 JS 写入一次,CSS 派生所有视差) */
  --scrollY: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background:
    linear-gradient(180deg, rgba(250,246,237,.85) 0%, rgba(245,236,217,.9) 100%),
    url("/static/images/bg-engraving.webp") center/240px repeat;
  color: var(--c-ink);
  font-family: var(--f-zh);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  background-attachment: fixed, scroll;
}

body { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

.zh { font-family: var(--f-zh); }
.en { font-family: var(--f-display); letter-spacing: .04em; }

/* ====================================================================
   入场动画 — 阿登森林 / 幕布升起
   ==================================================================== */

.entry {
  position: fixed; inset: 0; z-index: 1000;
  /* 森林实景照:柔焦林间光作底,顶部只淡淡一层暖色、底部稍压暗保文字可读,
     不要任何背景动画(ken-burns / parallax 全部移除) */
  background:
    linear-gradient(180deg,
      rgba( 20,  35,  25, .25) 0%,
      rgba( 20,  35,  25, .10) 35%,
      rgba( 30,  50,  35, .35) 70%,
      rgba( 13,  26,  18, .78) 100%),
    url("/static/images/bg-forest-soft.webp") center/cover no-repeat;
  background-color: #1a2e1a;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
}
.entry.is-leaving { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.entry.is-hidden { display: none; }

/* 第一屏:海报式森林幕前 */
.entry__hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.entry__scroll-hint {
  position: relative; z-index: 60;
  margin: 28px 0 0;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: .75;
  text-align: center;
  animation: scrollHint 2.4s ease-in-out infinite;
}
.entry__scroll-arrow {
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  vertical-align: -2px;
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ----- 天空 + 远景 ----- */
.entry__sky {
  position: absolute; inset: 0;
  /* 柔焦森林实景照作底,顶部微微暖光、底部压暗 — 不画多余遮罩,让照片本身说话 */
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(255,240,210,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(13,26,18,.55) 100%),
    url("/static/images/bg-forest-soft.webp") center/cover no-repeat;
  pointer-events: none;
}

/* ----- 太阳(取代月亮) ----- */
.entry__sun {
  position: absolute; top: 8%; right: 18%;
  width: 140px; height: 140px;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(255, 220, 130, .6));
}
.entry__sun-core {
  position: absolute; inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0 0%, #ffe1a0 50%, #f3b864 100%);
  animation: sunGlow 5s ease-in-out infinite;
}
.entry__sun-halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 130, .55) 0%, rgba(255, 220, 130, 0) 60%);
  animation: sunGlow 5s ease-in-out infinite;
}
@keyframes sunGlow {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1;  }
}

/* ----- 丁达尔光(透过树梢的太阳光) ----- */
.entry__rays {
  position: absolute; top: 8%; right: 18%;
  width: 800px; height: 800px;
  transform: translate(50%, -50%);
  background:
    conic-gradient(from 200deg at 50% 50%,
      transparent 0deg, rgba(255,240,200,.12) 4deg, transparent 8deg,
      transparent 22deg, rgba(255,240,200,.10) 26deg, transparent 30deg,
      transparent 50deg, rgba(255,240,200,.14) 54deg, transparent 58deg,
      transparent 80deg, rgba(255,240,200,.10) 84deg, transparent 88deg,
      transparent 120deg, rgba(255,240,200,.08) 124deg, transparent 128deg,
      transparent 160deg, rgba(255,240,200,.10) 164deg, transparent 168deg,
      transparent 200deg, rgba(255,240,200,.12) 204deg, transparent 208deg,
      transparent 250deg, rgba(255,240,200,.08) 254deg, transparent 258deg,
      transparent 300deg, rgba(255,240,200,.10) 304deg, transparent 308deg,
      transparent 340deg, rgba(255,240,200,.12) 344deg, transparent 348deg);
  animation: raysRotate 60s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .8;
}
@keyframes raysRotate {
  from { transform: translate(50%, -50%) rotate(0deg);   }
  to   { transform: translate(50%, -50%) rotate(360deg); }
}

/* ----- 浮尘(阳光中的尘埃) ----- */
.entry__dust { position: absolute; inset: 0; pointer-events: none; }
.entry__dust::before, .entry__dust::after {
  content: "";
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 245, 220, .8);
  box-shadow:
    100px 200px 0 -1px rgba(255,245,220,.6),
    300px 150px 0 -1px rgba(255,245,220,.7),
    500px 280px 0 -1px rgba(255,245,220,.5),
    700px 100px 0 -1px rgba(255,245,220,.7),
    200px 400px 0 -1px rgba(255,245,220,.5),
    600px 350px 0 -1px rgba(255,245,220,.6),
    850px 250px 0 -1px rgba(255,245,220,.5),
    150px 500px 0 -1px rgba(255,245,220,.6),
    450px 450px 0 -1px rgba(255,245,220,.7),
    750px 400px 0 -1px rgba(255,245,220,.5);
  animation: dustFloat 12s ease-in-out infinite;
}
.entry__dust::after {
  animation-delay: -6s;
  animation-duration: 18s;
  transform: translate(200px, 100px);
  opacity: .7;
}
@keyframes dustFloat {
  0%, 100% { transform: translate(0, 0)        scale(1);   opacity: .5; }
  50%      { transform: translate(40px, -30px) scale(1.2); opacity: .9; }
}

/* ----- 雾气 ----- */
.entry__mist {
  position: absolute; left: -10%; right: -10%;
  pointer-events: none;
  filter: blur(25px);
}
.entry__mist--far {
  top: 50%; height: 30%;
  background: radial-gradient(ellipse 50% 80% at 30% 50%, rgba(255,250,235,.35), transparent 70%),
              radial-gradient(ellipse 60% 60% at 70% 60%, rgba(255,240,210,.25), transparent 70%);
  animation: mistDrift 22s ease-in-out infinite;
}
.entry__mist--near {
  top: 65%; height: 35%;
  background: radial-gradient(ellipse 70% 70% at 40% 50%, rgba(245,236,217,.45), transparent 70%),
              radial-gradient(ellipse 60% 60% at 80% 70%, rgba(220,200,170,.4), transparent 70%);
  animation: mistDrift 16s ease-in-out infinite reverse;
  opacity: .85;
}
@keyframes mistDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(60px); }
}

/* ----- 树木剪影(3 层) ----- */
.entry__trees {
  position: absolute; left: 0; right: 0; bottom: 0;
  background-repeat: repeat-x;
  background-size: 800px 100%;
  pointer-events: none;
}
.entry__trees--far {
  height: 38%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' preserveAspectRatio='none'><g fill='%235a4a2e'><path d='M0 240 L0 160 L20 130 L25 100 L35 130 L48 90 L60 125 L78 105 L95 135 L115 110 L135 145 L160 115 L185 145 L210 100 L235 135 L260 115 L290 145 L320 105 L350 140 L380 110 L410 145 L440 100 L470 135 L500 115 L530 145 L560 120 L590 145 L620 110 L650 140 L680 125 L710 150 L740 130 L770 155 L800 135 L800 240 Z'/></g></svg>");
  opacity: .55;
  filter: blur(1.5px);
}
.entry__trees--mid {
  height: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 280' preserveAspectRatio='none'><g fill='%232d3a22'><path d='M0 280 L0 180 L25 150 L30 110 L42 145 L55 100 L72 140 L90 115 L110 150 L132 125 L155 160 L180 130 L210 165 L240 120 L270 155 L300 125 L335 165 L370 130 L405 160 L440 115 L475 150 L510 125 L545 160 L580 130 L615 165 L650 135 L685 160 L720 140 L755 170 L790 145 L800 165 L800 280 Z'/></g></svg>");
  opacity: .8;
}
.entry__trees--near {
  height: 30%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><g fill='%230f1a0a'><path d='M0 200 L0 160 Q30 110 80 130 Q100 90 140 110 Q170 70 220 95 Q260 60 320 90 Q380 55 440 95 Q500 65 560 100 Q620 75 680 110 Q730 85 780 115 L800 105 L800 200 Z'/></g></svg>");
}

/* ----- 公爵的橡树 ----- */
.entry__oak {
  position: absolute; right: 6%; bottom: 0;
  width: 320px; height: 480px;
  pointer-events: none;
  animation: oakSway 8s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes oakSway {
  0%, 100% { transform: rotate(-0.5deg) scale(1);    }
  50%      { transform: rotate(0.5deg)  scale(1.01); }
}

/* ----- 飞鸟(掠过天空) ----- */
.entry__birds { position: absolute; inset: 0; pointer-events: none; }
.bird {
  position: absolute;
  width: 24px; height: 12px;
  opacity: 0;
  animation: birdFly 18s linear infinite;
}
.bird::before, .bird::after {
  content: "";
  position: absolute; top: 0;
  width: 12px; height: 12px;
  border: 2px solid #2a1f15;
  border-color: #2a1f15 transparent transparent transparent;
  border-radius: 50%;
}
.bird::before { left: 0;  transform: rotate(-15deg); }
.bird::after  { right: 0; transform: rotate(15deg);  }
.bird--1 { top: 15%; left: -10%; animation-delay: 1s;  animation-duration: 16s; transform: scale(.7); }
.bird--2 { top: 22%; left: -10%; animation-delay: 4s;  animation-duration: 20s; transform: scale(.85); }
.bird--3 { top: 12%; left: -10%; animation-delay: 8s;  animation-duration: 18s; transform: scale(.6); }
.bird--4 { top: 28%; left: -10%; animation-delay: 12s; animation-duration: 22s; transform: scale(.9); }
@keyframes birdFly {
  0%   { transform: translate(0, 0)     scale(var(--s, 0.8)); opacity: 0; }
  5%   { opacity: 1; }
  20%  { transform: translate(20vw, -20px) scale(var(--s, 0.8)); }
  50%  { transform: translate(50vw, 10px)  scale(var(--s, 0.8)); }
  80%  { transform: translate(80vw, -10px) scale(var(--s, 0.8)); }
  95%  { opacity: 1; }
  100% { transform: translate(110vw, 0)   scale(var(--s, 0.8)); opacity: 0; }
}

/* ----- 玫瑰花瓣 + 蝴蝶 — 入场仪式感的飘落与飞舞 */
.entry__petals, .entry__butterflies { position: absolute; inset: 0; pointer-events: none; }
.petal {
  position: absolute;
  width: 18px; height: 18px;
  background: radial-gradient(ellipse at 30% 30%, var(--c-rose-soft) 0%, var(--c-rose) 60%, var(--c-rose-deep) 100%);
  border-radius: 70% 0 70% 0;
  transform-origin: center;
  opacity: 0;
  animation: petalFall 18s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(168, 64, 86, .3));
}
@keyframes petalFall {
  0%   { transform: translateY(-10vh) translateX(0)  rotate(0)    scale(.8); opacity: 0; }
  10%  { opacity: .9; }
  25%  { transform: translateY(20vh)  translateX(40px) rotate(180deg) scale(1); }
  50%  { transform: translateY(50vh)  translateX(-30px) rotate(360deg) scale(.9); }
  75%  { transform: translateY(75vh)  translateX(35px)  rotate(540deg) scale(1); }
  100% { transform: translateY(110vh) translateX(0)     rotate(720deg) scale(.7); opacity: 0; }
}

/* ----- 蝴蝶 ----- */
.butterfly {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0;
  animation: butterflyDance 14s ease-in-out infinite;
}
.butterfly::before, .butterfly::after {
  content: "";
  position: absolute;
  width: 12px; height: 16px;
  background: linear-gradient(135deg, var(--c-rose-soft) 0%, var(--c-rose) 50%, var(--c-gold) 100%);
  border-radius: 70% 30% 50% 50%;
  top: 0;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,.15);
}
.butterfly::before { left: 0;  transform-origin: right center; animation: flapL .4s ease-in-out infinite alternate; }
.butterfly::after  { right: 0; transform-origin: left center;  animation: flapR .4s ease-in-out infinite alternate; }
@keyframes flapL { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes flapR { from { transform: rotate(20deg);  } to { transform: rotate(-20deg); } }
@keyframes butterflyDance {
  0%   { transform: translate(10vw, 20vh) rotate(0);                       opacity: 0; }
  10%  { opacity: 1; }
  20%  { transform: translate(20vw, 35vh) rotate(20deg); }
  40%  { transform: translate(40vw, 25vh) rotate(-15deg); }
  60%  { transform: translate(60vw, 40vh) rotate(25deg); }
  80%  { transform: translate(80vw, 30vh) rotate(-10deg); }
  90%  { opacity: 1; }
  100% { transform: translate(95vw, 50vh) rotate(0); opacity: 0; }
}

/* ----- 中央内容 ----- */
.entry__content {
  position: relative; z-index: 50;
  text-align: center;
  padding: 56px 36px 48px;            /* 给海报留呼吸空间 */
  max-width: 760px;
  margin: 0 auto;
  border-radius: 22px;
  /* 海报作为卡片背景 + 暗色压底,顶部通透、底部压暗以保证文字可读 */
  background-image:
    linear-gradient(180deg, rgba(13, 31, 26, .15) 0%, rgba(13, 31, 26, .78) 100%),
    url("/static/images/Background.png");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 248, 232, .12);
  isolation: isolate;                 /* 让卡片内的层叠独立,不影响外部 */
}
.entry__kicker {
  font-family: var(--f-display);
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(255, 250, 235, .85);    /* 海报上方较亮,改浅色 */
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  font-size: 12px; margin: 0 0 24px;
  opacity: 0; animation: fadeUp 1.2s .3s var(--ease) forwards;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.entry__kicker em { color: var(--c-rose); font-style: normal; }

.entry__title {
  font-family: var(--f-zh-disp);
  font-size: clamp(56px, 11vw, 120px);
  font-weight: 400; margin: 0; line-height: 1;
  color: #fff8e8;
  letter-spacing: .22em;
  white-space: nowrap;
  word-break: keep-all;
  text-shadow:
    0 2px 0 rgba(168, 64, 86, .4),
    0 4px 20px rgba(74, 53, 32, .5),
    0 0 40px rgba(255, 200, 120, .4);
  position: relative;
  animation: titleGlow 4s ease-in-out infinite;
}
.entry__title .ch {
  display: inline-block;
  opacity: 0;
  animation: chRise 1.2s var(--ease) forwards;
  animation-delay: calc(.55s + var(--i) * .15s);
}
.entry__title-accent {
  position: absolute;
  font-size: .35em;
  color: var(--c-rose);
  top: -.2em; right: -.8em;
  display: inline-block;
  font-style: normal;
  opacity: 0;
  animation: chRise 1.2s var(--ease) 1.4s forwards, accentSpin 12s linear 1.4s infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 2px 0 rgba(168, 64, 86, .4), 0 4px 20px rgba(74, 53, 32, .5), 0 0 40px rgba(255, 200, 120, .4); }
  50%      { text-shadow: 0 2px 0 rgba(168, 64, 86, .4), 0 4px 20px rgba(74, 53, 32, .5), 0 0 60px rgba(255, 200, 120, .7); }
}
@keyframes chRise {
  from { opacity: 0; transform: translateY(40px) rotate(-8deg); }
  to   { opacity: 1; transform: translateY(0)     rotate(0);    }
}
@keyframes accentSpin {
  from { transform: rotate(0);   }
  to   { transform: rotate(360deg); }
}

.entry__subtitle {
  font-family: var(--f-display);
  letter-spacing: .35em;
  color: var(--c-gold-soft);           /* 比 --c-gold 略亮,在海报上更清晰 */
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  font-size: 15px; margin: 20px 0 12px;
  opacity: 0; animation: fadeUp 1.2s 1.1s var(--ease) forwards;
}
.entry__quote {
  font-family: var(--f-zh-calli);
  color: rgba(255, 250, 235, .9);
  font-size: 16px;
  letter-spacing: .04em;
  margin: 0 0 40px;
  font-style: italic;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0; animation: fadeUp 1.3s 1.3s var(--ease) forwards;
}
.entry__quote-zh {
  display: block;
  margin-top: 12px;
  font-family: var(--f-zh-calli);
  font-size: 20px;
  color: var(--c-gold-soft);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  font-style: normal;
  letter-spacing: .04em;
}
.entry__hint {
  font-family: var(--f-zh-ui);
  font-size: 12px; color: rgba(255, 250, 235, .55);
  margin: 16px 0 0;
  letter-spacing: .15em;
  opacity: 0; animation: fadeUp 1.2s 1.5s var(--ease) forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ----- Slider(改成"升起幕布") ----- */
.entry__slider {
  width: min(480px, 90vw);
  height: 60px; margin: 0 auto;
  background: rgba(255, 245, 220, .15);
  border: 1.5px solid rgba(255, 245, 220, .35);
  border-radius: 999px;
  position: relative; overflow: hidden;
  cursor: grab;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; animation: fadeUp 1.2s 1.1s var(--ease) forwards;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 100;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.2),
    0 4px 20px rgba(74, 53, 32, .3);
}
.entry__slider.is-dragging { cursor: grabbing; }
.entry__slider.is-done {
  background: rgba(212, 102, 122, .35);
  border-color: var(--c-rose);
}
.entry__slider-track {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.entry__slider-text {
  font-family: var(--f-zh-ui);
  font-size: 13px; color: var(--c-cream);
  letter-spacing: .12em; opacity: .85;
  pointer-events: none;
}
.entry__slider-handle {
  position: absolute; left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--c-rose) 0%, var(--c-rose-deep) 100%);
  color: var(--c-cream);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(168, 64, 86, .4);
  transition: transform .12s linear;
  pointer-events: auto;
  cursor: grab;
  z-index: 2;
}

/* ====================================================================
   幕布(戏剧感)
   ==================================================================== */

.curtain {
  position: fixed; z-index: 200;
  pointer-events: none;
  transition: transform 1.6s cubic-bezier(.77,0,.18,1), opacity 1.2s ease;
}
.curtain *, .curtain__valance, .curtain__rope { pointer-events: none !important; }

/* 顶部幕布 + 帷幕 + 拉绳 */
.curtain--top {
  top: 0; left: 0; right: 0;
  height: 140px;
  background:
    linear-gradient(180deg,
      #6a1a2a 0%,
      #8a2236 30%,
      #a02940 60%,
      #5a1520 100%);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.curtain__valance {
  position: absolute; bottom: -20px; left: 0; right: 0; height: 30px;
  background:
    radial-gradient(circle at 20px 0,  #5a1520 0, #5a1520 18px, transparent 19px),
    radial-gradient(circle at 60px 0,  #5a1520 0, #5a1520 18px, transparent 19px),
    radial-gradient(circle at 100px 0, #5a1520 0, #5a1520 18px, transparent 19px),
    radial-gradient(circle at 140px 0, #5a1520 0, #5a1520 18px, transparent 19px);
  background-size: 40px 20px;
  background-repeat: repeat-x;
}
.curtain__rope {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-soft) 50%, var(--c-gold) 100%);
  box-shadow: 0 0 6px rgba(200, 155, 60, .6);
}
.curtain__rope--left  { left: 12%; }
.curtain__rope--right { right: 12%; }

/* 左右幕布 */
.curtain--side {
  top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(90deg,
    #6a1a2a 0%, #8a2236 50%, #5a1520 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.curtain--side--left  { left: 0;  }
.curtain--side--right { right: 0; transform: scaleX(-1); }

/* 幕布升起 */
.curtain--top.is-raised       { transform: translateY(-100%); }
.curtain--side--left.is-raised  { transform: translateX(-100%) scaleX(1); }
.curtain--side--right.is-raised { transform: translateX(100%)  scaleX(-1); }


/* ====================================================================
   第二部分 · 剧情剪影画廊 (entry__gallery)
   古卷羊皮纸质感,衬 19 世纪 Howard 版插图
   ==================================================================== */
.entry__gallery {
  position: relative;
  padding: 110px 24px 90px;
  /* 做旧羊皮纸纹理 + 暖色叠加 — 让 19 世纪 Howard 版插图更贴合古卷氛围 */
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 102, 122, .08), transparent 70%),
    linear-gradient(180deg, rgba(245,233,205,.55) 0%, rgba(236,223,190,.6) 60%, rgba(226,211,172,.7) 100%),
    url("/static/images/bg-parchment.webp") center/600px repeat;
  color: var(--c-forest-deep);
}
.entry__gallery::before,
.entry__gallery::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 36px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(80, 30, 40, .18), transparent 70%);
  pointer-events: none;
}
.entry__gallery::before { top: 0; }
.entry__gallery::after  { bottom: 0; transform: scaleY(-1); }

.entry__gallery-head {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.entry__gallery-eyebrow {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  margin: 0 0 10px;
}
.entry__gallery-title {
  font-family: var(--f-zh-disp);
  font-size: clamp(28px, 5vw, 44px);
  color: var(--c-forest-deep);
  letter-spacing: .1em;
  margin: 0 0 12px;
  font-weight: 400;
}
.entry__gallery-title em {
  display: block;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: .35em;
  font-style: normal;
  color: var(--c-rose-deep);
  opacity: .7;
  margin-top: 8px;
}
.entry__gallery-prelude {
  font-family: var(--f-zh);
  font-size: 14px;
  color: var(--c-rose-deep);
  opacity: .85;
  margin: 0 0 22px;
  letter-spacing: .08em;
}
.entry__gallery-divider {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 1em;
  padding-left: 1em;
  color: var(--c-rose-deep);
  opacity: .55;
}

.entry__illustrations {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* 强制 1200px 居中:之前 max-width 在小屏上会被 `calc(100% - xx)` 顶到边,
     这里用 `width: min(1200px, calc(100% - 48px))` 锁死 1200,
     小于 1248 时自然收缩且始终两侧有 24px 留白 */
  width: min(1200px, calc(100% - 48px));
  display: grid;
  /* 单列:让 ILLUSTRATIONS 列表顺序 = 视觉顺序,按剧情时间线竖向流 */
  grid-template-columns: minmax(0, 1fr);
  gap: 60px 0;
  position: relative;
  box-sizing: border-box;
}
/* 显式左右 auto 兜底,防止被其他规则覆盖 */
.entry__illustrations {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  text-align: start;
}
/* 单卡 min-width:0 防止长标题撑破等宽列(中文长句尤其) */
.entry__illustrations > .illust { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* 单张插图卡 */
.illust {
  position: relative;
  display: flex;
  flex-direction: column;
}
.illust__frame {
  position: relative;
  background: #fbf3df;
  padding: 14px 14px 12px;
  border: 1px solid rgba(80, 30, 40, .22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 12px 30px rgba(80, 30, 40, .18),
    0 2px 6px  rgba(80, 30, 40, .12);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.illust__frame::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(168, 70, 90, .35);
  pointer-events: none;
}
.illust__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.4px solid var(--c-rose-deep);
  pointer-events: none;
}
.illust__corner--tl { top: -2px;    left: -2px;    border-right: 0; border-bottom: 0; }
.illust__corner--tr { top: -2px;    right: -2px;   border-left:  0; border-bottom: 0; }
.illust__corner--bl { bottom: -2px; left: -2px;    border-right: 0; border-top:    0; }
.illust__corner--br { bottom: -2px; right: -2px;   border-left:  0; border-top:    0; }

.illust__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(.15) contrast(1.02);
  background: #f0e3c4;
}
.illust__num {
  position: absolute;
  top: -14px; left: -14px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-cream);
  background: linear-gradient(135deg, var(--c-rose) 0%, var(--c-rose-deep) 100%);
  border: 2px solid #fbf3df;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(168, 64, 86, .35);
  z-index: 2;
  letter-spacing: 0;
}
.illust__seal {
  position: absolute;
  bottom: -8px; right: -8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--c-rose-deep);
  background: #fbf3df;
  border: 1.5px solid var(--c-rose-deep);
  border-radius: 50%;
  z-index: 2;
  opacity: .9;
}

.illust__caption {
  padding: 22px 6px 4px;
  text-align: left;
}
.illust__act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .15em;
}
.illust__act-zh {
  font-family: var(--f-zh-ui);
  color: var(--c-rose-deep);
  font-weight: 600;
  letter-spacing: .05em;
}
.illust__act-en {
  font-family: var(--f-display);
  color: var(--c-rose-deep);
  opacity: .55;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .2em;
}
.illust__title {
  margin: 0 0 8px;
  line-height: 1.25;
}
.illust__title .zh {
  display: inline;
  font-family: var(--f-zh-disp);
  font-size: 24px;
  color: var(--c-forest-deep);
  letter-spacing: .08em;
  margin-right: 8px;
}
.illust__title .en {
  display: inline;
  font-family: var(--f-display);
  font-size: 13px;
  color: var(--c-rose-deep);
  opacity: .75;
  font-style: italic;
  letter-spacing: .1em;
}
.illust__desc {
  font-family: var(--f-zh);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-forest-deep);
  opacity: .85;
  margin: 0;
}

.illust:hover .illust__frame {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 18px 40px rgba(80, 30, 40, .24),
    0 4px 10px rgba(80, 30, 40, .14);
}

/* 卡片之间的装饰分隔 */
.illust__divider {
  grid-column: 1 / -1;
  list-style: none;
  text-align: center;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 1em;
  padding-left: 1em;
  color: var(--c-rose-deep);
  opacity: .5;
  user-select: none;
}

/* 入场期间锁定 body 滚动(entry 自己有内部滚动条) */
body.is-entry-shown { overflow: hidden; }

@media (max-width: 880px) {
  .illust__title .zh   { font-size: 22px; }
  .illust__num         { width: 34px; height: 34px; font-size: 14px; top: -12px; left: -12px; }
  .illust__seal        { width: 28px; height: 28px; font-size: 16px; }
  .entry__gallery      { padding: 80px 16px 70px; }
}

/* ====================================================================
   滚动进度条
   ==================================================================== */

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  /* 必须高于 .entry (1000) — 入场页用 .entry 内部滚动时进度条仍可见 */
  z-index: 1100;
  pointer-events: none;
}
.progress__bar {
  display: block; height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-rose) 0%, var(--c-gold) 100%);
  box-shadow: 0 0 8px rgba(212, 102, 122, .5);
  transition: width .1s linear;
}

/* ====================================================================
   持续森林背景 (Fixed, 多层视差)
   ==================================================================== */

.forest-bg {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
    #faf6ed 0%,
    #f0ddae 25%,
    #d9b765 50%,
    #a87a4a 75%,
    #3a4a2e 100%);
  transition: background 1.2s ease;
}
.forest-bg.is-dark {
  background: linear-gradient(180deg,
    #1a2e1a 0%, #0d1f1a 50%, #061208 100%);
}

.forest-bg__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,250,235,.9), transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 10%, rgba(255,240,200,.4), transparent 60%);
}
.forest-bg__sun {
  position: absolute; top: 5%; right: 15%;
  width: 320px; height: 320px;       /* 加大尺寸 */
  border-radius: 50%;
  /* 去 filter: blur(10px),把虚化直接画进渐变 */
  background: radial-gradient(circle at 50% 50%,
    #fff8e0 0%,
    #f3b864 35%,
    rgba(243,184,100,.55) 65%,
    rgba(243,184,100,.18) 85%,
    transparent 100%);
  opacity: .55;
  animation: sunGlow 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.forest-bg__rays {
  position: absolute; top: -10%; right: -5%;
  width: 80%; height: 80%;
  background:
    conic-gradient(from 180deg at 70% 20%,
      transparent 0deg, rgba(255,240,200,.15) 6deg, transparent 12deg,
      transparent 30deg, rgba(255,240,200,.12) 36deg, transparent 42deg,
      transparent 60deg, rgba(255,240,200,.15) 66deg, transparent 72deg,
      transparent 100deg, rgba(255,240,200,.10) 106deg, transparent 112deg,
      transparent 150deg, rgba(255,240,200,.13) 156deg, transparent 162deg,
      transparent 210deg, rgba(255,240,200,.10) 216deg, transparent 222deg,
      transparent 270deg, rgba(255,240,200,.12) 276deg, transparent 282deg,
      transparent 320deg, rgba(255,240,200,.10) 326deg, transparent 332deg);
  mix-blend-mode: screen;
  opacity: .5;
  /* 旋转动画已停: 80s 周期里每帧都要重绘 conic-gradient,桌面端开销大;
     静态的射线 + 太阳的 sunGlow 已经够生动 */
  /* animation: raysRotate 80s linear infinite; */
}
@keyframes raysRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

.forest-bg__mist {
  position: absolute; left: -10%; right: -10%;
  pointer-events: none;
  will-change: transform;
  /* 原来用 filter: blur(30px),按像素计费,改成多重渐变模拟虚化 */
}
.forest-bg__mist--far  {
  top: 30%; height: 50%;
  background:
    radial-gradient(ellipse 90% 110% at 30% 50%, rgba(255,250,235,.35), transparent 75%),
    radial-gradient(ellipse 60%  80% at 70% 60%, rgba(255,250,235,.18), transparent 75%);
  animation: mistDrift 30s ease-in-out infinite;
}
.forest-bg__mist--near {
  top: 55%; height: 45%;
  background:
    radial-gradient(ellipse 80% 100% at 60% 50%, rgba(245,236,217,.42), transparent 75%),
    radial-gradient(ellipse 50%  70% at 20% 70%, rgba(245,236,217,.22), transparent 75%);
  animation: mistDrift 24s ease-in-out infinite reverse;
  transform: translate3d(0, calc(var(--scrollY) * 0.05), 0);
}
@keyframes mistDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(60px); }
}

.forest-bg__trees {
  position: absolute; left: 0; right: 0;
  background-repeat: repeat-x;
  background-size: 800px 100%;
  pointer-events: none;
  will-change: transform;
  /* 视差由 --scrollY 驱动,GPU 合成 */
  transform: translate3d(0, var(--parallaxY, 0), 0);
}
.forest-bg__trees--far  { bottom: 0; height: 28%; --parallaxY: calc(var(--scrollY) * 0.08);  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200 L0 130 L25 95 L40 130 L60 75 L80 120 L100 95 L125 130 L150 100 L180 135 L210 105 L240 140 L275 110 L310 145 L345 115 L380 145 L415 110 L450 145 L485 115 L520 145 L555 120 L590 150 L625 125 L660 150 L695 130 L730 155 L765 135 L800 155 L800 200 Z' fill='%235a4a2e'/></svg>"); opacity: .35; }
.forest-bg__trees--mid  { bottom: 0; height: 38%; --parallaxY: calc(var(--scrollY) * 0.16);  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' preserveAspectRatio='none'><path d='M0 240 L0 160 L30 110 L45 145 L70 100 L95 140 L120 115 L150 150 L185 120 L220 155 L260 125 L300 160 L340 130 L380 165 L425 135 L470 170 L515 140 L560 175 L605 145 L650 180 L700 150 L745 180 L790 155 L800 175 L800 240 Z' fill='%232d3a22'/></svg>"); opacity: .55; }
.forest-bg__trees--near { bottom: 0; height: 22%; --parallaxY: calc(var(--scrollY) * 0.28);  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200 L0 160 Q40 110 100 135 Q160 95 230 130 Q300 100 380 135 Q460 105 540 140 Q620 110 700 145 Q770 120 800 150 L800 200 Z' fill='%230f1a0a'/></svg>"); opacity: .85; }

.forest-bg__grass {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #2d4a2a 100%);
  opacity: .25;
  pointer-events: none;
}
.forest-bg__dust {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,240,200,.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 60%, rgba(255,240,200,.4), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(255,240,200,.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,240,200,.5), transparent),
    radial-gradient(1.5px 1.5px at 10% 70%, rgba(255,240,200,.4), transparent);
  background-size: 300px 300px;
  /* 关闭 dustFloat —— 整个 1920×1080 视口里约 28 个 tile 持续重绘,
     视觉上几乎不可见,得不偿失 */
  /* animation: dustFloat 30s linear infinite; */
}
@keyframes dustFloat {
  from { background-position: 0 0;    }
  to   { background-position: 300px -300px; }
}

.forest-bg__leaves, .forest-bg__birds {
  position: absolute; inset: 0; pointer-events: none;
}
.bg-leaf {
  position: absolute;
  width: 12px; height: 12px;
  background: radial-gradient(ellipse at 30% 30%, var(--c-leaf) 0%, var(--c-forest) 80%);
  clip-path: polygon(50% 0, 80% 30%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 20% 30%);
  opacity: 0;
  animation: leafFall 20s linear infinite;
}
@keyframes leafFall {
  0%   { transform: translateY(-10vh) rotate(0);   opacity: 0; }
  10%  { opacity: .6; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

.bg-bird {
  position: absolute;
  width: 16px; height: 8px;
  opacity: 0;
  animation: birdFly 30s linear infinite;
}
.bg-bird::before, .bg-bird::after {
  content: "";
  position: absolute; top: 0;
  width: 8px; height: 8px;
  border: 1.5px solid #2a1f15;
  border-color: #2a1f15 transparent transparent transparent;
  border-radius: 50%;
}
.bg-bird::before { left: 0;  transform: rotate(-15deg); }
.bg-bird::after  { right: 0; transform: rotate(15deg);  }
@keyframes birdFly {
  0%   { transform: translate(0, 0)     scale(.5); opacity: 0; }
  5%   { opacity: .7; }
  50%  { transform: translate(50vw, 20px)  scale(.5); }
  95%  { opacity: .7; }
  100% { transform: translate(110vw, -10px) scale(.5); opacity: 0; }
}

/* ====================================================================
   场幕分隔 (Act Divider)
   ==================================================================== */

.act-divider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 24px;
  display: flex; align-items: center; gap: 32px;
  z-index: 2;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  overflow: hidden;
}
/* 场幕分隔下"剧院座椅"暗喻:让分隔不只是一行字,而是'从舞台退一步'的感觉 */
.act-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 95%);
  height: 220%;
  background: url("/static/images/bg-seats.webp") center bottom/cover no-repeat;
  opacity: .08;
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
.act-divider > * { position: relative; z-index: 1; }
.act-divider.is-visible { opacity: 1; transform: translateY(0); }

.act-divider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
  position: relative;
}
.act-divider__line::before, .act-divider__line::after {
  content: "❀";
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--c-rose);
  font-size: 12px;
}
.act-divider__line::before { left: -8px;  }
.act-divider__line::after  { right: -8px; }

.act-divider__inner {
  text-align: center;
  max-width: 480px;
  flex-shrink: 0;
}
.act-divider__num {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  margin-bottom: 16px;
  padding: 4px 16px;
  border: 1px solid var(--c-rose);
  border-radius: 999px;
}
.act-divider__quote {
  font-family: var(--f-zh-calli);
  font-size: 20px;
  line-height: 1.8;
  color: var(--c-forest-deep);
  margin: 0 0 14px;
  font-style: italic;
}
.act-divider__by {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--c-bark);
  font-style: italic;
}

/* 深色版本(演员区前的分隔) — 关键:不能让这块在页面上像一条硬切的"黑带"
   设计思路:上端用羊皮纸纹理 + 暖色渐变与 story 区的米黄无缝衔接;
            中段柔和过渡到深绿;
            下端与 cast 区的森林夜色融合;
            中央一束"舞台光"恰好对应"All the world's a stage" */
.act-divider--dark {
  position: relative;
  /* 四段渐变:暖米黄 → 暖绿 → 冷绿 → 透明,不再有"硬黑带"的突兀感 */
  background:
    linear-gradient(180deg,
      rgba(245, 233, 205, .55)  0%,
      rgba(220, 200, 160, .25)  18%,
      rgba(58,  74,  46,  .78) 55%,
      rgba(13,  31,  26,  .85) 100%);
  overflow: hidden;
}
/* 顶部"羊皮纸延伸",让 story 区的纹理自然延伸进来再淡出 */
.act-divider--dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background:
    linear-gradient(180deg, rgba(245,233,205,.5) 0%, transparent 100%),
    url("/static/images/bg-parchment.webp") center/700px repeat;
  pointer-events: none;
  opacity: .35;
}
/* 中央"舞台聚光" — 用树荫光斑做垂直投光,
   mix-blend-mode: screen 让亮区从暗背景里浮出,
   完美呼应"All the world's a stage" */
.act-divider--dark::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 70vw);
  height: 140%;
  background: url("/static/images/bg-dappled.webp") center/cover no-repeat;
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
}
.act-divider--dark > * { position: relative; z-index: 1; }
.act-divider--dark .act-divider__line  { background: linear-gradient(90deg, transparent, var(--c-gold-soft), transparent); }
.act-divider--dark .act-divider__line::before,
.act-divider--dark .act-divider__line::after { color: var(--c-gold-soft); }
.act-divider--dark .act-divider__num   { color: var(--c-gold-soft); border-color: var(--c-gold-soft); }
.act-divider--dark .act-divider__quote { color: var(--c-cream); }
.act-divider--dark .act-divider__quote-zh { color: var(--c-gold-soft); }
.act-divider--dark .act-divider__by    { color: var(--c-gold-soft); }

/* 中文增补译文(用于分隔里的中英对照) */
.act-divider__quote-zh {
  font-family: var(--f-zh-calli);
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-rose-deep);
  margin: -6px 0 14px;
  font-style: normal;
  letter-spacing: .02em;
}

/* ====================================================================
   主舞台
   ==================================================================== */

.stage {
  position: relative;
  min-height: 100vh;
  opacity: 0; pointer-events: none;
  transition: opacity .9s var(--ease);
}
.stage.is-active { opacity: 1; pointer-events: auto; }

/* ----- 顶部导航 ----- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
  /* 去 backdrop-filter blur —— 按像素计费,桌面端掉帧元凶之一 */
  background: linear-gradient(180deg, rgba(250,246,237,.95) 0%, rgba(250,246,237,.78) 60%, rgba(250,246,237,0) 100%);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled {
  background: rgba(250, 246, 237, .96);
  box-shadow: 0 2px 20px rgba(74, 53, 32, .08);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-zh-disp); }
.nav__brand-mark { color: var(--c-rose); font-size: 22px; }
.nav__brand-text { font-size: 18px; color: var(--c-forest-deep); letter-spacing: .12em; white-space: nowrap; }
.nav__brand-text em { font-family: var(--f-display); font-size: 12px; color: var(--c-moss); margin-left: 6px; letter-spacing: .15em; }
.nav__links { display: flex; gap: 32px; }
.nav__links a {
  font-family: var(--f-zh-ui); font-size: 14px;
  color: var(--c-bark); letter-spacing: .15em;
  position: relative; padding: 4px 0;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 1px; background: var(--c-rose);
  transition: width .3s var(--ease), left .3s var(--ease);
}
.nav__links a:hover { color: var(--c-rose-deep); }
.nav__links a:hover::after { width: 100%; left: 0; }

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 120px 24px 80px;
  overflow: hidden;
  text-align: center;
  /* 阿登森林实景照(已 WebP 优化, 5128KB→510KB):垂直暗化压底保文字可读,中部稍透让林间透出 */
  background:
    linear-gradient(180deg,
      rgba(10, 24, 14, .35) 0%,
      rgba(10, 24, 14, .20) 35%,
      rgba(10, 24, 14, .40) 65%,
      rgba(10, 24, 14, .65) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(10, 24, 14, .25), transparent 75%),
    url("/static/images/forest-1600.webp") center/cover no-repeat;
  background-color: #1a2e1a;
}
.hero__ground {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%;
  /* 木质舞台地板:深色压底,让底部像舞台前缘 */
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(94, 125, 74, .12) 40%,
      rgba(46, 90, 61, .55) 100%),
    url("/static/images/bg-stage-wood.webp") bottom center/cover no-repeat;
  pointer-events: none;
}
.hero__ferns {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 100px; pointer-events: none;
  opacity: .6;
}
.hero__ferns svg { width: 100%; height: 100%; display: block; }
.hero__butterfly {
  position: absolute;
  font-size: 28px;
  pointer-events: none;
  animation: butterflyDance 14s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.hero__butterfly--1 { top: 30%; left: -5%; animation-delay: 2s;  }
.hero__butterfly--2 { top: 50%; left: -5%; animation-delay: 7s;  animation-duration: 18s; }
@keyframes butterflyDance {
  0%   { transform: translate(0, 0) rotate(0);     opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(50vw, -40px) rotate(15deg); }
  90%  { opacity: 1; }
  100% { transform: translate(105vw, 20px) rotate(0); opacity: 0; }
}

.hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,235,180,.7), transparent 60%),
    radial-gradient(ellipse 40% 30% at 30% 20%, rgba(255,255,255,.5), transparent 60%);
  pointer-events: none;
}
.hero__sun {
  position: absolute; top: 14%; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff5d6 0%, #f3dfa3 50%, #d9b765 100%);
  filter: blur(8px);
  opacity: .55;
  pointer-events: none;
  animation: sunGlow 8s ease-in-out infinite;
}
@keyframes sunGlow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1);    }
  50%      { opacity: .8;  transform: translateX(-50%) scale(1.05); }
}
.hero__canopy { display: none; }  /* 现在用 .forest-bg 替代 */
.hero__leaves { position: absolute; inset: 0; pointer-events: none; }
.hero__leaves span {
  position: absolute;
  width: 14px; height: 14px;
  background: radial-gradient(ellipse at 30% 30%, var(--c-leaf) 0%, var(--c-forest) 80%);
  clip-path: polygon(50% 0, 80% 30%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 20% 30%);
  opacity: 0;
  animation: leafFall 14s linear infinite;
}
.hero__leaves span:nth-child(1) { left: 8%;  animation-delay: 0s;  animation-duration: 12s; }
.hero__leaves span:nth-child(2) { left: 18%; animation-delay: 3s;  animation-duration: 16s; }
.hero__leaves span:nth-child(3) { left: 28%; animation-delay: 1s;  animation-duration: 14s; }
.hero__leaves span:nth-child(4) { left: 38%; animation-delay: 5s;  animation-duration: 13s; }
.hero__leaves span:nth-child(5) { left: 52%; animation-delay: 2s;  animation-duration: 15s; }
.hero__leaves span:nth-child(6) { left: 64%; animation-delay: 4s;  animation-duration: 14s; }
.hero__leaves span:nth-child(7) { left: 76%; animation-delay: 6s;  animation-duration: 16s; }
.hero__leaves span:nth-child(8) { left: 88%; animation-delay: 1.5s;animation-duration: 12s; }
@keyframes leafFall {
  0%   { transform: translateY(-10vh) rotate(0);   opacity: 0; }
  10%  { opacity: .85; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

.hero__inner {
  position: relative; z-index: 5;
  max-width: 880px;
  color: var(--c-forest-deep);
  /* hero 视差由 --scrollY 驱动: 滚动 < 一屏时上移 + 渐隐 */
  --heroShift: min(var(--scrollY), 100vh);
  transform: translate3d(0, calc(var(--heroShift) * 0.25), 0);
  opacity: calc(1 - var(--heroShift) / (100vh * 0.8));
  will-change: transform, opacity;
}
.hero__kicker {
  font-family: var(--f-display);
  letter-spacing: .35em; text-transform: uppercase;
  font-size: 13px; color: var(--c-gold-soft);
  margin: 0 0 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.hero__title {
  font-weight: 400; margin: 0; line-height: 1.05;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .55), 0 1px 0 rgba(245, 236, 217, .15);
}
.hero__title .zh { display: block; font-family: var(--f-zh-disp); font-size: clamp(48px, 11vw, 120px); letter-spacing: .2em; white-space: nowrap; word-break: keep-all; color: var(--c-cream); }
.hero__title .en { display: block; font-family: var(--f-display); font-size: clamp(20px, 3vw, 36px); color: var(--c-rose-soft); letter-spacing: .4em; margin-top: 18px; font-style: italic; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.hero__sub {
  font-family: var(--f-zh-ui);
  font-size: 14px; letter-spacing: .2em;
  color: var(--c-cream); opacity: .85;
  margin: 28px 0 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.hero__quote {
  font-family: var(--f-zh-calli);
  font-size: 22px; line-height: 1.7;
  color: var(--c-cream);
  margin: 0 auto 48px; max-width: 640px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.hero__quote span {
  display: block; margin-top: 10px;
  font-family: var(--f-display); font-size: 12px;
  letter-spacing: .25em; color: var(--c-gold-soft); font-style: italic;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.hero__cta {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid var(--c-cream);
  color: var(--c-cream);
  font-family: var(--f-zh-ui);
  font-size: 14px; letter-spacing: .25em;
  border-radius: 999px;
  transition: all .3s var(--ease);
  background: rgba(0, 0, 0, .25);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.hero__cta:hover {
  background: var(--c-cream); color: var(--c-forest-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1.5px solid var(--c-forest-deep);
  border-radius: 12px;
  z-index: 5;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 6px;
  transform: translateX(-50%);
  width: 3px; height: 8px;
  background: var(--c-forest-deep); border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ====================================================================
   Section 通用
   ==================================================================== */

.section {
  position: relative;
  padding: 120px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.section__head { text-align: center; margin-bottom: 72px; }
.section__eyebrow {
  font-family: var(--f-display);
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--c-rose-deep);
  font-size: 12px; margin: 0 0 14px;
}
.section__title {
  font-family: var(--f-zh-disp);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400; color: var(--c-forest-deep);
  margin: 0; line-height: 1.2; letter-spacing: .15em;
}
.section__title em {
  display: block;
  font-family: var(--f-display);
  font-size: 14px; color: var(--c-bark);
  letter-spacing: .35em; margin-top: 12px;
  font-style: italic; font-weight: 500;
}

/* ----- Story ----- */
.story {
  position: relative;
  overflow: hidden;
  padding: 140px 24px;
  /* 羊皮纸纹理低透明叠在底色上,让"莎翁手稿"氛围更浓而不抢文字 */
  background:
    linear-gradient(180deg, rgba(245,233,205,.55) 0%, rgba(236,223,190,.7) 100%),
    url("/static/images/bg-parchment.webp") center/700px repeat;
}
.story__light {
  position: absolute; top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 60%;
  background: radial-gradient(ellipse 40% 50% at 50% 30%, rgba(255,240,200,.5), transparent 70%);
  pointer-events: none;
}
.story__vines {
  position: absolute; top: 0; bottom: 0;
  width: 80px; pointer-events: none;
  opacity: .55;
}
.story__vines--left  { left: 0;  }
.story__vines--right { right: 0; }
.story__vines svg { width: 100%; height: 100%; }
.story__prelude {
  font-family: var(--f-zh-calli);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-bark);
  font-style: italic;
  margin: 16px auto 0;
  max-width: 480px;
  opacity: .8;
}

.story__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.story__text {
  font-family: var(--f-zh);
  font-size: 17px; line-height: 2;
  color: var(--c-ink);
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(255, 250, 235, .92),
      rgba(245, 236, 217, .95));
  border: 1px solid rgba(200, 155, 60, .4);
  box-shadow:
    0 12px 40px rgba(74, 53, 32, .15),
    inset 0 0 30px rgba(200, 155, 60, .05);
}
.story__scroll-top, .story__scroll-bottom {
  height: 24px;
  background:
    linear-gradient(180deg, var(--c-gold-soft), transparent),
    linear-gradient(180deg, var(--c-gold-soft), var(--c-gold));
  border-radius: 12px 12px 0 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(74, 53, 32, .2);
}
.story__scroll-bottom {
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(0deg, var(--c-gold-soft), transparent),
    linear-gradient(0deg, var(--c-gold-soft), var(--c-gold));
}
.story__scroll-body {
  padding: 40px 44px;
  position: relative;
}
.story__scroll-body::before {
  content: "“";
  position: absolute; top: -10px; left: 30px;
  font-family: var(--f-zh-disp);
  font-size: 90px; color: var(--c-rose);
  opacity: .3; line-height: 1;
  pointer-events: none;
}
.story__scroll-body p { margin: 0; }

.story__themes { display: grid; gap: 24px; }
.story__theme {
  padding: 28px 32px 28px 60px;
  background: rgba(255, 250, 235, .88);
  border-top: 2px solid var(--c-forest);
  border-radius: 2px;
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  /* 去 backdrop-filter blur —— 三张卡持续在视口里时按像素模糊很贵 */
}
.story__theme:hover {
  transform: translateY(-4px) rotate(-.3deg);
  box-shadow: 0 12px 28px rgba(74, 53, 32, .18);
}
.story__theme-num {
  position: absolute;
  left: 18px; top: 28px;
  font-family: var(--f-zh-disp);
  font-size: 32px; color: var(--c-rose);
  font-weight: 400;
  line-height: 1;
  opacity: .8;
}
.story__theme h3 {
  font-family: var(--f-zh-disp);
  font-size: 22px; color: var(--c-forest-deep);
  margin: 0 0 10px; letter-spacing: .1em;
}
.story__theme p {
  font-family: var(--f-zh-ui);
  font-size: 14px; line-height: 1.8;
  color: var(--c-bark); margin: 0;
}

/* ----- Cast ----- */
.cast {
  color: var(--c-cream);
  max-width: none;
  padding: 140px 24px;
  position: relative;
  overflow: hidden;
  background: rgba(13, 31, 26, .55);
}
/* 顶部中央一束"林间光斑"投射,让演员区不是一潭黑,
   而是"森林夜色里月光透过枝叶"的感觉 */
.cast::after {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 80vw);
  height: 90%;
  background: url("/static/images/bg-dappled.webp") center top/cover no-repeat;
  opacity: .18;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.cast__silhouettes {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 50%;
  pointer-events: none;
  opacity: .75;
}
.cast__silhouettes svg { width: 100%; height: 100%; display: block; }

/* 移动端:把容器高度锁定到 SVG 比例,meet 模式才能正确放下 5 个剪影 */
@media (max-width: 880px) {
  .cast__silhouettes {
    height: auto;
    aspect-ratio: 1600 / 600;
  }
}

.cast::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,240,200,.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 60%, rgba(255,240,200,.4), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(255,240,200,.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,240,200,.4), transparent),
    radial-gradient(1.5px 1.5px at 10% 70%, rgba(255,240,200,.3), transparent);
  background-size: 200px 200px;
  animation: castStars 80s linear infinite;
  pointer-events: none;
}
@keyframes castStars {
  from { background-position: 0 0; }
  to   { background-position: 200px 400px; }
}
.cast .section__title { color: var(--c-cream); }
.cast .section__title em { color: var(--c-gold-soft); }
.cast .section__eyebrow { color: var(--c-gold-soft); }
.cast .story__prelude { color: var(--c-gold-soft); opacity: .8; }

.cast__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cast__card {
  position: relative;
  padding: 36px 28px 32px;
  background:
    linear-gradient(180deg, rgba(245,236,217,.06), rgba(245,236,217,.02));
  border: 1px solid rgba(245,236,217,.18);
  border-radius: 6px;
  transition:
    transform .5s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease),
    box-shadow .5s var(--ease);
  overflow: hidden;
}
.cast__card-frame {
  position: absolute; inset: 6px;
  pointer-events: none;
}
.cast__corner {
  position: absolute;
  width: 20px; height: 20px;
  border: 1.5px solid var(--c-gold-soft);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.cast__corner--tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.cast__corner--tr { top: 0;    right: 0;   border-left:  0; border-bottom: 0; }
.cast__corner--bl { bottom: 0; left: 0;    border-right: 0; border-top:    0; }
.cast__corner--br { bottom: 0; right: 0;   border-left:  0; border-top:    0; }
.cast__card:hover .cast__corner { opacity: .9; }

.cast__card::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
  transition: width .5s var(--ease);
}
.cast__card::after {
  content: "❀";
  position: absolute; top: 12px; right: 12px;
  color: var(--c-rose);
  font-size: 14px;
  opacity: 0;
  transform: rotate(0) scale(0);
  transition: all .5s var(--ease);
}
.cast__card:hover {
  transform: translateY(-8px);
  border-color: var(--c-rose);
  background: rgba(245,236,217,.1);
  box-shadow: 0 16px 40px rgba(168, 64, 86, .25);
}
.cast__card:hover::before { width: 80%; }
.cast__card:hover::after { opacity: .8; transform: rotate(180deg) scale(1); }

.cast__crest {
  color: var(--c-gold);
  text-align: center;
  margin-bottom: 16px;
  opacity: .85;
  transition: transform .6s var(--ease), color .4s var(--ease);
}
.cast__card:hover .cast__crest {
  transform: rotate(360deg) scale(1.15);
  color: var(--c-rose);
}
.cast__role {
  font-family: var(--f-zh-ui);
  font-size: 12px; letter-spacing: .2em;
  color: var(--c-gold-soft);
  text-align: center;
  margin: 0 0 8px;
}
.cast__name { text-align: center; margin: 0 0 16px; line-height: 1.3; }
.cast__name .zh {
  display: block;
  font-family: var(--f-zh-disp);
  font-size: 26px; color: var(--c-cream);
  letter-spacing: .1em;
  transition: color .4s var(--ease);
}
.cast__card:hover .cast__name .zh { color: var(--c-rose-soft); }
.cast__name .en {
  display: block;
  font-family: var(--f-display);
  font-size: 12px; color: var(--c-gold-soft);
  letter-spacing: .3em; margin-top: 4px;
  font-style: italic;
}
.cast__desc {
  font-family: var(--f-zh-ui);
  font-size: 13px; line-height: 1.85;
  color: rgba(245,236,217,.75);
  margin: 0;
  text-align: left;
  padding-top: 14px;
  border-top: 1px dashed rgba(245,236,217,.15);
}

/* === 演员区(actor block,带照片占位) === */
.cast__actors {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(245, 236, 217, .18);
}
.cast__actor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  flex-shrink: 0;
}

.cast__photo {
  position: relative;
  width: 120px;
  height: 150px;
  background:
    linear-gradient(180deg, rgba(245, 236, 217, .04), rgba(245, 236, 217, .015));
  border: 1px dashed rgba(245, 236, 217, .32);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.cast__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cast__photo-icon {
  width: 54px;
  height: 68px;
  color: rgba(245, 236, 217, .35);
  transition: color .4s var(--ease), transform .6s var(--ease);
}
.cast__card:hover .cast__photo {
  border-color: rgba(212, 102, 122, .55);
  background: linear-gradient(180deg, rgba(212, 102, 122, .05), rgba(212, 102, 122, .02));
}
.cast__card:hover .cast__photo-icon {
  color: var(--c-rose);
  transform: scale(1.08);
}

/* 两人合演时照片稍紧凑 */
.cast__actors--2 {
  gap: 14px;
}
.cast__actors--2 .cast__photo {
  width: 90px;
  height: 112px;
}
.cast__actors--2 .cast__photo-icon {
  width: 42px;
  height: 52px;
}

.cast__actor-zh {
  font-family: var(--f-zh);
  font-size: 15px;
  color: var(--c-cream);
  margin: 0;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.3;
  max-width: 120px;
  word-break: keep-all;
}
.cast__actors--2 .cast__actor-zh {
  font-size: 14px;
  max-width: 90px;
}
.cast__actor-en {
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--c-gold-soft);
  letter-spacing: .15em;
  margin: 3px 0 0;
  font-style: italic;
  line-height: 1.2;
}

/* ----- Info ----- */
.info {
  padding: 140px 24px;
  position: relative;
  overflow: hidden;
  /* 绿野草地 + 树荫光斑做暗化压底,呼应"亚登森林"主题且不抢票券卡 */
  background:
    linear-gradient(180deg, rgba(247,238,216,.78) 0%, rgba(232,219,184,.85) 100%),
    url("/static/images/bg-meadow.webp") center/cover no-repeat;
  background-blend-mode: normal, multiply;
}
.info::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 10 C70 30 90 50 50 90 C10 50 30 30 50 10 Z' fill='%23d4667a' opacity='.04'/></svg>");
  background-size: 200px;
  pointer-events: none;
}
.info__roses {
  position: absolute; top: 0; bottom: 0;
  width: 90px; pointer-events: none;
  opacity: .65;
  background: url("/static/images/bg-rose.webp") center/cover no-repeat;
  mix-blend-mode: multiply;
  filter: blur(1.5px) sepia(.15);
  z-index: 0;
}
.info__roses--left  { left: 0;     animation: roseFloat 8s ease-in-out infinite; }
.info__roses--right { right: 0;    animation: roseFloat 8s ease-in-out 4s infinite;
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%); }
/* 信息卡片 + 金句都浮在玫瑰装饰之上 */
.info__card, .quote-block, .info__org { position: relative; z-index: 1; }
@keyframes roseFloat {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-15px) rotate(2deg);  }
}
.info .story__prelude { color: var(--c-rose-deep); opacity: .8; }

.info__card {
  display: grid;
  grid-template-columns: 1fr;            /* 竖排:日期/时间/地点三行 */
  align-items: stretch;
  max-width: 720px;                       /* 收窄,避免横向过长 */
  margin: 0 auto;
  padding: 40px 56px;
  /* 暖金箔纹理做票券表面(替换原奶白渐变),更显"老戏票"的金属质感 */
  background:
    linear-gradient(180deg, rgba(255,250,235,.55) 0%, rgba(245,220,180,.65) 100%),
    url("/static/images/bg-gold-foil.webp") center/cover no-repeat;
  border: 1px solid var(--c-gold);
  border-radius: 8px;
  box-shadow:
    0 0 0 8px var(--c-parchment),
    0 0 0 9px var(--c-gold-soft),
    0 30px 60px -20px rgba(74, 53, 32, .25);
  position: relative;
  overflow: hidden;
}
.info__card::before, .info__card::after {
  content: "❦";
  position: absolute; top: 18px;
  color: var(--c-rose);
  font-size: 20px;
  animation: roseGlow 3s ease-in-out infinite;
}
.info__card::before { left: 22px;  animation-delay: 0s; }
.info__card::after  { right: 22px; animation-delay: 1.5s; }
@keyframes roseGlow {
  0%, 100% { opacity: .4; transform: scale(1);   }
  50%      { opacity: 1;  transform: scale(1.1); }
}
/* 票券上的光泽 */
.info__card .shimmer {
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .35), transparent);
  animation: shimmerMove 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerMove {
  0%   { left: -100%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}

.info__panel { text-align: center; padding: 12px 8px; position: relative; z-index: 1; }
.info__label {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .3em;
  color: var(--c-bark);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.info__value {
  font-family: var(--f-zh-disp);
  font-size: 22px; color: var(--c-forest-deep);
  margin: 0; line-height: 1.55; letter-spacing: .06em;
  /* 竖排后允许多行;nowrap 已去掉,日期/时间多行展示 */
}
.info__value .zh { display: block; }
.info__value .en { display: block; font-family: var(--f-display); font-size: 13px; color: var(--c-rose-deep); letter-spacing: .14em; margin-top: 8px; line-height: 1.5; }
.info__value > .zh + .en { margin-top: 8px; }
.info__divider {
  width: 70%; height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
}
.info__org {
  text-align: center;
  font-family: var(--f-zh-ui);
  font-size: 14px; line-height: 1.9;
  color: var(--c-bark);
  margin: 56px 0 0;
  letter-spacing: .08em;
}
.info__org em { font-family: var(--f-display); color: var(--c-rose-deep); font-style: italic; letter-spacing: .12em; }

/* ----- Footer ----- */
.footer {
  text-align: center;
  padding: 60px 24px 50px;
  background:
    linear-gradient(180deg, rgba(13,31,26,.92) 0%, rgba(13,31,26,.96) 100%),
    url("/static/images/bg-oak-tile.webp") center/200px repeat;
  background-blend-mode: normal, soft-light;
  color: var(--c-cream);
  border-top: 1px solid rgba(212, 102, 122, .3);
  position: relative;
}
.footer__mark {
  color: var(--c-rose);
  margin: 0 0 16px;
  display: inline-block;
  line-height: 0;          /* 去掉内联元素空隙,让 SVG 紧贴父容器 */
}
.footer__mark svg { display: block; }
.footer__line {
  font-family: var(--f-zh-disp);
  font-size: 22px; letter-spacing: .2em;
  margin: 0 0 8px; color: var(--c-cream);
  white-space: nowrap;
}
.footer__small {
  font-family: var(--f-zh-ui);
  font-size: 12px; color: rgba(245,236,217,.5);
  letter-spacing: .12em;
  margin: 4px 0;
}

/* ====================================================================
   金句(穿插在 Story / Cast / Info 中间,不再单独占一整块)
   改成"流式嵌入" —— 不画线、不加底色,只让字号/字色变化,
   像段落里的一句旁白,自然融入背景
   ==================================================================== */
.quote-block {
  text-align: left;
  max-width: 640px;
  margin: 22px auto 26px;          /* 上下紧凑,水平居中,不再左偏 */
  padding: 0;
  position: relative;
  border: none !important;          /* 完全去掉左竖线 */
  background: transparent !important;
  opacity: 1;
}
.quote-block::before, .quote-block::after { content: none; }
.quote-block__en {
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-forest-deep);
  margin: 0 0 4px;
  font-style: italic;
  letter-spacing: .02em;
  opacity: .55;                     /* 降低对比,让英文更像旁注 */
  text-align: center;
}
.quote-block__zh {
  font-family: var(--f-zh-calli);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-rose-deep);
  margin: 0 0 6px;
  font-style: normal;
  letter-spacing: .06em;
  text-align: center;
  opacity: .85;                     /* 微微降低饱和,自然融合 */
}
.quote-block__cite {
  display: block;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--c-bark);
  font-style: italic;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .55;
  text-align: center;
}

/* 深色背景变体(用在 Cast 段落) —— 仍保持低对比的"旁注感" */
.quote-block--dark { border: none !important; }
.quote-block--dark .quote-block__en    { color: var(--c-cream);      opacity: .55; }
.quote-block--dark .quote-block__zh    { color: var(--c-gold-soft);  opacity: .75; }
.quote-block--dark .quote-block__cite  { color: var(--c-gold-soft);  opacity: .65; }

/* ----- Footer 引言 ----- */
.footer__quote {
  text-align: center;
  max-width: 580px;
  margin: 12px auto 24px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(245, 236, 217, .18);
  border-bottom: 1px solid rgba(245, 236, 217, .12);
}
.footer__quote-en {
  font-family: var(--f-display);
  font-size: 14px;
  font-style: italic;
  color: rgba(245, 236, 217, .8);
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.footer__quote-zh {
  font-family: var(--f-zh-calli);
  font-size: 18px;
  color: var(--c-gold-soft);
  margin: 0 0 10px;
  letter-spacing: .08em;
}
.footer__quote-cite {
  display: block;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(245, 236, 217, .45);
  font-style: italic;
  text-transform: uppercase;
}

/* ====================================================================
   滚动入场动画 (Reveal on scroll)
   ==================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================================================
   响应式
   ==================================================================== */

@media (max-width: 880px) {
  .nav { padding: 14px 18px; }
  .nav__brand-text { font-size: 16px; }
  .nav__brand-text em { display: none; }
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 13px; letter-spacing: .1em; }

  .section { padding: 80px 20px; }
  .section__head { margin-bottom: 48px; }

  .story__grid { grid-template-columns: 1fr; gap: 36px; }
  .story__text { padding: 28px 24px; font-size: 15px; }

  .info__card {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 24px;
  }
  .info__divider { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--c-rose), transparent); }
  .info__value { font-size: 20px; }

  .cast__grid { grid-template-columns: 1fr 1fr; }

  /* 手机端:左右幕布更窄,避免遮挡内容 */
  .curtain--top { height: 80px; }
  .curtain--side { width: 20px; }
  .curtain--side--left  { transform: translateX(0)    scaleX(1); }
  .curtain--side--right { transform: translateX(0)    scaleX(-1); }
  .entry__oak { width: 200px; height: 300px; right: 2%; }
  .entry__sun { width: 100px; height: 100px; top: 6%; right: 8%; }
  .entry__content { padding-left: 36px; padding-right: 36px; }
  .entry__slider-text { font-size: 11px; letter-spacing: .08em; }
}

@media (max-width: 520px) {
  .cast__grid { grid-template-columns: 1fr; }
  .hero__title .zh { letter-spacing: .15em; }
  .entry__oak { width: 140px; height: 220px; right: 1%; }
  .curtain--top { height: 70px; }
  .curtain--side { width: 12px; }
  .act-divider { padding: 50px 16px; gap: 16px; }
  .act-divider__quote { font-size: 16px; }
  .info__roses { width: 80px; }
  .info__roses--left  { left: 0;  }
  .info__roses--right { right: 0; }
}

/* ====================================================================
   核心运营团队 · Production Team
   ==================================================================== */
.team {
  position: relative;
  padding: 110px 24px 130px;
  /* 羊皮纸纹理 → 让团队卡看起来像写在古卷上的"演职人员名单" */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 102, 122, .08), transparent 70%),
    linear-gradient(180deg, rgba(247,238,216,.55) 0%, rgba(236,223,190,.65) 100%),
    url("/static/images/bg-parchment.webp") center/700px repeat;
  overflow: hidden;
}
/* 背景装饰:左右两侧玫瑰枝 */
.team::before,
.team::after {
  content: "";
  position: absolute;
  top: 80px;
  width: 120px;
  height: 60%;
  background:
    radial-gradient(circle at 30% 20%, rgba(168, 64, 86, .12) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 50%, rgba(168, 64, 86, .10) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 80%, rgba(168, 64, 86, .12) 0 6px, transparent 7px);
  pointer-events: none;
  opacity: .55;
}
.team::before { left: -20px;  transform: scaleX(-1); }
.team::after  { right: -20px; }

/* 顶部小装饰:喜剧面具 */
.team__mask {
  display: block;
  margin: 0 auto 12px;
  width: 38px;
  height: 38px;
  color: var(--c-rose-deep);
  opacity: .82;
}
.team__mask-text {
  text-align: center;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  opacity: .6;
  margin: 0 0 18px;
}
.team__prelude {
  text-align: center;
  font-family: var(--f-zh);
  font-size: 14px;
  color: var(--c-rose-deep);
  opacity: .8;
  margin: 14px 0 0;
  letter-spacing: .12em;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
  max-width: 1120px;
  margin: 36px auto 0;
}

/* 单个部门卡 */
.team__dept {
  position: relative;
  background: rgba(255, 251, 240, .72);
  border: 1px dashed rgba(168, 70, 90, .35);
  border-radius: 4px;
  padding: 30px 30px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 6px 28px rgba(80, 30, 40, .08);
  transition: transform .4s ease, box-shadow .4s ease;
}
.team__dept:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 12px 36px rgba(80, 30, 40, .14);
}
/* 卡顶 fleuron 装饰 ❦ */
.team__dept::before {
  content: "❦";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  line-height: 1;
  color: var(--c-rose-deep);
  background: linear-gradient(180deg, #f7eed8 0%, #ecdfbe 100%);
  padding: 0 16px;
}
/* 卡四角小星 */
.team__dept::after {
  content: "✦";
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  color: var(--c-gold);
  opacity: .55;
}

.team__dept-title {
  text-align: center;
  margin: 0 0 6px;
}
.team__dept-title-zh {
  display: block;
  font-family: var(--f-zh-disp);
  font-size: 22px;
  color: var(--c-forest-deep);
  letter-spacing: .04em;
  margin: 0;
}
.team__dept-title-en {
  display: block;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  opacity: .7;
  margin: 6px 0 0;
}
.team__dept-divider {
  width: 64px;
  height: 1px;
  margin: 14px auto 16px;
  background: linear-gradient(90deg, transparent, var(--c-rose), transparent);
}

/* 角色行 */
.team__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(168, 70, 90, .18);
}
.team__row:last-child { border-bottom: none; }

.team__role {
  flex: 0 0 8.5em;
  font-family: var(--f-zh);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-rose-deep);
  letter-spacing: .02em;
}

.team__names {
  flex: 1;
  font-family: var(--f-zh);
  font-size: 14px;
  color: var(--c-forest-deep);
  line-height: 1.6;
}
.team__person { display: inline; }
.team__person-en {
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--c-rose-deep);
  opacity: .65;
  margin-left: 2px;
  letter-spacing: .03em;
}
.team__dot {
  color: var(--c-rose);
  opacity: .55;
  margin: 0 6px;
  font-weight: 400;
}

/* 末尾装饰行 */
.team__deco {
  text-align: center;
  margin: 50px auto 0;
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--c-rose-deep);
  letter-spacing: 1em;
  opacity: .5;
  padding-left: 1em; /* 抵消末尾字距产生的偏移,视觉居中 */
}
.team__quote {
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--f-zh);
  font-size: 15px;
  color: var(--c-forest-deep);
  opacity: .75;
  line-height: 1.7;
}
.team__quote em {
  display: block;
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--c-rose-deep);
  opacity: .6;
  font-style: normal;
}

@media (max-width: 880px) {
  .team { padding: 80px 16px 100px; }
  .team__grid { grid-template-columns: 1fr; gap: 26px; }
  .team__row { flex-direction: column; gap: 2px; padding: 9px 0; }
  .team__role { flex: none; font-size: 13px; }
  .team__names { font-size: 14px; }
  .team::before, .team::after { width: 60px; opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ====================================================================
   /story 路由:返回主页按钮 + 独立页面包装
   ==================================================================== */
.page-story__main {
  position: relative;
  z-index: 2;     /* 浮于 .forest-bg 之上 */
}

.back-btn {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 200;   /* 高于进度条 (1100) 以外的常规元素;主区入场滑块早已消失 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(250, 246, 237, .92);
  color: var(--c-ink);
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  font-family: var(--f-zh-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(28, 26, 20, .08);
  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    background .25s var(--ease);
}
.back-btn:hover {
  transform: translateY(-2px);
  background: var(--c-parchment);
  box-shadow: 0 8px 22px rgba(28, 26, 20, .14);
}
.back-btn:focus-visible {
  outline: 2px solid var(--c-rose-deep);
  outline-offset: 3px;
}
.back-btn__arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--c-rose-deep);
  transition: transform .25s var(--ease);
}
.back-btn:hover .back-btn__arrow {
  transform: translateX(-3px);
}

@media (max-width: 600px) {
  .back-btn {
    top: 14px;
    left: 14px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .back-btn__arrow { font-size: 16px; }
}

/* ====================================================================
   键盘可达性:skip-link(默认隐藏,focus 时弹出)
   ==================================================================== */
.skip-link {
  position: absolute;
  top: -200px;
  left: 0;
  z-index: 9999;
  padding: 12px 22px;
  background: var(--c-forest-deep);
  color: var(--c-cream);
  font-family: var(--f-zh-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  border: 2px solid var(--c-gold);
  border-radius: 0 0 8px 0;
  transition: top .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: none;
}

/* ====================================================================
   入场 hero:滑块移入 hero 底部,移动端一屏可见
   ==================================================================== */
.entry__hero .entry__slider-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 250;          /* 浮于幕布 (z=200) 之上,确保始终可见 */
  text-align: center;
  pointer-events: none;  /* 让 hero 仍可滚动到底;slider 自己恢复 pointer-events */
}
.entry__hero .entry__slider-wrap .entry__slider {
  margin: 0 auto;
  pointer-events: auto;
}
.entry__hero .entry__slider-wrap .entry__hint {
  margin-top: 14px;
  font-family: var(--f-zh-ui);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--c-cream);
  opacity: .75;
  pointer-events: auto;
}

@media (max-width: 880px) {
  /* 移动端:hero 高度自适应内容,slider 直接贴着视口底部 */
  .entry__hero {
    min-height: 100svh;  /* iOS Safari 安全视口,避免底栏遮挡 */
    display: block;
    padding: 60px 16px 110px;
  }
  .entry__hero .entry__content {
    position: relative;
    z-index: 5;
  }
  .entry__hero .entry__slider-wrap {
    bottom: 20px;
  }
  .entry__hero .entry__slider-wrap .entry__hint {
    /* 移动端隐藏 Enter 提示,给滑块腾位置 */
    display: none;
  }
}

@media (max-width: 480px) {
  .entry__hero {
    padding-bottom: 130px;
  }
  .entry__hero .entry__slider-wrap { bottom: 16px; }
}