/* ===================================================================
   三国 · 影  —  电影感设计系统
   =================================================================== */

:root{
  --ink:#0a0807;            /* 底色·暖调近黑 */
  --ink-deep:#050403;       /* 黑边·最深 */
  --paper:#ece3d3;          /* 正文·宣纸暖白 */
  --paper-dim:#a99e8b;      /* 次要文字 */
  --gold:#c9a227;           /* 描金 */
  --gold-hi:#e7c758;        /* 高光金 */
  --crimson:#8e1c1c;        /* 朱砂 */
  --crimson-dim:#5d1414;
  --muted:#5f584d;

  --font-serif:"Noto Serif SC","Songti SC","STSong",serif;
  --font-brush:"Ma Shan Zheng","STKaiti","KaiTi",cursive;
  --font-latin:"Cinzel","Times New Roman",serif;

  --bar:6vh;                /* 上下黑边高度 */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}
body.is-ready{opacity:1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink-deep)}

/* ===================== 电影画框 ===================== */

/* 胶片颗粒：SVG 噪点 + 步进抖动 */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;
  width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.06;mix-blend-mode:overlay;
  animation:grain .5s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,3%)}
}

/* 暗角 */
.vignette{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%,
     transparent 45%,rgba(0,0,0,.45) 80%,rgba(0,0,0,.85) 100%);
}

/* 上下黑边 letterbox */
.letterbox{position:fixed;left:0;right:0;z-index:85;background:var(--ink-deep);pointer-events:none}
.letterbox--top{top:0;height:var(--bar);box-shadow:0 1px 0 rgba(201,162,39,.12)}
.letterbox--bottom{bottom:0;height:var(--bar);box-shadow:0 -1px 0 rgba(201,162,39,.12)}

/* 转场白闪 */
.flash{
  position:fixed;inset:0;z-index:95;pointer-events:none;
  background:#fff;opacity:0;
}

/* ===================== 导航 ===================== */
.mast{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--bar) + 1.4vh) 5vw 0;
  pointer-events:none;
}
.mast__brand{
  font-family:var(--font-serif);font-weight:600;font-size:clamp(.85rem,1.4vw,1.05rem);
  letter-spacing:.35em;color:var(--gold);
  pointer-events:auto;
}
.mast__counter{
  font-family:var(--font-latin);font-size:clamp(.7rem,1vw,.85rem);
  letter-spacing:.3em;color:var(--paper-dim);
}
.mast__counter #actNow{color:var(--gold-hi)}

/* 右侧幕次点 */
.dots{
  position:fixed;right:max(2.4vw,18px);top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;gap:14px;
}
.dots__btn{
  width:11px;height:11px;border:none;background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:6px;
}
.dots__btn span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(236,227,211,.22);
  transition:all .4s var(--ease);
}
.dots__btn:hover span{background:var(--paper-dim);transform:scale(1.3)}
.dots__btn.is-active span{
  background:var(--gold-hi);transform:scale(1.4);
  box-shadow:0 0 10px rgba(231,199,88,.7);
}

/* 左侧滚动进度 */
.progress{
  position:fixed;left:max(2.4vw,18px);top:50%;transform:translateY(-50%);
  z-index:70;width:1px;height:38vh;background:rgba(236,227,211,.12);
}
.progress i{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(var(--gold-hi),var(--gold));
  box-shadow:0 0 8px rgba(201,162,39,.5);
}

/* ===================== 片头 ===================== */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center}
.scene--intro{flex-direction:column;text-align:center;padding:0 6vw}

/* 片头氛围底图：长江雾景，压暗留白 */
.intro__media{position:absolute;inset:0;z-index:0}
.intro__media img{width:100%;height:100%;object-fit:cover;opacity:.5;animation:kenburns 32s ease-in-out infinite alternate}
.intro__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(85% 75% at 50% 42%,rgba(5,4,3,.4),rgba(5,4,3,.82) 68%,rgba(5,4,3,.96))}
.scene--intro .intro__crawl,.scene--intro .intro__title-wrap{position:relative;z-index:2}
.intro__cue{z-index:2}

.intro__crawl{margin-bottom:5vh}
.intro__line{
  font-family:var(--font-brush);font-size:clamp(1.05rem,2vw,1.5rem);
  letter-spacing:.18em;color:var(--paper-dim);line-height:2.2;
}

.intro__title-wrap{position:relative}
.intro__title{
  font-family:var(--font-serif);font-weight:900;
  font-size:clamp(5rem,20vw,16rem);line-height:1;letter-spacing:.12em;
  color:var(--paper);
  text-shadow:0 0 60px rgba(201,162,39,.25);
}
.intro__sub{
  margin-top:2.2vh;font-size:clamp(.7rem,1.2vw,.95rem);
  letter-spacing:.7em;color:var(--gold);padding-left:.7em;
}
.intro__cue{
  position:absolute;bottom:calc(var(--bar) + 3vh);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--paper-dim);font-size:.75rem;letter-spacing:.6em;padding-left:.6em;
}
.intro__cue i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* ===================== 幕（分镜） ===================== */
.act{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center}

.act__media{position:absolute;inset:-8% 0;z-index:1;will-change:transform}
.act__media img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0,0)}
  100%{transform:scale(1.18) translate(-2%,-2%)}
}

