/* ============================================================
   hekuan 个人网站 · 全屏生成式数字艺术作品
   ------------------------------------------------------------
   图层结构：
     1) body 深墨底色 + 静态渐变（无 JS 时的兜底画面 body::after）
     2) #stage 全屏动态画布（JS 运行时覆盖兜底画面）
     3) .site-footer 备案页脚（页面唯一可见文字）
   依赖：无外部字体 / 图片 / 第三方资源
   ============================================================ */

:root {
  --bg-base: #05070d;
  --ink-indigo: rgba(38, 52, 104, 0.30);
  --ink-deep-blue: rgba(24, 44, 88, 0.30);
  --text-filing: rgba(205, 218, 238, 0.68);
  --text-filing-hover: rgba(230, 239, 251, 0.96);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 90% 70% at 18% 8%, var(--ink-indigo), transparent 62%),
    radial-gradient(ellipse 80% 65% at 88% 92%, var(--ink-deep-blue), transparent 60%);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

/* ------------------------------------------------------------
   无 JS / 脚本异常时的静态兜底画面。
   仅在画布未绘制时可见；JS 正常工作后画布为不透明层，将其覆盖。
   （同心干涉细环 + 银月光晕，纯 CSS 程序生成，无任何外部资源）
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 63% 44%,
      rgba(214, 228, 246, 0.13), rgba(214, 228, 246, 0.04) 38%, transparent 52%),
    repeating-radial-gradient(circle at 63% 44%,
      transparent 0 38px, rgba(148, 190, 235, 0.05) 38px 40px,
      transparent 40px 80px, rgba(148, 190, 235, 0.032) 80px 82px),
    repeating-radial-gradient(circle at 63% 44%,
      transparent 0 46px, rgba(222, 186, 128, 0.028) 46px 47.5px),
    radial-gradient(ellipse 52% 38% at 63% 44%,
      rgba(180, 200, 230, 0.10), transparent 60%);
}

/* ------------------------------------------------------------
   舞台与画布
   ------------------------------------------------------------ */
#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  touch-action: none;   /* 允许触屏拖动只作用于扰动，不引发页面滚动 */
}

#art {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   备案页脚 —— 页面唯一可见文字（底部居中，安全区自适应）
   ------------------------------------------------------------ */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(10px + env(safe-area-inset-bottom, 0px));
  /* 不拦截画布交互；仅链接本身可点击 */
  pointer-events: none;
}

.site-footer a {
  pointer-events: auto;
  color: var(--text-filing);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: color 0.45s ease;
}

.site-footer a:hover { color: var(--text-filing-hover); }

.site-footer a:focus-visible {
  outline: 1px solid rgba(170, 196, 230, 0.7);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: rgba(120, 160, 210, 0.28); }