/* ═══════════════════════════════════════════════════════
   星座.live · 块状卡片悬停星云（配 nebula-cards.js）
   ───────────────────────────────────────────────────────
   悬停时卡片内部浮现星云 + 星点，缓慢漂移；
   同时边框亮起、外发光加强，与按钮的星辰语言统一。

   实现要点：
     星云放在 ::before，用 background-image 多层径向渐变，
     因为卡片半透明底色会盖住 z-index:-1 的层（分享按钮上
     踩过这个坑），所以直接叠进 background-image 最稳。
     但卡片本身已有多层背景（很多卡有自带渐变），
     直接覆盖会破坏原样式 —— 所以用 ::before 绝对定位，
     z-index:0，并把卡片内的直接子元素抬到 z-index:1。
   ═══════════════════════════════════════════════════════ */

.nx-card{
  position:relative;
  transition:border-color .26s ease, box-shadow .26s ease;
}
/* 已删：.nx-card > *{position:relative;z-index:1}
   这条规则会把卡片内所有 absolute 装饰层（.ph-glow 等）强制变成
   relative，它们的高度进入正常流 —— 实测 .ph-card 悬停高度 324→524。 */

/* ── 星云旋转层（.nx-glow::before）──
   两团星云绕着卡片中心旋转，而不是平移。
   为什么不能用 background-position 做旋转：
     background-position 只能平移，两个光斑会「往里收」或「往外散」，
     看起来像在挤压卡片边界；用户明确要求「运动可以是旋转，不用往内收」。

   ── 尺寸约束：绝不超出卡片边界 ──
   初版用 inset:-45%（比卡片大一圈），旋转时光斑会甩到卡片外面。
   用户指出「旋转对了，但是不要超出背景的 block」。
   现在改为 inset:0 —— 旋转层与卡片等大，并且 .nx-glow 自身
   overflow:hidden 裁切，光斑永远出不去。
   为了在有限空间内仍能看到旋转，把光斑半径收小、贴近圆心。 */
.nx-card > .nx-glow{
  overflow:hidden;      /* 裁掉旋转层溢出的部分 */
}
/* 注意：下面 .nx-card > .nx-glow 那条规则里写了 opacity:0（默认隐身）。
   星云旋转层 ::before 与它同在 .nx-glow 上，所以「旋转」和「显隐」是两件事：
     旋转 → 一直转（肉眼不可见也在转，代价为零）
     显隐 → 由 opacity 控制
   大 block 用 .big-block 抬高到常显，小卡仍靠 hover 显隐。 */
/* ── 星空层（对齐 MBTI 卡的观感）───────────────────────────
   参照「MBTI 背景的效果很好」那张卡：
     · 稀疏星点，不密
     · 右侧一小片柔和星云雾
     · 清晰不糊、不抢文字

   实现分两层：
     ::before → 旋转的星云雾（柔雾，不是圆环）
     本体     → 静态星点（清晰锐利，不旋转）

   之前做成两大团「环形光」观感偏差大（太规则、太抢眼），已废弃。
   ─────────────────────────────────────────────────────── */
/* ── 星云背景：直接用网站自己的星云图旋转 ──────────────────
   用户要求：「只需要用网站打的背景图片，做一些旋转的动效。网站背景本来就是星云」

   之前用 CSS 渐变现画漩涡，始终没有「星云」的真实质感。
   现在改用 www/art/galaxy-hero.webp（网站主视觉那张星系星云图），
   做法：
     · 作为 ::before 的 background-image
     · 圆形裁切 + 径向遮罩，只保留中心一团
       （原图是非无缝图，整张旋转会露出硬接缝；
         用圆形遮罩把边缘全部淡掉，接缝就看不见了）
     · 缓慢自转 60s 一圈
     · 用 screen 混合，让它叠在卡片底色上透出星云

   这样得到的是真实星云质感 + 旋转动效，不再是自己搭的假漩涡。
   ─────────────────────────────────────────────────────── */
