/* "주문 대기중..." 의 말줄임표 점 3개 = 몬스터볼 3개 (사장님 확정 2026-08-30 03시대,
   이전 두-공 0.39em 안을 대체).

   - 크기는 점처럼 0.2em, 세 개가 같은 위상으로 나란히 구른다.
   - 세로는 마침표가 찍히는 자리다: 컨테이너를 baseline 정렬로 두면 텍스트 없는
     ::after 의 합성 베이스라인이 제 바닥이 되므로, 공 밑면이 "중" 글자 밑선에
     기하학적으로 정확히 걸린다. 이전 flex-end + top 0.16em 보정은 그 선보다
     낮았다 (사장님 실화면 지적) — 보정값 대신 정렬 규칙으로 푼다.
   - setText 가 매 렌더 textContent 를 갈아치워 실자식 span 은 살아남지 못한다.
     그래서 공 세 개를 ::after 하나에 배경 3장으로 그린다. 원본 JPG 가 사각이라
     예전엔 border-radius 로 둥글렸는데 배경 3장에는 못 쓰므로, 같은 자리의
     radial-gradient 마스크 3원으로 각 공을 원형으로 딴다.
   - 마스크는 filter 뒤에 적용돼 drop-shadow 글로우를 잘라먹는다 — 점 컨셉에는
     글로우가 필요 없어 뺐다 (글자 자체의 흰 글로우는 별도 규칙으로 살아 있다).
   - 배경 3장은 한 몸으로 움직여 rotate 를 주면 스트립이 통째로 기운다 — 0.2em
     에서는 회전이 보이지 않으므로 이동+명멸만 남겼다.
   - 속도 1.8s: 고객 "더 천천히 가능할까요"(2026-08-30 00:44) 약속 이행
     (1.15s 에서 완화, 사장님 철회 없음).
   - 셀렉터는 data-label="idle"(문구가 "주문 대기중"일 때만) 이다 — 사장님 정정
     (2026-08-30 03시대): 라벨이 대기 1번 이름일 때(data-label="name") 점이 붙으면
     안 된다. data-state="waiting" 으로 걸면 이름 라벨에도 굴러가 회귀한다. */
.order-current[data-label="idle"] .order-current-status {
  display: flex;
  align-items: baseline;
}

.order-current[data-label="idle"] .order-current-status::after {
  content: "";
  display: inline-block;
  width: 0.88em;
  height: 0.2em;
  margin-inline: 0.12em 0.66em;
  background:
    url("/pokeball-waiting.jpg?v=20260829-1") 0 50% / 0.2em 0.2em no-repeat,
    url("/pokeball-waiting.jpg?v=20260829-1") 0.34em 50% / 0.2em 0.2em no-repeat,
    url("/pokeball-waiting.jpg?v=20260829-1") 0.68em 50% / 0.2em 0.2em no-repeat;
  /* unprefixed mask-image 는 Chromium 120부터다 — 프리즘 내장 CEF 가 구버전이면
     마스크가 무시돼 공이 사각 JPG 로 노출되므로 -webkit- 쌍둥이를 먼저 둔다 (09 실측). */
  -webkit-mask-image:
    radial-gradient(circle 0.1em at 0.1em 50%, #000 98%, transparent),
    radial-gradient(circle 0.1em at 0.44em 50%, #000 98%, transparent),
    radial-gradient(circle 0.1em at 0.78em 50%, #000 98%, transparent);
  mask-image:
    radial-gradient(circle 0.1em at 0.1em 50%, #000 98%, transparent),
    radial-gradient(circle 0.1em at 0.44em 50%, #000 98%, transparent),
    radial-gradient(circle 0.1em at 0.78em 50%, #000 98%, transparent);
  animation: pokeball-waiting-roll 1.8s linear infinite;
  will-change: transform, opacity;
}

@keyframes pokeball-waiting-roll {
  0% {
    opacity: 0.28;
    transform: translateX(0);
  }

  18%,
  82% {
    opacity: 1;
  }

  100% {
    opacity: 0.28;
    transform: translateX(0.6em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-current[data-label="idle"] .order-current-status::after {
    opacity: 1;
    animation: none;
    transform: none;
  }
}