/* =====================================================================
   首页 Hero 左侧主视觉 —— 方案 E「彩铃手机 × 流光」（仅 index.html 引入；配合 assets/hero-e.js）
   性能：本文件不使用 filter / backdrop-filter 模糊（静态/动态元素一律用径向渐变代替）
   ===================================================================== */
.hero-e{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.1s var(--ease)}
.hero-e.on{opacity:1}
.fx-cv{position:absolute; inset:0; width:100%; height:100%; display:block}
.phE{position:absolute; inset:0}
.phE__fx{position:absolute; inset:0}   /* 向文字区的渐隐在着色器里做 */
.phE__stage{position:absolute; left:0; top:var(--head-h); bottom:24px; width:56%}
.phE__halo{position:absolute; left:50%; top:50%; width:calc(var(--s)*560px); height:calc(var(--s)*820px); margin:calc(var(--s)*-410px) 0 0 calc(var(--s)*-280px);
  border-radius:50%; background:radial-gradient(closest-side,rgba(5,7,16,.55),rgba(5,7,16,.25) 60%,transparent)}
.phE__floor{position:absolute; left:50%; top:50%; width:calc(var(--s)*470px); height:calc(var(--s)*84px); margin:calc(var(--s)*311px) 0 0 calc(var(--s)*-235px);
  border-radius:50%; background:radial-gradient(closest-side,rgba(90,160,255,.4),rgba(41,151,255,.13) 50%,rgba(41,151,255,.04) 75%,transparent)}
.phE .phB__glow{opacity:.7; background:radial-gradient(closest-side,rgba(41,120,255,.32),rgba(90,70,224,.12) 55%,transparent 80%)}

/* ---------- 手机本体与来电界面 ---------- */
.phB{position:absolute; inset:0; perspective:1400px}
.phB__float{position:absolute; left:50%; top:50%; width:calc(var(--s)*300px); height:calc(var(--s)*620px); margin-left:calc(var(--s)*-150px); margin-top:calc(var(--s)*-310px);
  transform-style:preserve-3d; will-change:transform}
.phB__glow{position:absolute; left:-30%; right:-30%; top:8%; bottom:8%; border-radius:50%; background:radial-gradient(closest-side,rgba(41,120,255,.45),rgba(90,70,224,.18) 55%,transparent);
  transform:translateZ(-80px)}
