/* ==========================================================================
   首屏 · 开灯仪式（副本稿）
   母题来自这行职业本身：两根直管灯 + 一条底管，构成 LI 字标。
   入场即真实灯管的启动顺序 —— 起弧、闪两下、稳住；
   光稳住之后，才“照”到右边的 HELLO 上。
   ========================================================================== */

.hero-hello .hero-stage{position:absolute; inset:0}

/* ── LI 字标：L 完整，I 悬在横脚上方留一道缺口（比例取自原图 67×701） ── */
.li-mark{
  position:absolute;
  left:53.3%; top:20.2%;
  height:51.8vh;
  aspect-ratio:67 / 701;
}
.li-mark svg{
  display:block; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 7px rgba(198,224,255,.55)) drop-shadow(0 0 26px rgba(120,170,255,.34));
}
.li-mark .tube,
.li-mark .foot{transform-box:fill-box}
.li-mark .tube{transform-origin:50% 100%}
.li-mark .foot{transform-origin:0% 50%}

/* 灯亮之后极缓地呼吸一次，像灯管本身的余温 */
.li-mark::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; width:420%; height:112%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(150,190,255,.34), rgba(120,170,255,0) 72%);
  opacity:0;
  animation:liBreathe 9s ease-in-out 2.8s infinite;
}
@keyframes liBreathe{0%,100%{opacity:.18}50%{opacity:.36}}

/* ── 文案列 ── */
.hero-hello .hero-inner{
  position:absolute; right:auto; top:45%; transform:translateY(-50%);
  left:60.2%;
  width:min(29vw, 420px); min-width:0; padding-top:0;
}

/* HELLO：逐字升起，落位时亮一下 */
.hello{
  display:flex; align-items:flex-end;
  font-size:clamp(56px, 6.6vw, 102px);
  font-weight:600; line-height:.9; letter-spacing:-.018em;
  color:var(--beam);
}
.hello .ch{
  display:inline-block; overflow:hidden;
  padding-bottom:.06em; margin-right:-.004em;
}
.hello .ch i{
  display:inline-block; font-style:normal;
  transform:translateY(0);
}
.hello-sub{
  margin-top:20px;
  font-size:clamp(18px, 1.6vw, 25px); font-weight:400;
  line-height:1.55; letter-spacing:.004em;
  color:rgba(234,242,255,.94);
}
.hello-rule{
  display:block; margin-top:24px;
  width:84px; height:1px;
  background:linear-gradient(90deg, rgba(234,242,255,.5), rgba(234,242,255,.05));
  transform-origin:left center;
}
.hello-claim{
  margin-top:22px;
  font-size:clamp(16px, 1.3vw, 19px); font-weight:400;
  line-height:1.95; color:rgba(234,242,255,.8);
}
.hello-claim span{display:block}
.hello-claim b{
  font-weight:400; color:var(--beam-mid);
  text-shadow:0 0 26px rgba(143,182,255,.45);
}
.hello-desc{
  margin-top:18px;
  max-width:30em;
  font-size:14.5px; line-height:2; color:rgba(166,181,208,.76);
}
.hero-hello .hero-cta{margin-top:30px}

/* 光晕：灯管亮起时把这片夜色提亮一点，是“开灯”照到的结果 */
.hero-bloom{
  position:absolute; left:46%; top:47%;
  width:1080px; height:760px;
  margin:-380px 0 0 -540px;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(120,170,255,.22), rgba(90,140,230,.07) 46%, rgba(90,140,230,0) 76%);
  /* 终态即基础态：动画收尾移除 .ent 时不会出现光晕突然熄灭的跳变 */
  opacity:.46;
}

/* —— 遮罩：左保人像，右压出可读的夜 —— */
.hero-hello .hero-veil{
  background:
    linear-gradient(94deg,
      rgba(2,6,15,0) 0%,
      rgba(2,6,15,.05) 32%,
      rgba(2,6,15,.34) 44%,
      rgba(2,6,15,.72) 55%,
      rgba(2,6,15,.88) 68%,
      rgba(2,6,15,.92) 100%),
    linear-gradient(to top, rgba(2,6,15,.82) 0%, rgba(2,6,15,0) 42%);
}
.hero-hello .hero-bg img{object-position:30% 50%}

/* ==========================================================================
   入场编排（只由 JS 加的 .ent 触发；无 JS / 减少动效时静态完整可见）
   ========================================================================== */

