/* ═══════════════════════════════════════════════════════════════════════
   입자 흐름 배경 — 문서 41 구현 순서 28(c) (2026-10-29) · 꾸미기 mods.ptcl
     <header class="hero" data-gl-ptcl="flow | swarm | net">

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