/* gl.css — 墨流带的外框与降级底（U24 第 3 轮）
   js/gl.js 把 .gl-band 插在 <footer> 之前；没有 WebGL、着色器编译失败或
   用户要求减少动效时，画布隐藏，这里的三团墨晕就是静态表现。 */

.gl-band {
  position: relative;
  height: 132px;
  margin: 26px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(58% 130% at 10% 48%, color-mix(in srgb, var(--tech-blue) 26%, transparent), transparent 70%),
    radial-gradient(52% 120% at 74% 38%, color-mix(in srgb, var(--tech-cyan-2) 22%, transparent), transparent 70%),
    radial-gradient(44% 120% at 38% 82%, color-mix(in srgb, var(--art-pink) 20%, transparent), transparent 72%);
}

.gl-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 降级：三种情况都把画布撤掉，只留上面的静态墨晕 */
html.gl-off .gl-canvas,
html.no-motion .gl-canvas {
  display: none;
}

@media (max-width: 600px) {
  .gl-band {
    height: 108px;
  }
}

@media print {
  .gl-band {
    display: none !important;
  }
}