.nx-card > .nx-glow::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* ── 星空背景：12 张 AI 生成的星云图，每次悬停换一张 ──
     用户要求：「重新生成12张清晰的星空图片，不要叠加任何的滤镜。
                每次扫过去换不同的图片」「在不同的格子，图片不要变形」

     图片：www/art/starfield_final/star_01..12.png（1024×1024，Agnes 免费档生成）
     换图：由 nebula-cards.js 在每次 hover 时随机挑一张写进 --nx-img 变量
     防变形：background-size:cover + center，等比裁切，绝不拉伸
   */
  inset:0;
  overflow:hidden;
  background-image:var(--nx-img, url("art/starfield_web2/star_01.webp"));
  background-size:cover;        /* 等比铺满，任何格子都不变形 */
  background-position:center;   /* 居中裁切 */
  background-repeat:no-repeat;
  /* ── 去掉曝光叠加 ──
     用户指出：「移动到框的时候，曝光、叠加太厉害了，很模糊」。
     根因：.nx-glow 上有 mix-blend-mode:screen —— 星点图本身很亮，
     screen 混合会把它和卡片底色「相加」，越叠越白越糊。
     现在改成 normal，图片原样铺上。

     ⚠️ 这里绝对不能写 opacity —— 显隐由父级 .nx-glow 控制。
     踩过的坑：曾在此处写 opacity:0（想「默认隐身」），结果
     悬停规则只管父级 .nx-glow 的 opacity，::before 自己永远是 0，
     星云图**完全看不到**（用户：「完全看不到」）。 */
  mix-blend-mode:normal;
  box-shadow:none;
  animation:nxCloudDrift 90s ease-in-out infinite alternate;
  will-change:background-position;
}

@keyframes nxNebulaRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ── 星云缓慢漂移 ──
   用 background-position 微移（±6%），产生「星云在流动」的感觉。
   幅度小，cover 模式下不会露出图片边界。 */
@keyframes nxCloudDrift {
  from { background-position:center; }
  to   { background-position:44% 46%; }
}


/* 星云层 */
.nx-card > .nx-glow{
  position:absolute;inset:0;
  /* z-index:0 —— 卡片建立了 position:relative 层叠上下文，
     0 位于背景之后、内容之前。文字用 z-index:1 显式抬起（见下一条规则）。 */
  z-index:0;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:normal;
  transition:opacity .34s ease;
}

/* ── 悬停才显示星空（小卡片）──
   这是「鼠标移过去才有」的核心规则。之前它被误删，导致：
     · 小卡片悬停无反应
     · 只有大 block 常显（因为 .big-block 设了 opacity:.55）
   全站实测：small_with_glow = 0，big_with_glow = 92~123，完全反了。
   补回这条后：默认全隐身，悬停到小卡才淡入。 */
.nx-card:hover > .nx-glow{opacity:1}

/* 大 block 例外：即使悬停也不显示（见下方 .big-block 规则） */
/* ── 星云显隐规则（全站统一）─────────────────────────────
   用户明确要求：
     ① 星空**只在鼠标移过去时**出现，不常驻；
     ② **大 block 不要有**（大区块盖住星空会糊成一片）；
     ③ 只有小卡片（12维方块、日历格、星座卡等）悬停才亮。

   之前反了：.big-block 被设成常显 opacity:.55，结果每屏 90~120 个大块
   全在发光，小卡反而看不见（全站实测 glow_visible 92~123，big 占比 100%）。

   现在的规则：
     · 默认：所有 .nx-glow 都是 opacity:0（隐身）
     · 悬停：小卡 opacity:1
     · 大 block：任何时候都不显示（opacity:0 恒定）
   ─────────────────────────────────────────────────────── */
.nx-card.big-block > .nx-glow,
.nx-card.big-block:hover > .nx-glow{
  opacity:0 !important;      /* 大 block 永不显示星空 */
  animation:none;
}

/* 卡片本体的悬停光效
   只保留「边框略亮」这一个轻反馈。
   已删：box-shadow 外发光（沿圆角矩形轮廓走一圈，四角全亮 = 方块感）、
        transform 位移（会带动整块的边缘一起动，强化块状）。
   光感全部交给星云层自己，卡片本体保持安静。 */