.phB__shadow{position:absolute; left:8%; right:8%; bottom:calc(var(--s)*-70px); height:calc(var(--s)*40px); border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.35) 55%,transparent)}
.phone{position:absolute; inset:0; font-size:calc(var(--s)*16px); border-radius:3.1em; transform-style:preserve-3d;
  background:linear-gradient(135deg,#5b6170 0%,#23262d 18%,#141518 50%,#2b2f37 82%,#7d8596 100%);
  box-shadow:0 0 0 .06em rgba(255,255,255,.18) inset, 0 2.4em 5em -1.4em rgba(0,0,0,.9), 0 0 0 .04em #000}
.phone__bezel{position:absolute; inset:.32em; border-radius:2.82em; background:#000; box-shadow:0 0 0 .05em rgba(255,255,255,.06)}
.phone__screen{position:absolute; inset:.62em; border-radius:2.55em; overflow:hidden; background:#05060b; isolation:isolate}
.phone__screen canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.phone__shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 28%,rgba(0,0,0,0) 45%,rgba(0,0,0,0) 58%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.82) 100%)}
.phone__island{position:absolute; left:50%; top:1.05em; width:5.6em; height:1.65em; margin-left:-2.8em; border-radius:1em; background:#000; z-index:3}
.phone__ui{position:absolute; inset:0; z-index:2; color:#fff; font-family:var(--f-body); text-align:center}
.ui-status{position:absolute; left:1.6em; right:1.6em; top:.85em; display:flex; justify-content:space-between; font:600 .78em/1 var(--f-head)}
.ui-status i{display:inline-flex; gap:.25em; align-items:center; font-style:normal}
.ui-sig{display:inline-flex; align-items:flex-end; gap:.12em; height:.8em}
.ui-sig b{display:block; width:.2em; background:#fff; border-radius:.05em}
.ui-bat{width:1.6em; height:.78em; border:.08em solid rgba(255,255,255,.55); border-radius:.22em; padding:.1em}
.ui-bat::before{content:""; display:block; height:100%; width:78%; background:#fff; border-radius:.1em}
.ui-top{position:absolute; left:0; right:0; top:3.5em}
.ui-chip{display:inline-flex; align-items:center; gap:.45em; font-size:.68em; letter-spacing:.08em; padding:.42em .9em; border-radius:2em; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16)}
.ui-chip::before{content:""; width:.55em; height:.55em; border-radius:50%; background:#30d158; box-shadow:0 0 .6em #30d158; animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.ui-name{font:600 1.85em/1.15 var(--f-head); margin-top:.45em; letter-spacing:.02em; text-shadow:0 2px 18px rgba(0,0,0,.5)}
.ui-sub{font-size:.78em; color:rgba(255,255,255,.72); margin-top:.35em; letter-spacing:.04em}
.ui-ad{position:absolute; left:1.5em; right:1.5em; bottom:9.4em; text-align:left}
.ui-ad__t{display:flex; align-items:center; gap:.5em; font-size:.66em; color:rgba(255,255,255,.82); letter-spacing:.06em}
.ui-ad__t em{font-style:normal; font-size:.86em; padding:.12em .45em; border-radius:.3em; border:1px solid rgba(255,255,255,.4); letter-spacing:.1em}
:lang(en) .ui-ad__t{font-size:.6em; letter-spacing:.01em; white-space:nowrap}
:lang(en) .ui-ad__t em{letter-spacing:.04em}
.ui-bar{height:.16em; margin-top:.55em; border-radius:1em; background:rgba(255,255,255,.18); overflow:hidden}
.ui-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#2997ff,#9fd0ff); border-radius:1em}
.ui-btns{position:absolute; left:2.2em; right:2.2em; bottom:2.5em; display:flex; justify-content:space-between}
.ui-btn b{font-weight:400}
.ui-btn{display:flex; flex-direction:column; align-items:center; gap:.45em; font-size:.7em; color:rgba(255,255,255,.88)}
.ui-btn span{position:relative; width:5.6em; height:5.6em; border-radius:50%; display:grid; place-items:center}
.ui-btn svg{width:2.4em; height:2.4em; fill:#fff}
.ui-btn--no span{background:#ff3b30}
.ui-btn--no svg{transform:rotate(135deg)}
.ui-btn--ok span{background:#30d158}
.ui-btn--ok span::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(48,209,88,.6); animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}100%{box-shadow:0 0 0 1.6em rgba(48,209,88,0)}}
.ui-home{position:absolute; left:50%; bottom:.7em; width:7.5em; height:.3em; margin-left:-3.75em; border-radius:1em; background:rgba(255,255,255,.85)}
.phone__glare{position:absolute; inset:.62em; border-radius:2.55em; z-index:4; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 44%,rgba(255,255,255,.03) 52%,transparent 60%); background-size:260% 100%}
.phone__edge{position:absolute; inset:0; border-radius:3.1em; pointer-events:none; z-index:5;
  background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 20%,transparent 80%,rgba(255,255,255,.18)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:.07em}
.phone__btn{position:absolute; width:.22em; border-radius:.2em; background:linear-gradient(90deg,#2a2d34,#6d7484)}
@media (prefers-reduced-motion:reduce){ .ui-chip::before,.ui-btn--ok span::after{animation:none} }


/* 启用 E 时首页 Hero 手机端：手机在上、文字在下 */
@media(max-width:760px){
  .hero--e{align-items:flex-end}
  /* 手机端：先为手机动效预留固定高度，文字始终排在其下方，不再按屏高比例挤压（避免 iOS / 矮屏重叠） */
  .hero--e{--phH:clamp(280px,78vw,420px)}
  .hero--e .hero__in{padding-block:calc(var(--head-h) + var(--phH) + 8px) 64px}
  .hero--e .hero__in::before{content:""; position:absolute; left:0; right:0; top:calc(var(--head-h) + var(--phH) - 24px); bottom:0; z-index:-1;
    background:linear-gradient(180deg,transparent,rgba(6,7,13,.55) 30%,rgba(6,7,13,.65) 72%,#000 100%); pointer-events:none}
  .hero--e .hero__cta{margin-top:26px}
  .hero--e .hero__scroll{display:none}
  .phE__stage{width:auto; right:0; top:calc(var(--head-h) - 6px); bottom:auto; height:var(--phH)}
}