/*
 * MetaBalls 스타일 — React Bits "Meta Balls" (https://reactbits.dev/animations/meta-balls) 바닐라 포트
 * © David Haz — MIT + Commons Clause, 전문은 같은 폴더의 LICENSE-react-bits.md. 이 사이트의 일부로만 쓰고, 따로 떼어 재배포하지 않는다.
 * 위 두 규칙은 원본 MetaBalls.css 그대로다. 컨테이너는 부모를 꽉 채우고, 캔버스는 그 크기를 따른다.
 */
.metaballs-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.metaballs-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * 사이트 배경용 (원본에는 없음): mount 대상 요소에 이 클래스를 붙인다.
 * 화면 전체에 고정되고, 콘텐츠 뒤(z-index -1)에 깔리며, 클릭·드래그를 가로채지 않는다.
 * z-index -1이라 다른 요소에 position/z-index를 따로 줄 필요가 없다.
 * (body 배경은 화면 바탕으로 칠해지므로 -1이어도 body 색 위, 콘텐츠 아래에 보인다)
 * 커서 반응은 스크립트가 window에서 포인터 이벤트를 받아 처리한다.
 */
.metaballs-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.metaballs-bg .metaballs-canvas {
  pointer-events: none;
}