.nx-card:hover{
  /* ── 边框：不能写 inherit！──
     原来写 `border-color:inherit`，意思是「继承父级的 color（文字色）」，
     而全站文字色是 --ink:#f2eeff（近白）→ 悬停瞬间边框变成 rgb(242,238,255)。
     用户反馈：「鼠标移到 block 的时候，白线才出现」「几乎所有都这样」，
     根因就是这一行 —— .nx-card 是全站通用类，影响 20+ 个组件。

     正确做法：明确给紫色，且比静止态略亮，形成「紫边亮起」的反馈。 */
  border-color:rgba(169,125,255,.72);
  /* ── 回到「分享按钮」那种背景模式（纯 CSS 星云光斑，不用图片）──
     用户要求：「全部用回『分享』背景图模式，图片后续再研究」。

     分享按钮的背景长这样：
       · 深紫底 + 两团柔和的径向光晕（紫+蓝）
       · 一片极细的星点（radial-gradient 画的小点）
       · 整体半透明、轻盈，不抢文字

     所以这里把图片换回多层 radial-gradient：
       ① 左上角紫色柔光团
       ② 右下角蓝色柔光团
       ③ 四层大小不一的星点（稀疏，符合「空旷星空」）
     优点：零网络请求、零体积、永远不会有加载延迟或变形问题。 */
  background-image:
    /* 星点层（稀疏，大小错开） */
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,.82), transparent 100%),
    radial-gradient(1.1px 1.1px at 68% 18%, rgba(226,214,255,.72), transparent 100%),
    radial-gradient(1.3px 1.3px at 42% 74%, rgba(255,255,255,.66), transparent 100%),
    radial-gradient(1px 1px at 84% 58%, rgba(206,190,255,.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 84%, rgba(255,255,255,.56), transparent 100%),
    radial-gradient(.9px .9px at 56% 40%, rgba(220,208,255,.48), transparent 100%),
    /* ── 金色星云：从「右下角一团」改成「右半边一片」──
       用户要求：「默认状态是一半紫色，一半金色 旋转」。

       关键差别：原来是两团集中在角落的光斑（左上紫 + 右下金），
       视觉上中间是空的、两头各一个点，说不上「一半一半」。
       现在改成左右各占半边的椭圆大光带：
         · 左半边 ellipse 90% 120% at 10% 50% → 覆盖整条左半侧
         · 右半边 ellipse 90% 120% at 90% 50% → 覆盖整条右半侧
       两者在中线附近自然交叠，旋转时这条紫金分界线跟着扫过，就是
       「一半紫一半金在转」的效果。

       金色仍比紫色淡一档（暖色在暗底更跳），保证视觉等重。 */
    radial-gradient(ellipse 90% 120% at 90% 50%,
      rgba(255,222,150,.42) 0%,
      rgba(240,190,95,.19) 48%,
      transparent 78%),
    /* 金色星团里的细碎星点（保留，增加星团质感） */
    radial-gradient(1.6px 1.6px at 72% 76%, rgba(255,238,190,.72), transparent 100%),
    radial-gradient(1.3px 1.3px at 84% 82%, rgba(250,220,150,.66), transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 86%, rgba(248,225,168,.62), transparent 100%),
    radial-gradient(1.2px 1.2px at 86% 74%, rgba(240,205,130,.58), transparent 100%),
    radial-gradient(1px 1px at 70% 84%, rgba(245,225,175,.54), transparent 100%),
    /* 紫色星云（左上）—— 可见半径放宽到 80%，面积与金色对等 */
    /* 紫色星云：覆盖左半边（与右侧金色对半） */
    radial-gradient(ellipse 90% 120% at 10% 50%, rgba(150,96,246,.46), transparent 80%),
    /* 底色 */
    linear-gradient(160deg, rgba(30,18,62,.72), rgba(14,8,34,.82)) !important;
  background-size:
    96px 88px, 118px 102px, 88px 94px, 104px 90px, 78px 84px, 92px 92px,
    100% 100%,
    132px 118px, 104px 96px, 116px 106px, 88px 82px, 76px 72px,
    100% 100%, 100% 100% !important;
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,
    center,
    0 0,0 0,0 0,0 0,0 0,
    center, center !important;
  background-repeat:
    /* 6 层普通星点 → repeat */
    repeat, repeat, repeat, repeat, repeat, repeat,
    /* 金色星云 → no-repeat */
    no-repeat,
    /* 5 层金色碎星点 → repeat */
    repeat, repeat, repeat, repeat, repeat,
    /* 紫色星云 + 底色 → no-repeat */
    no-repeat, no-repeat !important;
  animation: nxStarTwinkle 1.5s linear infinite !important;
}

