/*
 * rtp-nav-loading.css — 진입 로딩 오버레이 (stat_detail_ux R1)
 * 규약: docs/conventions/frontend.md "Design Tokens" — var(--bb-*) 만 사용, raw hex/px(색) 금지.
 *
 * 동작: rtp-nav-loading.js 가 `a[href*='/my/stats/detail/']` 클릭 ~200ms 후 이 오버레이를
 * hidden 해제한다(빠른 응답이면 안 뜸). 새 페이지가 로드되면서 이 DOM 자체가 교체된다.
 *
 * 디자인: "데이터를 계산하는" 느낌의 막대그래프 로더(스탯 앱 정체성) + 은은한 blur 로 고급감.
 * prefers-reduced-motion: 막대 애니메이션 정지(중간 높이 고정), 텍스트 유지.
 */
.rtp-nav-loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-25);
  background: var(--bb-overlay-dark);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: rtp-nav-loading-fade var(--bb-t-graph) ease both;
}
.rtp-nav-loading[hidden] {
  display: none;
}
@keyframes rtp-nav-loading-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 막대그래프 로더 — 5개 막대가 물결처럼 차오름 ── */
.rtp-nav-loading__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
}
.rtp-nav-loading__bars span {
  width: 5px;
  height: 100%;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  transform-origin: bottom;
  transform: scaleY(0.35);
  animation: rtp-nav-loading-bar 1s ease-in-out infinite;
}
.rtp-nav-loading__bars span:nth-child(1) { animation-delay: 0s;    opacity: 0.55; }
.rtp-nav-loading__bars span:nth-child(2) { animation-delay: 0.12s; opacity: 0.7;  }
.rtp-nav-loading__bars span:nth-child(3) { animation-delay: 0.24s; opacity: 0.9;  }
.rtp-nav-loading__bars span:nth-child(4) { animation-delay: 0.36s; opacity: 0.7;  }
.rtp-nav-loading__bars span:nth-child(5) { animation-delay: 0.48s; opacity: 0.55; }
@keyframes rtp-nav-loading-bar {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

.rtp-nav-loading__text {
  font-family: var(--bb-font);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bb-bg);
  opacity: 0.9;
  animation: rtp-nav-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes rtp-nav-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .rtp-nav-loading,
  .rtp-nav-loading__bars span,
  .rtp-nav-loading__text {
    animation: none;
  }
  .rtp-nav-loading__bars span { transform: scaleY(0.7); opacity: 0.8; }
}