/* ============================================================
   爱弥斯.space · 沉浸式首屏（覆盖旧 hero 样式）
   布局：立绘全屏铺底 + 文字压在下三分之一
   —— 与芙宁娜站的「左文右图」彻底区分
   ============================================================ */

/* 首屏容器：去掉旧的左右分栏，改成整屏舞台 */
#top.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  padding:0;
  overflow:hidden;
  text-align:center;
}

/* 舞台：立绘铺满 */
.hero-stage{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.hero-stage .stage-img{
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center top;
  filter:drop-shadow(0 24px 60px rgba(190,80,130,.28));
  animation:stageFloat 7s ease-in-out infinite;
}
@keyframes stageFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* 底部渐隐遮罩：让文字压得住 */
.hero-stage .stage-mask{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,244,250,0)   0%,
    rgba(255,244,250,0)   38%,
    rgba(255,244,250,.55) 62%,
    rgba(255,244,250,.92) 80%,
    rgba(255,244,250,1)   100%
  );
  pointer-events:none;
}

/* 星辉光晕 */
.hero-stage .stage-glow{
  position:absolute;
  left:50%;
  top:20%;
  width:min(680px,92vw);
  height:min(680px,92vw);
  transform:translate(-50%,-30%);
  background:radial-gradient(circle,rgba(255,194,224,.42) 0%,rgba(255,194,224,0) 68%);
  filter:blur(28px);
  pointer-events:none;
  animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{opacity:.72;transform:translate(-50%,-30%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-30%) scale(1.07)}
}

/* 文字块：压在底部 */
.hero-caption{
  position:relative;
  z-index:2;
  width:100%;
  max-width:760px;
  padding:0 22px 7vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  animation:captionIn .95s cubic-bezier(.16,1,.3,1) both;
}
@keyframes captionIn{
  from{opacity:0;transform:translateY(34px)}
  to{opacity:1;transform:translateY(0)}
}

#top .hero-caption .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 17px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--water-4);
}

#top .hero-caption .hero-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  line-height:1;
}
#top .hero-caption .hero-title .line{
  font-size:clamp(48px,12vw,86px);
  font-weight:800;
  letter-spacing:.1em;
  background:linear-gradient(135deg,var(--water-3),var(--water-1) 45%,var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(212,87,143,.28));
}
#top .hero-caption .hero-title .sub{
  font-size:clamp(12px,2.6vw,16px);
  font-weight:600;
  letter-spacing:.52em;
  text-indent:.52em;
  color:var(--ink-dim);
  -webkit-text-fill-color:var(--ink-dim);
}

#top .hero-caption .hero-desc{
  margin:0;
  font-size:clamp(14px,3.2vw,16px);
  line-height:1.85;
  color:var(--ink-mid);
  max-width:560px;
}

#top .hero-caption .hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
  margin-top:2px;
}

#top .hero-caption .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:8px;
}

/* 滚动提示：改成小圆点，不占位 */
#top .scroll-hint{display:none}

/* ---------- 移动端 ---------- */
@media(max-width:768px){
  #top.hero{min-height:100svh}
  .hero-stage .stage-img{height:auto;width:118%;max-width:none;top:0}
  .hero-stage{align-items:flex-start}
  .hero-stage .stage-img{position:absolute;top:-2%;left:-9%}
  .hero-stage .stage-mask{
    background:linear-gradient(
      to bottom,
      rgba(255,244,250,0)   0%,
      rgba(255,244,250,0)   26%,
      rgba(255,244,250,.6)  48%,
      rgba(255,244,250,.94) 68%,
      rgba(255,244,250,1)   100%
    );
  }
  .hero-caption{padding-bottom:5vh;gap:12px}
}

@media(max-width:420px){
  #top .hero-caption .hero-title .line{font-size:clamp(40px,14vw,58px)}
  #top .hero-caption .hero-desc{font-size:13.5px;line-height:1.75}
  #top .hero-caption .hero-desc br{display:none}
}