/* ============================================================
   melostra — 星云极光主题首页
   纯静态：满屏 Canvas + 装饰层（噪点 / 暗角）+ 无 JS 兜底
   ============================================================ */

:root {
  --space:   #070314;  /* 近黑深空底色 */
  --magenta: #ff9ae0;  /* 渐变起点 · 品红 */
  --violet:  #a98bff;  /* 渐变中点 · 紫   */
  --cyan:    #5fe0ff;  /* 渐变终点 · 青   */
  --word-half: 60px;   /* melostra 半字高，由 JS 按视口实时写入 */
  --lift: 0px;         /* 整组上抬量（让 melostra+副标题 居中），由 JS 写入 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--space);
  overflow: hidden;                 /* 单屏，无滚动 */
  overscroll-behavior: none;        /* 禁掉移动端下拉回弹 */
}

body {
  /* 动态视口单位：移动端地址栏伸缩时不跳 */
  height: 100dvh;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 主画布：铺满视口、禁用触摸手势避免误触/滚动 ---- */
#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 胶片噪点颗粒：低透明度叠加，去渐变 banding + 加质感 ---- */
.grain {
  position: fixed;
  inset: -50%;                      /* 放大以免边缘露白 */
  pointer-events: none;
  z-index: 2;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 暗角：聚焦中心，压暗四周 ---- */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 120% at 50% 50%,
              transparent 52%,
              rgba(3, 1, 10, 0.45) 84%,
              rgba(2, 1, 7, 0.78) 100%);
}

/* ---- 无 JS / 字体异常时的静态兜底 ---- */
.fallback {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.2rem, 11vw, 6rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  background: linear-gradient(120deg, var(--magenta), var(--violet) 45%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(169, 139, 255, 0.35);
}

/* ---- 副标题：落在 melostra 下方，低调淡入 ---- */
.tagline {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  margin: 0;
  /* 垂直落点 = 中心 + 半个字高 + 间距 − 整组上抬量，与 melostra 同步上移保持居中 */
  transform: translateY(calc(var(--word-half) + 30px - var(--lift)));
  text-align: center;
  font-weight: 300;
  font-size: clamp(0.82rem, 2.4vw, 1.3rem);
  letter-spacing: 0.42em;
  padding-left: 0.42em;             /* 补偿尾字字距，保持视觉居中 */
  color: rgba(214, 222, 255, 0.66); /* 比主字低调：无渐变、低透明度 */
  text-shadow: 0 0 22px rgba(169, 139, 255, 0.28);
  pointer-events: none;
  white-space: nowrap;
  /* 初始隐藏，melostra 成形后淡入并去模糊 */
  opacity: 0;
  filter: blur(7px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}
.tagline.show { opacity: 1; filter: blur(0); }

/* ---- ICP 备案号：叠在画布之上，底部居中、低调可点 ---- */
.beian {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 3;
  text-align: center;
  pointer-events: none;             /* 容器不拦截画布的触摸视差 */
  animation: beian-in 1.2s ease 1.6s both;
}
.beian a {
  pointer-events: auto;             /* 链接本身可点击 */
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(214, 222, 255, 0.5);
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.beian a:hover,
.beian a:focus-visible {
  color: rgba(228, 234, 255, 0.92);
  text-shadow: 0 0 16px rgba(169, 139, 255, 0.45);
}

@keyframes beian-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 尊重"减少动态效果"偏好：颗粒会随机感强，关掉它 */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .beian { animation: none; }       /* 直接显示，不淡入 */
  .tagline { transition: none; filter: none; } /* 直接显示，不做动效 */
}