/* ===================================================================
 * hero.css · 首屏（标题 / 副标题 / 皮影 / 印章 / 滚动提示 / CTA）
 * 影戏千秋 · 景阳冈重演（小 Demo）
 * =================================================================== */
.stage{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:90px 24px 60px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, rgba(243,210,122,.22), rgba(243,210,122,0) 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(140,28,24,.55), transparent 70%),
    linear-gradient(180deg,#0c0606 0%,#190a08 55%,#0a0504 100%);
  overflow:hidden;
}
/* paper screen light behind */
.stage::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(680px,86vw);height:min(420px,60vh);
  transform:translate(-50%,-52%);
  background:radial-gradient(ellipse at center, rgba(255,224,150,.55) 0%, rgba(236,180,90,.18) 45%, transparent 72%);
  filter:blur(8px);
  animation:flicker 6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{opacity:.9}
  45%{opacity:.78}
  60%{opacity:.95}
  75%{opacity:.82}
}

.stage-inner{
  position:relative;z-index:3;
  width:min(1100px,100%);
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  text-align:center;
}

/* top curtain rod */
.curtain-rod{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  width:min(880px,92vw);height:60px;
  z-index:4;pointer-events:none;
}

/* seal stamp */
.seal{
  position:absolute;top:34px;right:34px;
  z-index:6;
  width:78px;height:78px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c8332a,#8e1c18);
  color:#f7e3b8;
  font-family:var(--font-kai);
  font-size:18px;line-height:1.05;
  text-align:center;
  border:2px solid rgba(247,227,184,.4);
  box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.18);
  transform:rotate(6deg);
  border-radius:6px;
  letter-spacing:2px;
}
.seal small{display:block;font-size:9px;letter-spacing:1px;font-family:var(--font-en-cap);margin-top:3px;opacity:.8}

/* 品牌 logo（左上角，含图 + 项目名） */
.brand-logo-wrap{
  position:absolute;top:30px;left:34px;z-index:6;
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:fadeUp 1s .2s ease both;
}
.brand-logo{
  width:54px;height:54px;object-fit:cover;
  border-radius:50%;
  border:1px solid var(--line-strong);
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.4);
}
.brand-logo-text{display:flex;flex-direction:column;line-height:1.15}
.brand-logo-text .bln-cn{
  font-family:var(--font-kai);font-size:15px;color:var(--gold-bright);
  letter-spacing:.18em;
}
.brand-logo-text .bln-en{
  font-family:var(--font-en-cap);font-size:9px;color:var(--paper-dim);
  letter-spacing:.3em;margin-top:2px;
}

.eyebrow{
  font-family:var(--font-en-cap);
  letter-spacing:.5em;
  font-size:12px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:28px;
  opacity:.85;
}
.eyebrow .dot{color:var(--vermillion);margin:0 10px}

