/* Hero 漏斗动画：字体 + 铺满首屏的画布。
   文案排版归 style.css，这里不碰 h1/.sub 之类的全局选择器。 */
@font-face{
  font-family:"Noto Serif Hero";
  src:url("/assets/fonts/noto-serif-hero.woff2") format("woff2");
  font-weight:900; font-display:swap;
}

/* 画布是整个首屏的背景，不是卡片：没有边框、没有圆角、没有自己的底色。
   左侧用遮罩淡出，给文案让出干净的底；右侧一直铺到视口边缘。 */
.hero{ position:relative; overflow:hidden; }
.funnel-stage{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 40%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 40%);
}
.hero > .wrap{ position:relative; z-index:1; }
#funnel{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* 文案压在动画与背景字格上，读起来会打架。
   在文案后面垫一层很软的暗角（不是色块、没有边界），把字托起来。 */
.hero-split .narrow{ position:relative; }
.hero-split .narrow::before{
  content:""; position:absolute; z-index:-1;
  inset:-70px -170px -70px -110px;
  background:radial-gradient(120% 110% at 0% 50%,
    rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

@media (max-width:900px){
  /* 手机上动画压在文字下面会读不清：改成上下两块，动画在前 */
  .hero{ display:flex; flex-direction:column; }
  .funnel-stage{
    position:relative; inset:auto; order:-1;
    width:100%; height:min(98vw, 430px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 96%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 96%, transparent 100%);
  }
}