/* 遮罩：保证文字可读 + 焦点引导 */
.act__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top,rgba(5,4,3,.96) 0%,rgba(5,4,3,.5) 26%,rgba(5,4,3,.12) 52%,rgba(5,4,3,.55) 100%),
    radial-gradient(110% 100% at 16% 65%,rgba(5,4,3,.7),transparent 58%),
    linear-gradient(90deg,rgba(5,4,3,.4),transparent 40%);
}
.act__inner--right ~ .act__scrim,
.act:has(.act__inner--right) .act__scrim{
  background:
    linear-gradient(to top,rgba(5,4,3,.96) 0%,rgba(5,4,3,.5) 26%,rgba(5,4,3,.12) 52%,rgba(5,4,3,.55) 100%),
    radial-gradient(110% 100% at 84% 65%,rgba(5,4,3,.7),transparent 58%),
    linear-gradient(270deg,rgba(5,4,3,.4),transparent 40%);
}
.act__scrim--fire{
  background:
    linear-gradient(to top,rgba(20,4,0,.96) 0%,rgba(10,3,0,.45) 30%,rgba(8,2,0,.2) 55%,rgba(15,3,0,.6) 100%),
    radial-gradient(90% 80% at 50% 60%,rgba(60,10,0,.35),transparent 65%);
}

/* 主题水印（忠義/豪情…） */
.act__theme{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-brush);
  font-size:clamp(11rem,30vw,28rem);line-height:1;letter-spacing:.05em;
  color:rgba(201,162,39,.045);white-space:nowrap;pointer-events:none;user-select:none;
}
.act__theme--epic{color:rgba(180,40,20,.07)}

/* 内容区 */
.act__inner{
  position:relative;z-index:4;
  width:100%;max-width:880px;padding:0 9vw;
}
.act__inner--right{margin-left:auto;text-align:right}
.act__inner--center{margin:0 auto;text-align:center;max-width:1000px}

.act__label{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(.7rem,1vw,.85rem);letter-spacing:.4em;color:var(--gold);
  margin-bottom:2.4vh;
}
.act__inner--right .act__label{flex-direction:row-reverse}
.act__inner--center .act__label{justify-content:center}
.act__label b{font-family:var(--font-latin);font-weight:600;letter-spacing:.25em}
.act__label i{width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.act__inner--right .act__label i{background:linear-gradient(270deg,var(--gold),transparent)}
.act__label span{color:var(--paper-dim)}

.act__title{
  font-family:var(--font-serif);font-weight:900;
  font-size:clamp(2.8rem,7.2vw,6rem);line-height:1.05;letter-spacing:.06em;
  color:var(--paper);margin-bottom:3vh;
  text-shadow:0 6px 40px rgba(0,0,0,.7);
}
.act__title--epic{font-size:clamp(3.2rem,8.5vw,7rem);letter-spacing:.12em}

.act__quote{
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.9;
  color:var(--gold-hi);margin-bottom:3vh;
  border-left:2px solid var(--crimson);padding-left:1.1em;
}
.act__inner--right .act__quote{border-left:none;border-right:2px solid var(--crimson);padding-left:0;padding-right:1.1em}
.act__inner--center .act__quote{border:none;display:inline-block;padding:0 .3em}

.act__note{
  font-size:clamp(.92rem,1.25vw,1.05rem);line-height:2;
  color:var(--paper-dim);max-width:46ch;font-weight:300;
}
.act__inner--right .act__note{margin-left:auto}
.act__inner--center .act__note{margin:0 auto;max-width:60ch}

/* ===================== 尾声 ===================== */
.scene--outro{flex-direction:column;text-align:center;background:radial-gradient(80% 60% at 50% 40%,#0d0a08,var(--ink-deep))}
.outro__inner{display:flex;flex-direction:column;align-items:center;gap:1.4vh;padding:0 6vw}
.outro__lead{
  font-family:var(--font-brush);font-size:clamp(1.3rem,2.6vw,2rem);
  letter-spacing:.3em;color:var(--paper-dim);padding-left:.3em;
}
.outro__big{
  font-family:var(--font-serif);font-weight:900;
  font-size:clamp(2rem,5.5vw,4.2rem);letter-spacing:.1em;color:var(--paper);
  text-shadow:0 0 50px rgba(201,162,39,.2);
}
.seal{
  margin:3vh 0 1vh;width:clamp(72px,7vw,92px);height:clamp(72px,7vw,92px);
  display:grid;place-items:center;
  background:var(--crimson);color:#f4ece0;
  font-family:var(--font-serif);font-weight:900;font-size:clamp(1.4rem,2vw,1.9rem);
  letter-spacing:.05em;transform:rotate(-6deg);
  box-shadow:inset 0 0 0 3px rgba(244,236,224,.18),0 6px 30px rgba(0,0,0,.6);
  filter:drop-shadow(0 0 12px rgba(142,28,28,.5));
}
.outro__credit{font-size:clamp(.75rem,1.1vw,.95rem);letter-spacing:.25em;color:var(--paper-dim)}
.outro__back{
  margin-top:3vh;font-size:.8rem;letter-spacing:.4em;color:var(--gold);
  border:1px solid rgba(201,162,39,.4);padding:.9em 1.8em;
  transition:all .4s var(--ease);
}
.outro__back:hover{background:var(--gold);color:var(--ink-deep);letter-spacing:.5em}

/* ===================== 响应式 ===================== */
@media(max-width:720px){
  :root{--bar:4vh}
  .dots{gap:10px;right:14px}
  .progress{left:14px}
  .act__inner{padding:0 8vw}
  .act__inner--right{text-align:left}
  .act__inner--right .act__label{flex-direction:row}
  .act__inner--right .act__quote{border-left:2px solid var(--crimson);border-right:none;padding-left:1.1em;padding-right:0}
  .intro__title{letter-spacing:.08em}
}

/* ===================== 无障碍：降低动效 ===================== */
@media(prefers-reduced-motion:reduce){
  .grain,.act__media img,.intro__cue i{animation:none}
  *{scroll-behavior:auto!important}
}