/* 品牌 logo "RELll" 专用字体：Libre Baskerville 斜体（SIL OFL 开源可商用，授权见 fonts/OFL-LibreBaskerville.txt），
   只保留 R E L l 四个字母（约 1.6KB）。斜体小写 l 底部带弯钩，不会被看成数字 1。三个页面都加载本文件，所以放在这里。 */
@font-face { font-family: "RELll Logo"; src: url("/static/fonts/relll-logo.woff2") format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap; }
/* 深空背景：首页、登录页共用。所有可调参数都在 :root 里。 */
/* ============ 背景 · 艺术深空 ============
   纯 CSS：多层柔和径向渐变 + 球后极弱的青绿环境光 + 静态雾化纹理 + 胶片颗粒 + 电影暗角。
   所有可调参数集中在这里（颜色写成 R,G,B，方便配合透明度使用，老浏览器也支持）。 */
:root{
  /* 主色 */
  --space-deep:#080E19;           /* 深空黑蓝：底色 */
  --space-midnight:20,40,58;      /* 午夜蓝 #14283A：大面积层次 */
  --space-teal:22,76,75;          /* 暗青绿 #164C4B：环境光、局部层次 */
  --space-smoke:55,49,71;         /* 烟紫灰 #373147：微弱点缀 */
  /* 强度（0～1） */
  --layer-midnight:.9;            /* 午夜蓝层 */
  --layer-teal:.58;               /* 青绿层 */
  --layer-smoke:.42;              /* 烟紫灰点缀 */
  --glow-strength:.62;            /* 球后环境光的中心亮度（0 = 关掉） */
  --glow-size:74vmax;             /* 环境光范围 */
  --fog-opacity:.2;               /* 雾化纹理 */
  --grain-opacity:.05;            /* 胶片颗粒 */
  --vignette:.7;                  /* 四周暗角深度 */
  --breath-low:.78;               /* 呼吸：最暗时环境光的倍数 */
  --breath-time:22s;              /* 呼吸：一次明暗变化的时长 */
}
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background-color:var(--space-deep)}
.space > div{position:absolute}
/* 1. 空间层次：几团大而软的径向渐变，错开摆放，不用左右线性渐变 */
.space-layers{inset:-2%;background:
  radial-gradient(80% 85% at 28% 24%, rgba(var(--space-midnight),var(--layer-midnight)) 0%, rgba(var(--space-midnight),calc(var(--layer-midnight) * .35)) 45%, transparent 80%),
  radial-gradient(85% 80% at 74% 76%, rgba(var(--space-midnight),calc(var(--layer-midnight) * .85)) 0%, rgba(var(--space-midnight),calc(var(--layer-midnight) * .3)) 45%, transparent 80%),
  radial-gradient(70% 70% at 72% 26%, rgba(var(--space-teal),var(--layer-teal)) 0%, rgba(var(--space-teal),calc(var(--layer-teal) * .3)) 45%, transparent 78%),
  radial-gradient(65% 65% at 24% 76%, rgba(var(--space-teal),calc(var(--layer-teal) * .75)) 0%, rgba(var(--space-teal),calc(var(--layer-teal) * .25)) 45%, transparent 78%),
  radial-gradient(60% 50% at 56% 4%, rgba(var(--space-smoke),var(--layer-smoke)) 0%, transparent 75%),
  radial-gradient(55% 45% at 44% 100%, rgba(var(--space-smoke),calc(var(--layer-smoke) * .8)) 0%, transparent 75%)}
/* 2. 球后的青绿环境光：多段一路衰减到 0，看不出光圈边缘；只做极慢的明暗呼吸，不移动 */
.space-glow{left:50%;top:46%;width:var(--glow-size);height:var(--glow-size);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(var(--space-teal),var(--glow-strength)) 0%,
    rgba(var(--space-teal),calc(var(--glow-strength) * .66)) 24%,
    rgba(var(--space-teal),calc(var(--glow-strength) * .34)) 46%,
    rgba(var(--space-teal),calc(var(--glow-strength) * .12)) 68%,
    rgba(var(--space-teal),calc(var(--glow-strength) * .03)) 84%,
    transparent 100%);
  animation:breath var(--breath-time) ease-in-out infinite alternate}
@keyframes breath{from{opacity:1}to{opacity:var(--breath-low)}}
/* 3. 雾化纹理：低频分形噪声。图片是用原来的 SVG 噪声滤镜预先渲染好的（垫黑底，screen 混合下效果和原来一样），
   浏览器不用再现场计算滤镜——低配手机上现场算一张整屏噪声很费时间。中央用遮罩留干净，不和球抢焦点 */
.space-fog{inset:0;opacity:var(--fog-opacity);mix-blend-mode:screen;
  background:url("/static/img/space-fog.jpg") center/cover no-repeat;
  -webkit-mask-image:radial-gradient(62% 60% at 50% 48%, transparent 18%, rgba(0,0,0,.45) 55%, #000 100%);mask-image:radial-gradient(62% 60% at 50% 48%, transparent 18%, rgba(0,0,0,.45) 55%, #000 100%)}
/* 4. 细腻胶片颗粒：同样是预先渲染的图（垫 50% 灰底，overlay 混合下在暗背景上效果和原来一样）；440 像素的图按 220 显示，高清屏也细 */
.space-grain{inset:0;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background:url("/static/img/space-grain.jpg") 0 0/220px 220px}
/* 5. 电影暗角（最上层） */
.space::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 90% at 50% 50%, transparent 38%, rgba(4,7,13,calc(var(--vignette) * .25)) 62%, rgba(4,7,13,calc(var(--vignette) * .6)) 84%, rgba(3,5,10,var(--vignette)) 100%)}
/* 鼠标视差：各层按不同幅度反向移动（--mx/--my 由脚本写入，范围 -1～1） */
:root{--parallax-layers:10px;--parallax-glow:6px;--parallax-fog:18px;--parallax-meteors:24px}
.space{--mx:0;--my:0}
.space-layers{transform:translate(calc(var(--mx) * var(--parallax-layers) * -1), calc(var(--my) * var(--parallax-layers) * -1))}
.space-fog{inset:-3% !important;transform:translate(calc(var(--mx) * var(--parallax-fog) * -1), calc(var(--my) * var(--parallax-fog) * -1))}
.space-glow{transform:translate(calc(-50% - var(--mx) * var(--parallax-glow)), calc(-50% - var(--my) * var(--parallax-glow))) !important}
.meteors{transform:translate(calc(var(--mx) * var(--parallax-meteors) * -1), calc(var(--my) * var(--parallax-meteors) * -1))}
/* 6. 低频流星 / 光痕：在背景层里（球、文字、按钮都在它上面），也会被暗角压暗 */
.meteors{inset:0}
.meteor{position:absolute;left:0;top:0;height:2px;border-radius:2px;transform-origin:100% 50%;will-change:transform,opacity;opacity:0;
  background:linear-gradient(90deg, transparent 0%, rgba(var(--mc),.1) 30%, rgba(var(--mc),.6) 82%, rgba(var(--mc),1) 100%);
  box-shadow:0 0 10px 1.5px rgba(var(--mc),.35), 0 0 22px 3px rgba(var(--mc),.12)}
.meteor::after{content:"";position:absolute;right:-2px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:rgba(255,255,255,.95);box-shadow:0 0 10px 3px rgba(var(--mc),.6), 0 0 26px 6px rgba(var(--mc),.22)}
@media (prefers-reduced-motion:reduce){.space-glow{animation:none}.meteors{display:none}}