/* 背景层：铺满视口、压在内容下面、不吃鼠标事件。
   参数写在容器元素的 data-* 上，改样式不用碰 JS：

     data-characters   字格用哪些字（默认是常用汉字）
     data-colors       点亮时的颜色，逗号分隔
     data-base-opacity 常态亮度，越大背景越明显
     data-glitch-amount 故障频率
     data-flow         有机流动强度
     data-font-size    字格大小
     data-interactive  true/false，鼠标经过是否搅动

   不支持 WebGL2 时 JS 会给容器加 .no-gl，这里让它彻底隐藏。 */

.letter-glitch {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.letter-glitch-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* 淡入，避免首帧到位时闪一下 */
  animation: glitch-in 1.2s ease-out both;
}

/* 手机上字格更密、字更大，压一半免得糊住正文。
   透明度放在容器上、淡入放在画布上，两者相乘才不会互相覆盖。 */
@media (max-width: 700px) {
  .letter-glitch { opacity: 0.7; }
}

.letter-glitch.no-gl { display: none; }

/* 内容浮在背景之上 */
body.has-glitch > main,
body.has-glitch > footer,
body.has-glitch > .nav {
  position: relative;
  z-index: 1;
}

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

@media (prefers-reduced-motion: reduce) {
  .letter-glitch-canvas { animation: none; }
}