/* ============================================================
 * Longlight - 长光雨滴小站 | 公共背景层 — 全息长光背景
 * components/holo.css
 * 职责：GUI 页面（home 与各子页面）共用的全息背景层——网格 + 边缘粒子噪点，
 *       不承载任何内容；此前为接入页私有，现下沉为公共背景，全站 GUI 页面同一视觉语言
 * 用法：GUI 页面在 <body> 首个子节点放置
 *       <div class="holo" aria-hidden="true"><div class="holo-grid"></div><div class="holo-noise"></div></div>
 * 视觉：空气投影（纯光投影）——半透明自发光线框 + 边缘弱粒子噪点 + 背景穿透，
 *       无实体厚度、无实体阴影、无浮雕与立体感
 * 分层：固定层置于 z-index:-1（在页面底色之上、全部内容之下），故页面无需为内容额外提高层级
 * 依赖：tokens.css（颜色一律引用令牌，--grid-line / --grid-opacity 见 tokens）
 * ============================================================ */

.holo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.holo-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(var(--grid-line, var(--line)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, var(--line)) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  opacity: var(--grid-opacity, 0.15);
  /* 网格自中心向外淡出，避免铺满整屏（全息投影的有限视野） */
  mask-image: radial-gradient(110% 80% at 50% 42%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 42%, #000 30%, transparent 78%);
}

/* 边缘弱粒子噪点：低透明度，仅作质感，不参与信息表达 */
.holo-noise {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

[data-theme="light"] .holo-noise { opacity: .03; }