/* ═══════════════════════════════════════════════════════════════════════
   유체(잉크) 배경 — 문서 41 구현 순서 28(b) (2026-10-29) · 꾸미기 mods.fluid
     <header class="hero" data-gl-fluid="ink | mist">

   캔버스(.gl-fluid-canvas)는 gl-fluid.js 가 위젯의 «맨 앞 자식» 으로 끼운다 — isolation 으로 쌓임 맥락을 열고 z-index -1 로
   위젯 바탕 «위» · 안의 글 · 사진 «아래» 에 깔린다. 안의 요소는 한 줄도 안 고친다(글 · 버튼은 그대로 눌린다).
   🔴 장식이다 — aria-hidden · 누를 수 없음. 스크립트 · WebGL 이 없으면 캔버스 자체가 없다 — 위젯은 그대로다.
   🔴 색을 적지 않는다(염료 색은 스크립트가 테마 토큰에서 읽는다). 움직이는 것은 opacity(켜질 때 밝아짐) 하나.
   ═══════════════════════════════════════════════════════════════════════ */
.gl-fluid-on { position: relative; isolation: isolate; }
.gl-fluid-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  animation: gl-fluid-in 1.2s var(--ease, ease) .2s forwards;
}
@keyframes gl-fluid-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gl-fluid-canvas { display: none; }
}