/* ============================================================
   00 · 序
   ============================================================ */

.scene--hero{
  min-height:100svh;
  padding-top:0;
  padding-bottom:0;
  display:flex;
  background:#080706;
  color:var(--bone);
}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(239,231,218,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,231,218,.055) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 70% 60% at 42% 45%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 42% 45%,#000 0%,transparent 78%);
  opacity:.75;
}
.hero-orb{
  position:absolute;border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.hero-orb--a{
  width:52vw;height:52vw;right:-12vw;top:-18vw;
  background:radial-gradient(circle,rgba(217,160,91,.30),rgba(196,68,46,.10) 55%,transparent 72%);
  animation:orbDrift 22s ease-in-out infinite alternate;
}
.hero-orb--b{
  width:46vw;height:46vw;left:-16vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(74,122,120,.22),rgba(40,70,90,.10) 55%,transparent 74%);
  animation:orbDrift 28s ease-in-out infinite alternate-reverse;
}
@keyframes orbDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-4vw,4vh,0) scale(1.08)}
}
.hero-dust{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;opacity:.75;pointer-events:none;
}

.hero-wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:100svh;
  padding-top:clamp(88px,11vh,120px);
  padding-bottom:clamp(24px,4vh,44px);
}
.hero-top{
  display:flex;justify-content:space-between;gap:20px;
  color:var(--bone-3);
  padding-bottom:18px;
  border-bottom:1px solid rgba(239,231,218,.10);
  opacity:0;animation:fadeIn 1.4s var(--ease) .1s forwards;
}
.hero-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:clamp(30px,5vw,84px);
  align-items:end;
  padding-block:clamp(40px,7vh,84px);
  flex:1;
}
.hero-titleblock{min-width:0;align-self:center}
.hero-eyebrow{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.3em;
  color:var(--amber);
  margin-bottom:clamp(18px,3vh,34px);
  opacity:0;animation:fadeUp 1.1s var(--ease) .15s forwards;
}
.hero-title{
  font-family:var(--f-serif);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:.95;
}
.hl{display:block;overflow:hidden;padding-bottom:.04em}
.hl > span{display:inline-block;transform:translateY(112%);animation:titleRise 1.35s var(--ease) forwards}
.hl1{
  font-size:clamp(26px,3.6vw,44px);
  letter-spacing:.34em;
  color:var(--bone-2);
  margin-left:.16em;
  margin-bottom:clamp(8px,1.6vh,18px);
}
.hl1 > span{animation-delay:.28s}
.hl2{
  font-size:clamp(58px,10.4vw,138px);
  line-height:1;
  display:flex;align-items:baseline;gap:.06em;
  flex-wrap:wrap;
}
.hl2 > span{animation-delay:.4s}
.seal--big{
  display:inline-grid;place-items:center;
  width:1.14em;height:1.14em;
  font-size:.44em;
  line-height:1;
  background:var(--seal);
  color:#F6EBD9;
  border-radius:3px;
  transform:translateY(-.02em) rotate(-2.5deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 22px rgba(0,0,0,.18),
    0 8px 34px rgba(196,68,46,.28);
  position:relative;
  animation:sealIn 1.2s var(--ease) 1.15s both;
}
.seal--big::after{
  content:"";
  position:absolute;inset:5px;
  border:1px solid rgba(246,235,217,.38);
  border-radius:1px;
}
@keyframes titleRise{to{transform:translateY(0)}}
@keyframes sealIn{
  from{opacity:0;transform:translateY(10px) rotate(-8deg) scale(.86)}
  to{opacity:1;transform:translateY(-.02em) rotate(-2.5deg) scale(1)}
}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.hero-sub{
  margin-top:clamp(28px,4.6vh,46px);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.9;
  color:var(--bone-2);
  opacity:0;animation:fadeUp 1.2s var(--ease) .95s forwards;
}
.hero-note{
  margin-top:clamp(20px,3.2vh,30px);
  padding-left:15px;
  border-left:1px solid rgba(217,160,91,.42);
  font-size:12.5px;line-height:1.95;
  color:var(--bone-3);
  letter-spacing:.02em;
  opacity:0;animation:fadeUp 1.2s var(--ease) 1.1s forwards;
}

/* 右侧索引 */
.hero-index{
  padding-bottom:2px;
  opacity:0;animation:fadeUp 1.3s var(--ease) 1.05s forwards;
}
.hero-index .label{
  color:var(--bone-3);
  margin-bottom:10px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(239,231,218,.18);
}
.hero-index a{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid rgba(239,231,218,.07);
  position:relative;
  transition:color .35s var(--ease),padding .35s var(--ease);
}
.hero-index a span{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;
  color:var(--bone-3);
  transition:color .35s;
}
.hero-index a b{
  font-family:var(--f-serif);font-weight:300;font-size:13.5px;
  letter-spacing:.02em;color:var(--bone-2);
  transition:color .35s;
  white-space:nowrap;
}
.hero-index a em{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone-3);opacity:.7;
  text-align:right;
  transition:color .35s;
}
.hero-index a i{
  position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent,var(--amber));
  transition:width .5s var(--ease);
}
.hero-index a:hover{padding-left:6px}
.hero-index a:hover span{color:var(--accent,var(--amber))}
.hero-index a:hover b{color:#fff}
.hero-index a:hover em{color:var(--accent,var(--amber));opacity:1}
.hero-index a:hover i{width:100%}

/* 底部 */
.hero-foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:20px;
  padding-top:20px;
  border-top:1px solid rgba(239,231,218,.10);
  opacity:0;animation:fadeIn 1.4s var(--ease) 1.3s forwards;
}
.hero-boot{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.08em;
  color:var(--bone-3);
  display:flex;align-items:center;gap:8px;
  min-height:18px;
}
.hero-boot span{color:var(--amber);opacity:.8}
.hero-boot b{font-weight:400;color:var(--bone-2);white-space:nowrap}
.caret{
  display:inline-block;width:6px;height:12px;
  background:var(--amber);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

.scroll-cue{
  justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;
  color:var(--bone-3);
  transition:color .3s;
}
.scroll-cue:hover{color:var(--bone)}
.scroll-cue i{
  width:1px;height:52px;background:rgba(239,231,218,.2);
  position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;left:0;top:-40%;
  width:1px;height:40%;
  background:var(--amber);
  animation:scrollLine 2.1s var(--ease-io) infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(0);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(360%);opacity:0}
}
.hero-copy{justify-self:end;color:var(--bone-3);opacity:.7}

@media (max-width:980px){
  .hero-main{grid-template-columns:1fr;align-items:start;gap:44px}
  .hero-titleblock{align-self:start}
  .hero-index{max-width:520px}
  .hero-index a b{font-size:13px}
}
@media (max-width:760px){
  .hero-wrap{padding-top:72px;padding-bottom:20px}
  .hero-top{padding-bottom:14px}
  .hero-main{padding-block:26px;gap:32px}
  .hl1{font-size:24px;letter-spacing:.28em}
  .hl2{font-size:clamp(46px,14.5vw,74px)}
  .hero-sub{font-size:15.5px;margin-top:24px}
  .hero-note{font-size:11.5px;margin-top:14px}
  .hero-index a{padding:6px 0}
  .hero-index a em{font-size:8px}
  .hero-foot{grid-template-columns:1fr auto;gap:14px}
  .scroll-cue{display:none}
  .hero-copy{display:none}
  .hero-top .label:last-child{display:none}
}