/* World bubble map — motion layer. Networks > Signals와 Marketplace가 공유한다.
 *
 * 지도가 정지 화면처럼 읽히면 "지금 흐르고 있는 네트워크"가 아니라 "지난 달 보고서"로
 * 보인다. 여기 있는 것은 그 인상을 바꾸는 세 가지뿐이다: 큰 나라부터 순서대로 얹히는
 * 진입, 가장 큰 몇 나라를 감싸는 halo, 커서를 따라오는 살짝의 확대.
 *
 * **이 파일은 데이터를 주장하지 않는다.** halo는 "방금 들어온 건"이 아니라 "이 기간
 * 합계가 가장 큰 나라"를 뜻하고, 그 뜻은 지도 캡션이 글로 적는다. 애니메이션이
 * 실시간 갱신을 암시하면 그것은 거짓말이 되므로, 주기적으로 다시 그리거나 폴링하는
 * 장치는 여기에 두지 않는다.
 *
 * 선택자는 모듈이 소유하는 wbm- 클래스만 쓴다. 색·반지름 같은 데이터 의존 값은
 * 여전히 서버/JS가 인라인으로 넣는다 (페이지 CSS의 id 선택자가 더 세기 때문이다). */

/* 진입 — 합계가 큰 나라부터 얹힌다. 순서 자체가 "어디가 큰가"를 한 번 더 말한다.
   fill-mode를 backwards로 두는 이유: both로 두면 끝난 뒤에도 keyframe의 transform이
   남아 아래 hover 확대를 이긴다. */
.wbm-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: wbm-bubble-in .42s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: var(--wbm-delay, 0ms);
  transition: transform .16s ease-out;
}

@keyframes wbm-bubble-in {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* 커서/포커스/고정에 같은 크기로 반응한다 — 셋 다 "지금 이 나라를 보고 있다"는
   같은 상태이므로 다른 모양을 주지 않는다. */
.wbm-bubble:hover,
.wbm-bubble:focus-visible,
.wbm-bubble.is-open { transform: scale(1.08); }

/* halo — 상위 몇 개국에만 붙는 느린 확산 링.
   버블 <g> 안이 아니라 별도 레이어에 그린다. 안에 넣으면 group의 bbox가 링을 따라
   커졌다 줄었다 해서 패널이 버블이 아니라 링 기준으로 튄다. */
.wbm-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: wbm-pulse 2.8s cubic-bezier(.22, .61, .36, 1) infinite backwards;
}

@keyframes wbm-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* 움직임을 줄여 달라고 한 사용자에게는 최종 상태만 준다. 지도가 전달하는 정보는
   애니메이션이 아니라 크기·조각·색이므로 아무것도 잃지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .wbm-bubble { animation: none; transition: none; }
  .wbm-bubble:hover,
  .wbm-bubble:focus-visible,
  .wbm-bubble.is-open { transform: none; }
  .wbm-pulse { display: none; }
}