/* ═══════════════════════════════════════════════════════
   星座.live · 按钮星辰背景层（v1）
   ───────────────────────────────────────────────────────
   所有按钮在 hover / 选中时，背景变成「活的星空」：

     三层星点（远/中/近）+ 一层星云，各自不同速度缓慢漂移，
     形成视差。星点用 radial-gradient 画（无图片、无外链），
     背景尺寸放大到按钮的 2~3 倍，靠 background-position
     位移产生「星星在走」的错觉。

   为什么不用 canvas / 图片：
     每个按钮一个 canvas 太重（全站几十个按钮），图片有文件
     与编码问题（上一轮 data URI 就坏过）。纯 CSS 渐变最稳。
   ═══════════════════════════════════════════════════════ */

/* ── 星点层定义 ──
   每层用重复的小 radial-gradient 当「星」：
     1px 白点 + 1.5px 淡紫点，错开位置避免规律感 */
@keyframes starDriftNear {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 120px 80px, -90px 60px, 60px -100px; }
}
@keyframes starDriftMid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -80px 60px, 70px -50px; }
}
@keyframes starDriftFar {
  from { background-position: 0 0; }
  to   { background-position: 50px -40px; }
}
@keyframes nebulaBreathe {
  0%   { opacity: .5;  transform: scale(1); }
  50%  { opacity: .85; transform: scale(1.08); }
  100% { opacity: .5;  transform: scale(1); }
}

/* ───────── 导航按钮：hover / 选中 = 星辰背景 ───────── */
nav.screens button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-color:rgba(255,255,255,.03);
}
/* 星辰层：绝对定位铺满，默认透明 */
nav.screens button::before{
  content:"";
  position:absolute;inset:-40%;
  z-index:-1;
  opacity:0;
  border-radius:inherit;
  background-image:
    /* 近层：亮点 */
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 68% 18%, rgba(226,214,255,.9), transparent 100%),
    radial-gradient(1.8px 1.8px at 42% 74%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 86% 62%, rgba(200,186,255,.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 88%, rgba(255,255,255,.8), transparent 100%),
    /* 中层：稍暗星 */
    radial-gradient(1px 1px at 30% 52%, rgba(214,204,255,.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 58% 40%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(.9px .9px at 78% 86%, rgba(206,190,255,.6), transparent 100%),
    radial-gradient(1px 1px at 94% 26%, rgba(255,255,255,.55), transparent 100%),
    /* 星云底色 */
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(168,85,247,.5), transparent 70%),
    radial-gradient(ellipse 55% 70% at 80% 80%, rgba(94,200,255,.34), transparent 72%);
  background-size:
    120px 90px, 150px 110px, 100px 130px, 170px 120px, 130px 100px,
    80px 80px, 95px 95px, 110px 110px, 140px 140px,
    100% 100%, 100% 100%;
  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0,
    0 0, 0 0;
  transition:opacity .35s ease;
  animation:starDriftNear 28s linear infinite;
}
nav.screens button:hover::before{
  opacity:.95;
}
nav.screens button.on::before{
  opacity:1;
  animation-duration:18s;   /* 选中态更活跃 */
}

/* 选中态：底色压一层紫渐变，让星点更清楚 */
nav.screens button.on{
  background:linear-gradient(140deg, rgba(123,77,255,.62), rgba(168,85,247,.42));
}

/* ── 分享/弹窗按钮：星辰直接叠进 background-image 多层 ──
   踩过的坑：原来用 ::after + z-index:-1 画星点，结果被按钮自身的
   半透明深底（rgba(22,13,48,.72)）盖住，星点看不见。
   改为 background-image 多层：星点在底色之上、文字之下，必定可见。 */
.share-btn,
.ls-share,
.pc-share,
#modal-share,
.modal-bar .modal-act{
  background-image:
    /* 近层亮星 */
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,.92), transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 20%, rgba(226,214,255,.88), transparent 100%),
    radial-gradient(1.6px 1.6px at 46% 76%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 86% 60%, rgba(206,190,255,.75), transparent 100%),
    /* 中层 */
    radial-gradient(1px 1px at 12% 82%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(.9px .9px at 56% 44%, rgba(216,204,255,.55), transparent 100%),
    /* 星云 */
    radial-gradient(ellipse 58% 76% at 30% 24%, rgba(168,85,247,.55), transparent 70%),
    radial-gradient(ellipse 50% 66% at 78% 80%, rgba(94,200,255,.36), transparent 72%),
    /* 原底色渐变（压在最下） */
    linear-gradient(180deg, rgba(168,110,255,.30), rgba(123,77,255,.16));
  background-size:
    96px 84px, 118px 98px, 88px 94px, 108px 90px,
    74px 76px, 92px 92px,
    100% 100%, 100% 100%,
    100% 100%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
  animation:starDriftNear 26s linear infinite;
}
.share-btn:hover,
.ls-share:hover,
.pc-share:hover,
#modal-share:hover,
.modal-bar .modal-act:hover{
  /* 悬停时星点更亮、星云更浓 */
  background-image:
    radial-gradient(1.8px 1.8px at 22% 34%, rgba(255,255,255,1), transparent 100%),
    radial-gradient(1.6px 1.6px at 68% 20%, rgba(240,232,255,1), transparent 100%),
    radial-gradient(1.9px 1.9px at 46% 76%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 86% 60%, rgba(226,210,255,.92), transparent 100%),
    radial-gradient(1.2px 1.2px at 12% 82%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 56% 44%, rgba(226,214,255,.76), transparent 100%),
    radial-gradient(ellipse 62% 80% at 30% 22%, rgba(196,132,255,.72), transparent 68%),
    radial-gradient(ellipse 54% 70% at 78% 78%, rgba(126,214,255,.5), transparent 70%),
    linear-gradient(180deg, rgba(190,140,255,.40), rgba(140,90,255,.24));
  animation-duration:16s;
}

