/* =========================================================
   Dark mode moon (替代暗色光团)
   - .bg-moon：固定在中上方的月亮 PNG
   - .bg-moon__halo：类似原光团的描边/光晕
   - 默认只在暗色模式显示（亮色隐藏）
   ========================================================= */

.bg-moon{
  position: fixed;
  left: 50%;
  top: var(--moon-home-top);
  transform: translate3d(-50%, 0, 0) scale(var(--moon-scale, 1));
width: var(--moon-size);
  height: var(--moon-size);

  /* 层级：在背景之上、内容之下、导航之下 */
  z-index: 2;
  pointer-events: none;

  /* 亮色默认隐藏；暗色再开启 */
  display: none;
  opacity: var(--moon-opacity);

  /* 主页->贴顶：用 top/transform 做位移动画（不裁切，避免 PNG 阴影被剪出方框） */
  transition: top .35s ease, transform .35s ease, opacity .25s ease;
  will-change: top, transform;
}


/* 只在暗色模式显示月亮 */
[data-theme="dark"] .bg-moon{
  display: block;
}

/* Hide the persistent top moon during dark -> light transition overlay */
body.theme-transitioning-to-light .bg-moon{
  display: none;
}

/* Hide persistent moon during light -> dark transition to avoid double-moon overlap */
body.theme-transitioning-to-dark .bg-moon{
  display: block;
  opacity: 0;
}


body.moon-docked .bg-moon{
  top: var(--moon-docked-top);
  transform: translate(-50%, -50%) scale(var(--moon-scale, 1));
}
/* 光晕：用径向渐变 + 模糊做“描边感” */
.bg-moon__halo{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--moon-halo-size);
  height: var(--moon-halo-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255, var(--moon-halo-opacity)), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(124,77,255, .22), transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(0,212,255, .18), transparent 70%);
  filter: blur(18px);
}

/* 月亮 PNG：多层 drop-shadow 造“描边 + 霓虹边缘” */
.bg-moon__img{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.22))
    drop-shadow(0 0 30px rgba(124,77,255,.18))
    drop-shadow(0 0 46px rgba(0,212,255,.14));

  transform: scale(var(--moon-img-scale, 1));
  transform-origin: center;
  will-change: transform, opacity;
}


/* 暗色模式下用月亮做主视觉，光团隐藏，避免“意义不明的彩色雾” */
[data-theme="dark"] .bg-blobs{
  display:none;
}


/* Light theme 下不适合用 screen（容易把整页洗白），改成正常混合 */
[data-theme="light"] .blob{
  mix-blend-mode: normal;
}


/* =========================================================
   Footer
   ========================================================= */
.footer{
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align:center;
}
.footer .dot{ margin: 0 10px; opacity:.65; }

/* =========================================================
   FX toggle support
   - body 加上 .fx-off 后，关闭/弱化背景特效
   - 这个 class 由 JS 控制（toggleFx 按钮）
   ========================================================= */
.fx-off .scanlines{ display:none; }
/* 关闭月亮/光团等背景装饰 */
.fx-off .bg-moon{ display:none; }
.fx-off .bg-blobs{ display:none; }
.fx-off #stars{ opacity:.35; }

/* =========================================================
   Responsive
   - 小屏幕调整布局：两栏变一栏、三列变一列
   ========================================================= */
@media (max-width: 980px)
{
  .me{ grid-template-columns: 1fr; }
  .floating-cards{ grid-template-columns: 1fr 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .links{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .section__head{ flex-direction: column; align-items:flex-start; }
}