/* ═══════════════════════════════════════════════════════════════════════
   WebGL 왜곡 호버 — 문서 41 구현 순서 28(a) (2026-10-29) · 꾸미기 mods.wgl
     <section data-gl-wgl="ripple | rgb | warp">

   캔버스(.gl-wgl-canvas)는 gl-wgl.js 가 위젯마다 하나 만들어 올린 사진 칸(.gl-wgl-host)으로 옮겨 다닌다 — 사진 위에 겹쳐 그린다.
   🔴 장식이다 — aria-hidden · 누를 수 없음. 사진은 그대로 아래에 있다(스크립트 · WebGL 이 없으면 사진만 보인다 — 이 파일은 아무것도 바꾸지 않는다).
   🔴 움직이는 것은 opacity 하나(켜질 때 짧게 밝아진다 — 사진과 캔버스의 재표본 차이를 가린다). 색을 적지 않는다.
   «움직임 줄이기» 면 gl-wgl.js 가 캔버스를 만들지 않는다 — 여기서도 숨긴다.
   ═══════════════════════════════════════════════════════════════════════ */
.gl-wgl-host { position: relative; overflow: hidden; }
.gl-wgl-canvas {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s var(--ease, ease);
}
.gl-wgl-canvas.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gl-wgl-canvas { display: none; }
}