/* 主按钮原有的斜向高光带（polish.css 里的 ::after）与新星辰层冲突：
   主按钮改用 ::before 承载星辰，保留 ::after 做高光带 */
.hero-btn::before,
.ph-btn::before{
  content:"";
  /* ── 原来 inset:-40% 向四周撑出 80%，却没有裁剪，星点层边缘露在按钮外面
     = 用户看到的「多了一个白条」（附件1）。
     现在改成 inset:0（与按钮同框）+ 圆角裁剪，星点只在按钮内部，
     不会溢出成白条。父级 .hero-btn 必须是 position:relative 才有裁剪基准。 */
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  border-radius:inherit;
  overflow:hidden;
  clip-path:inset(0 round inherit);
  pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.3px 1.3px at 66% 20%, rgba(226,214,255,.9), transparent 100%),
    radial-gradient(1.6px 1.6px at 44% 76%, rgba(255,255,255,.82), transparent 100%),
    radial-gradient(1.1px 1.1px at 84% 60%, rgba(206,190,255,.75), transparent 100%),
    radial-gradient(ellipse 62% 80% at 30% 22%, rgba(180,120,255,.44), transparent 70%);
  background-size:104px 88px, 128px 104px, 92px 100px, 116px 96px, 100% 100%;
  transition:opacity .32s ease;
  animation:starDriftMid 20s linear infinite;
}
/* 按钮本身要建立裁剪上下文，否则 ::before 的 overflow 管不住 */
.hero-btn, .ph-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-btn:hover::before,
.ph-btn:hover::before{opacity:.9}

/* ── 小胶囊标签（元素/宫位/时辰等）：hover 也带星光 ── */
.pc-elem:hover,
.shc-elem:hover,
.tag:hover{
  background-image:
    radial-gradient(1.2px 1.2px at 30% 30%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 72% 66%, rgba(210,196,255,.78), transparent 100%),
    radial-gradient(ellipse 70% 80% at 40% 40%, rgba(168,85,247,.3), transparent 72%);
  background-size:58px 52px, 66px 60px, 100% 100%;
  animation:starDriftFar 16s linear infinite;
}

/* ── 尊重减少动效 ── */
@media (prefers-reduced-motion: reduce){
  nav.screens button::before,
  .modal-bar .modal-act::after,
  .share-btn::after,
  .pc-share::after,
  .hero-btn::before,
  .ph-btn::before,
  .pc-elem:hover,
  .shc-elem:hover,
  .tag:hover{
    animation:none;
  }
}