.title-main{
  font-family:var(--font-kai);
  font-size:clamp(56px,11vw,168px);
  line-height:1.05;
  color:var(--gold-bright);
  letter-spacing:.06em;
  text-shadow:
    0 0 30px rgba(243,210,122,.45),
    0 0 60px rgba(200,51,42,.35);
  position:relative;
  display:inline-block;
}
.title-main span{
  display:inline-block;
  animation:dropIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.title-main span:nth-child(1){animation-delay:.1s}
.title-main span:nth-child(2){animation-delay:.25s}
.title-main span:nth-child(3){animation-delay:.4s}
.title-main span:nth-child(4){animation-delay:.55s}
@keyframes dropIn{
  0%{opacity:0;transform:translateY(-40px) rotate(-6deg);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}
}

.title-sub{
  font-family:var(--font-kai);
  font-size:clamp(20px,3.2vw,32px);
  color:var(--paper);
  letter-spacing:.5em;
  margin-top:6px;
  padding-left:.5em;
  opacity:0;animation:fadeUp 1s .9s ease both;
}
.title-sub::before,.title-sub::after{
  content:"";display:inline-block;width:40px;height:1px;
  background:var(--line-strong);vertical-align:middle;margin:0 18px;
}

.tagline{
  font-family:var(--font-kai);
  font-weight:400;
  font-size:clamp(14px,1.6vw,18px);
  color:var(--paper-dim);
  max-width:560px;margin:26px auto 0;
  letter-spacing:.1em;
  opacity:0;animation:fadeUp 1s 1.1s ease both;
}
.tagline em{
  font-style:normal;color:var(--gold-bright);
  font-family:var(--font-kai);font-size:1.15em;
}

/* shadow puppet figure —— 首屏皮影（第一幕戏台会克隆此 SVG） */
.puppet-wrap{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-52%);
  width:min(360px,48vw);
  z-index:1;
  pointer-events:none;
  animation:sway 7s ease-in-out infinite;
  transform-origin:50% 0%;
  opacity:.55;
}
@keyframes sway{
  0%,100%{transform:translate(-50%,-52%) rotate(-1.5deg)}
  50%{transform:translate(-50%,-53%) rotate(1.5deg)}
}
.puppet-wrap svg{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.65))}

/* control rod lines */
.rod{
  position:absolute;
  width:1px;height:120px;
  background:linear-gradient(to bottom,transparent,rgba(243,210,122,.4));
  z-index:4;
}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;
  transform:translateX(-50%);
  z-index:5;
  font-family:var(--font-en-cap);
  font-size:11px;letter-spacing:.4em;
  color:var(--gold);
  opacity:.7;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint .line{width:1px;height:50px;background:linear-gradient(var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============ 景阳冈重演 · 首屏 CTA / 印章扩展 ============ */
/* 标题第五个字动画延迟（"重 演"） */
.title-main span:nth-child(5){animation-delay:.7s}

/* 通用按钮加大（首屏 / 转场共用） */
.btn.big{font-size:18px;padding:15px 34px;letter-spacing:.25em}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;opacity:0;animation:fadeUp 1s 1.3s ease both}

/* ============ 转场 ============ */
.transition{padding:90px 24px;text-align:center;background:linear-gradient(180deg,#0c0606,#170908)}
.transition .wrap{max-width:880px}
.trans-text{font-family:var(--font-kai);font-size:clamp(26px,4vw,44px);color:var(--gold-bright);letter-spacing:.16em;line-height:1.75;text-shadow:0 0 24px rgba(243,210,122,.3)}
.trans-text .gold{color:var(--vermillion)}
.transition .btn.big{margin-top:34px}
.trans-sub{margin-top:16px;font-family:var(--font-en-serif);font-style:italic;color:var(--paper-dim);font-size:15px;letter-spacing:.18em}

/* 移动端：首屏 */
@media(max-width:900px){
  .stage{padding:70px 20px 50px}
  .stage-inner{gap:24px}
  .eyebrow{font-size:10px;letter-spacing:.35em;margin-bottom:20px}
  .title-main{font-size:clamp(42px,10vw,80px);line-height:1.1}
  .title-sub{font-size:clamp(16px,2.8vw,24px);letter-spacing:.3em;margin-top:4px}
  .title-sub::before,.title-sub::after{width:24px;margin:0 10px}
  .tagline{font-size:14px;letter-spacing:.08em;max-width:90%}
  .puppet-wrap{width:min(240px,42vw);opacity:.4}
  .seal{top:20px;right:20px;width:60px;height:60px;font-size:14px}
  .seal small{font-size:7px}
  .brand-logo-wrap{top:22px;left:20px;gap:8px}
  .brand-logo{width:42px;height:42px}
  .brand-logo-text .bln-cn{font-size:13px}
  .brand-logo-text .bln-en{font-size:8px}
  .hero-cta{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .hero-cta .btn{width:100%}
  .trans-text{font-size:22px;letter-spacing:.1em}
  .transition{padding:60px 20px}
}