/* =========================================================================
   球内光刃光球 · 已验证视觉（_blade_g.png）：无边框 / 刀片式锋利动感 / 暖金点缀
   开屏：深色玻璃球（.orb-heart）；此岸「望舒」：浅色珍珠（.companion-light .orb-pearl）
   本文件在 index.html 中最后加载，用于覆盖 intro.css / theme.css 的旧等离子球体样式。
   ========================================================================= */

/* ---------- 开屏：深色玻璃球（灵魂化身）---------- */
.orb-heart{
  position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 44%,#17284e 0%,#0b152e 36%,#050a16 60%,rgba(4,8,16,.42) 80%,rgba(4,8,16,0) 100%);
  box-shadow:0 0 70px #4ea8d833,inset 0 10px 30px rgba(255,255,255,.05),inset 0 -18px 36px rgba(80,158,212,.14);
  filter:none;animation:none!important;
}
.orb-heart::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 64% 44% at 36% 22%,rgba(196,216,240,.10),transparent 70%),
             radial-gradient(circle at 50% 50%,transparent 24%,rgba(2,4,10,.34) 60%,rgba(2,4,10,.8) 100%);
}
.orb-heart svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 36%,rgba(0,0,0,.62) 66%,rgba(0,0,0,0) 94%);
          mask:radial-gradient(circle at 50% 50%,#000 0 36%,rgba(0,0,0,.62) 66%,rgba(0,0,0,0) 94%);
}

/* ---------- 此岸「望舒」：浅色珍珠 ---------- */
.companion-light span.orb-pearl{
  position:absolute;left:15px;top:15px;width:150px;height:150px;border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 40% 30%,#ffffff 0%,#eaeef6 40%,#d2d9e5 72%,rgba(200,208,222,.5) 88%,rgba(200,208,222,0) 100%);
  box-shadow:0 0 60px #cdd9e8aa,inset 0 12px 28px rgba(255,255,255,.9),inset 0 -18px 32px rgba(148,162,188,.2);
  animation:none!important;filter:none;
}
.companion-light span.orb-pearl svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:normal;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 50%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 99%);
          mask:radial-gradient(circle at 50% 50%,#000 0 50%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 99%);
}
.companion-light b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#9fb0c8;font-size:20px;opacity:.45;pointer-events:none;z-index:4;
}

/* ---------- 光刃动效（开屏 / 此岸共用）---------- */
.blade{transform-box:view-box;transform-origin:100px 100px;will-change:transform}
.k1{animation:f1 17s ease-in-out infinite}
.k2{animation:f2 21s ease-in-out infinite}
.k3{animation:f3 25s ease-in-out infinite}
.k4{animation:f4 19s ease-in-out infinite}
.k5{animation:f5 23s ease-in-out infinite}
@keyframes f1{0%,100%{transform:rotate(0)}50%{transform:rotate(24deg)}}
@keyframes f2{0%,100%{transform:rotate(0)}50%{transform:rotate(-30deg)}}
@keyframes f3{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes f4{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
@keyframes f5{0%,100%{transform:rotate(0)}50%{transform:rotate(32deg)}}

@media(prefers-reduced-motion:reduce){
  .blade{animation:none!important}
}

/* =========================================================================
   苹果风落地（降噪 / 更小导航 / 胶囊按钮）——保留品牌墨蓝·金调性
   ========================================================================= */

/* ---------- 底部导航：更小、线性图标、无底色选中 ---------- */
.tabbar{
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  border-top:1px solid #e6e6ea;box-shadow:none;
}
.tabbar a{
  min-height:52px;padding:7px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;letter-spacing:.2px;color:#86868b;position:relative;
}
.tabbar a span{display:block;line-height:0;margin:0}
.tabbar a svg{width:24px;height:24px;stroke-width:1.6;display:block}
.tabbar a small{display:none}
.tabbar a.active{color:var(--ink);font-weight:600}
.tabbar a.active::after{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:3px;background:var(--gold);
}

/* ---------- 主按钮：iOS 胶囊 ---------- */
.btn{border-radius:980px}
.btn.minimal,.btn.ghost{border-radius:980px}

@media(prefers-reduced-motion:reduce){
  .tabbar a.active::after{display:none}
}