/* 1) 通电：先 L 的竖管，横脚向右长出来，最后才是 I —— 中间那道缺口就是它自己 */
.hero-hello.ent .tube{animation:tubeIgnite .6s cubic-bezier(.2,.7,.3,1) both}
.hero-hello.ent .tube-l{animation-delay:.08s}
.hero-hello.ent .foot{animation:footGrow .42s cubic-bezier(.3,.7,.2,1) both;animation-delay:.62s}
.hero-hello.ent .tube-i{animation-delay:.86s}
.hero-hello.ent .li-mark svg{animation:liGlowIn .7s ease-out both;animation-delay:.08s}
.hero-hello.ent .hero-bloom{animation:bloomIn .95s ease-out both;animation-delay:.08s}

@keyframes tubeIgnite{
  0%   {transform:scaleY(.015); opacity:0}
  18%  {transform:scaleY(1);    opacity:.42}   /* 起弧 */
  25%  {opacity:.05}                           /* 灭一下 */
  33%  {opacity:.88}
  40%  {opacity:.15}
  50%  {opacity:1}
  60%  {opacity:.7}
  100% {transform:scaleY(1); opacity:1}
}
@keyframes footGrow{
  from{transform:scaleX(0); opacity:0}
  to  {transform:scaleX(1); opacity:1}
}
@keyframes liGlowIn{
  0%  {filter:drop-shadow(0 0 0 rgba(198,224,255,0)) drop-shadow(0 0 0 rgba(120,170,255,0))}
  58% {filter:drop-shadow(0 0 13px rgba(198,224,255,.95)) drop-shadow(0 0 40px rgba(120,170,255,.6))}
  100%{filter:drop-shadow(0 0 7px rgba(198,224,255,.55)) drop-shadow(0 0 26px rgba(120,170,255,.34))}
}
@keyframes bloomIn{
  0%  {opacity:0}
  16% {opacity:.5}
  24% {opacity:.08}
  36% {opacity:.62}
  44% {opacity:.3}
  68% {opacity:.55}
  100%{opacity:.46}
}

/* 2) 逐字升起 + 落位亮一下 */
.hero-hello.ent .hello .ch i{
  transform:translateY(110%);
  animation:chRise .74s cubic-bezier(.2,.72,.28,1) both;
}
@keyframes chRise{
  0%  {transform:translateY(110%); opacity:.3; text-shadow:none}
  55% {opacity:1}
  72% {text-shadow:0 0 26px rgba(170,205,255,.85)}
  100%{transform:translateY(0); opacity:1; text-shadow:0 0 0 rgba(170,205,255,0)}
}

/* 3) 其余元素依次入场 */
.hero-hello.ent .rise{
  opacity:0;
  animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--d, 0s);
}
.hero-hello.ent .hello-rule{
  animation:ruleGrow .58s cubic-bezier(.3,.7,.2,1) both;
  animation-delay:1.83s;
}
@keyframes riseIn{
  from{opacity:0; transform:translateY(13px)}
  to  {opacity:1; transform:none}
}
@keyframes ruleGrow{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

/* 仅供读屏 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media(max-width:1180px){
  .li-mark{left:52.5%; top:22%}
  .hero-hello .hero-inner{left:59%; width:min(34vw, 400px)}
}

@media(max-width:980px){
  .hero-hello{height:auto; min-height:100svh; display:block}
  .hero-hello .hero-stage{
    position:relative; inset:auto;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:clamp(18px, 4.4vw, 30px);
    min-height:100svh;
    padding:118px 7vw 76px;
  }
  .li-mark{position:static; height:clamp(122px, 20vh, 178px); margin-bottom:2px}
  .li-mark::before{width:300%; height:150%}
  .hero-hello .hero-inner{position:static; transform:none; left:auto; width:100%; max-width:none}
  .hello{font-size:clamp(52px, 12.5vw, 84px)}
  .hello-sub{font-size:clamp(18px, 4.4vw, 23px); margin-top:16px}
  .hello-rule{margin-top:20px; width:64px}
  .hello-claim{font-size:clamp(15px, 3.7vw, 18px); margin-top:18px}
  .hello-desc{font-size:14px; line-height:1.95; margin-top:16px}
  .hero-hello .hero-cta{margin-top:24px}
  .hero-hello .hero-bg img{object-position:26% 32%}
  .hero-hello .hero-veil{
    background:
      linear-gradient(to top,
        rgba(2,6,15,.97) 0%,
        rgba(2,6,15,.94) 30%,
        rgba(2,6,15,.74) 54%,
        rgba(2,6,15,.3) 80%,
        rgba(2,6,15,.06) 100%);
  }
  .hero-bloom{left:50%; top:30%; width:760px; height:560px; margin:-280px 0 0 -380px}
}

@media(prefers-reduced-motion:reduce){
  .hero-hello .li-mark::before{animation:none; opacity:.2}
  .hero-hello .hero-bloom{opacity:.42}
}