/* ── 星点漂移（3 秒一圈，用户要求「旋转再快些」）──
   层数已从 9 层增加到 16 层（新增金色星团 3 层核心 + 5 层碎星点），
   所以关键帧的 background-position 也要写 16 个值，
   前 6 层星点 + 后 5 层金色碎星点漂移，金色核心 3 层和紫色星云、底色固定。 */
@keyframes nxStarTwinkle{
  from{
    background-position:
      0 0,0 0,0 0,0 0,0 0,0 0,
      center,
      0 0,0 0,0 0,0 0,0 0,
      center, center;
  }
  to{
    background-position:
      56px 44px,-48px 36px,40px -48px,-36px 40px,32px 48px,-28px 32px,
      center,
      48px 40px,-40px 32px,36px -40px,-32px 36px,28px 44px,
      center, center;
  }
}

/* ── 大 block 不应用这套背景 ──
   用户指出「大 block 不要有这张切换，科普里面三模式就出问题了」。

   注意：这里原来还带了 background-color:rgba(22,14,48,.62) !important，
   结果 hero（也带 big-block）鼠标移过去就出现一块半透明底色 = 用户说的框。
   现在把 background-color 也设为 transparent，并从源头避免 hero 命中本规则。 */
.nx-card.big-block:hover{
  background-image:none !important;
  background-color:transparent !important;
  animation:none !important;
}
/* hero 是「大 block」但不是卡片，不该有任何背景 */
.nx-card.hero:hover,
.nx-card.hero{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* ── 丝滑过渡 ──
   图片本身早在预加载阶段就进了缓存（12 张合计 1.19MB），
   hover 只是让 background-image 生效，无网络请求。
   这里加一层过渡让出现更柔和：底色在 160ms 内渐变，
   避免「啪」地一下跳出来（用户要求「要丝滑，不要移过去才感觉到图片显示」）。
   注意：background-image 本身不可过渡，所以过渡的是 border-color 与
   background-color（图片跟着底色一起淡入的观感）。 */
.nx-card{
  transition:border-color .16s ease, background-color .16s ease,
             box-shadow .16s ease;
}

/* ── 小格子：同样用星云图，不覆盖成星点 ──
   原来这里覆盖 background-image 为 3 层星点 + repeat，
   会把新加的星云图盖掉（实测 a12-cell 显示的是平铺小方块）。
   现在只调整尺寸策略，图片保持一致。 */
.nx-card.mcell > .nx-glow,
.nx-card.daydim-item > .nx-glow{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ── SVG 螺旋层已停用 ──
   现在星云直接用 www/art/galaxy-hero.webp 旋转（真实星云质感），
   不再需要自绘的 SVG 螺旋臂（那个视觉复核判为「没有星云感」）。
   JS 里注入的 .nx-spiral 保留结构但隐藏，避免改动过大。 */
.nx-card > .nx-glow > .nx-spiral{
  display:none;
}

/* 尊重减少动效 */
@media (prefers-reduced-motion: reduce){
  .nx-card > .nx-glow > .nx-spiral{animation:none}
}

/* 触屏：无 hover，点按时短暂点亮 */
@media (hover: none){
  .nx-card:active > .nx-glow{opacity:.9}
  .nx-card:hover{transform:none}
}