/* ============================================
   사이트 배경 애니메이션 (경량 + 잘 보이게)
   - 모바일·데스크톱 모두 부드러운 스크롤
   - filter:blur / background-attachment:fixed 미사용
   - transform/opacity 만 애니메이션 (GPU 합성)
   ============================================ */

/* ─────────────────────────────────────────────────────────────
   파티클이 「상시」 보이도록 — body 의 불투명 배경을 강제로 투명화.
   theme/basic/css/default_shop.css 의
     body { background: radial-gradient(...) !important; }
   가 #bg-animation(z-index:-1) 위를 덮어 가려, 새로고침 직후
   페이드인이 끝나면 파티클이 사라져 보였다. body 를 투명으로 만들고
   html 자체에 보라 그라디언트를 깔아 두면 #bg-animation 의 파티클이
   계속 보인다(어떤 페이지에서도 동작).
   ───────────────────────────────────────────────────────────── */
html {
  background-color: #2c1638 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(255, 132, 188, 0.18), transparent 62%),
    radial-gradient(ellipse 70% 60% at 82% 88%, rgba(170, 130, 255, 0.18), transparent 62%),
    linear-gradient(135deg, #2f183b 0%, #3c204b 35%, #2c1638 70%, #22122d 100%) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  min-height: 100%;
}
body {
  /* default_shop.css 가 !important 로 body 배경을 칠해 #bg-animation 을
     완전히 가린다 → 같은 우선순위로 투명화.
     bg-animation.css 가 default_shop.css 보다 늦게 로드되므로 same-!important
     동률에서 우리 규칙이 승리 (cascade by source order). */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 백드롭 — z-index:-1 이라도 body 가 투명이면 html 위에 그대로 보임.
   스크롤 중에는 콘텐츠와 파티클이 서로 반대 방향으로 흘러 어지러우므로
   `html.bg-scrolling` 동안 살짝 페이드 아웃 + 애니메이션 일시 정지.
   스크롤 멈추면 자연스럽게 다시 살아난다. */
#bg-animation {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 320ms ease;
  background:
    radial-gradient(ellipse 70% 55% at 18% 18%, rgba(255, 132, 188, 0.18), transparent 62%),
    radial-gradient(ellipse 65% 55% at 82% 80%, rgba(170, 130, 255, 0.18), transparent 62%);
}
html.bg-scrolling #bg-animation { opacity: 0.18; }
html.bg-scrolling #bg-animation .bg-particle,
html.bg-scrolling #bg-animation .bg-twinkle { animation-play-state: paused; }

/* ── 떠오르는 컬러 파티클 ───────────────────────────── */
.bg-particle {
  position: absolute;
  bottom: -28px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  animation-name: bgRise;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 16s;
}

/* 색상 — radial gradient + 강한 box-shadow (filter:blur 미사용) */
.bg-particle.gold {
  background: radial-gradient(circle, rgba(255, 196, 226, 1) 0%, rgba(255, 156, 206, 0.95) 35%, rgba(255, 156, 206, 0) 70%);
  box-shadow:
    0 0 12px rgba(255, 156, 206, 0.85),
    0 0 28px rgba(255, 110, 180, 0.55);
}
.bg-particle.blue {
  background: radial-gradient(circle, rgba(220, 200, 255, 1) 0%, rgba(170, 120, 255, 0.92) 35%, rgba(170, 120, 255, 0) 72%);
  box-shadow:
    0 0 12px rgba(170, 120, 255, 0.8),
    0 0 28px rgba(140, 90, 255, 0.5);
}
.bg-particle.purple {
  background: radial-gradient(circle, rgba(255, 200, 230, 1) 0%, rgba(255, 130, 200, 0.92) 35%, rgba(255, 130, 200, 0) 72%);
  box-shadow:
    0 0 12px rgba(255, 130, 200, 0.7),
    0 0 24px rgba(220, 90, 170, 0.45);
}
.bg-particle.white {
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 18px rgba(255, 220, 240, 0.7);
}

/* 사이즈 — 옛 .bg-particle 마크업과 호환 (xs/sm/md/lg/xl) */
.bg-particle.size-xs { width: 5px;  height: 5px; }
.bg-particle.size-sm { width: 9px;  height: 9px; }
.bg-particle.size-md { width: 14px; height: 14px; }
.bg-particle.size-lg { width: 22px; height: 22px; }
.bg-particle.size-xl { width: 32px; height: 32px; }

@keyframes bgRise {
  0%   { transform: translate3d(0, 0, 0) scale(0.5);                     opacity: 0; }
  6%   {                                                                  opacity: 1; }
  92%  {                                                                  opacity: 0.95; }
  100% { transform: translate3d(0, calc(-100vh - 80px), 0) scale(1.2);    opacity: 0; }
}

/* ── 깜빡이는 별 ───────────────────────────────────── */
.bg-twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 220, 240, 0.6);
  opacity: 0.2;
  animation-name: bgTwinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 3.5s;
}
@keyframes bgTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 1.0;  transform: scale(1.4); }
}

/* 모바일에서 사이즈만 살짝 축소 (개수는 JS 가 줄임). 그래도 잘 보이게. */
@media (max-width: 768px) {
  .bg-particle.size-xl { width: 24px; height: 24px; }
  .bg-particle.size-lg { width: 18px; height: 18px; }
  .bg-particle.size-md { width: 12px; height: 12px; }
  .bg-twinkle { width: 3px; height: 3px; }
}

/* 시스템 「동작 줄임」 — 정지하되 잔잔히 보이도록 */
@media (prefers-reduced-motion: reduce) {
  .bg-particle,
  .bg-twinkle { animation: none !important; opacity: 0.5; }
}