/* =========================================================
   Duovly — 공용 Premium Effect System
   Codex 이미지의 visual layer(glow / sparkle / shimmer / aura /
   gradient ring / waveform / live pulse)를 재사용 클래스로 추출.
   모든 효과는 decorative → pointer-events:none.

   ⚠️ reduced-motion 정책 (오빠 머신 "동작 줄이기" ON):
   효과를 숨기지 않는다. 움직임(animation)만 끄고, 정적인
   glow·sparkle·gradient·shimmer 하이라이트는 그대로 보이게 둔다.
   (display:none / opacity:0 금지 — 브랜드 visual layer는 항상 노출)
   ========================================================= */

/* ── 1. Premium surface (warm radial aura + ivory gradient) ── */
.duo-premium-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(233, 226, 218, .92);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 14%, rgba(24, 199, 184, .20), transparent 28%),
    radial-gradient(circle at 14% 18%, rgba(246, 198, 91, .22), transparent 26%),
    linear-gradient(145deg, #FFFCF8 0%, #FFF3D2 48%, #EAFBF8 100%);
  box-shadow:
    0 18px 42px rgba(16, 32, 51, .09),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* 2. top glass highlight layer */
.duo-premium-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
  z-index: 0;
}
.duo-premium-surface > * { position: relative; z-index: 1; }

/* dark premium variant (hero / voice room) */
.duo-premium-dark {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 18%, rgba(24, 199, 184, .25), transparent 30%),
    radial-gradient(circle at 14% 24%, rgba(246, 198, 91, .18), transparent 28%),
    linear-gradient(135deg, #102033 0%, #7B4A5A 52%, #FFB4A8 100%);
  box-shadow:
    0 18px 42px rgba(16, 32, 51, .22),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.duo-premium-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  z-index: 0;
}
.duo-premium-dark > * { position: relative; z-index: 1; }

/* ── 3. Sparkle field (6~12 tiny drifting spans) ── */
.duo-sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.duo-sparkle-field span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #F6C65B;
  opacity: .32;
  animation: duoSparkleDrift 4s ease-in-out infinite alternate;
}
.duo-sparkle-field span:nth-child(1)  { left: 12%; top: 22%; width: 4px; height: 4px; background: #F6C65B; opacity: .42; animation-delay: 0s; }
.duo-sparkle-field span:nth-child(2)  { left: 78%; top: 16%; width: 3px; height: 3px; background: #FF6F91; opacity: .38; animation-delay: .3s; }
.duo-sparkle-field span:nth-child(3)  { left: 32%; top: 64%; width: 2px; height: 2px; background: #18C7B8; opacity: .30; animation-delay: .6s; }
.duo-sparkle-field span:nth-child(4)  { left: 88%; top: 58%; width: 5px; height: 5px; background: #F6C65B; opacity: .26; animation-delay: .9s; }
.duo-sparkle-field span:nth-child(5)  { left: 54%; top: 12%; width: 3px; height: 3px; background: #FF6F91; opacity: .34; animation-delay: 1.2s; }
.duo-sparkle-field span:nth-child(6)  { left: 22%; top: 44%; width: 2px; height: 2px; background: #18C7B8; opacity: .28; animation-delay: 1.5s; }
.duo-sparkle-field span:nth-child(7)  { left: 66%; top: 72%; width: 4px; height: 4px; background: #F6C65B; opacity: .40; animation-delay: 1.8s; }
.duo-sparkle-field span:nth-child(8)  { left: 44%; top: 84%; width: 3px; height: 3px; background: #FF6F91; opacity: .30; animation-delay: 2.1s; }
.duo-sparkle-field span:nth-child(9)  { left: 8%;  top: 76%; width: 2px; height: 2px; background: #18C7B8; opacity: .26; animation-delay: 2.4s; }
.duo-sparkle-field span:nth-child(10) { left: 92%; top: 36%; width: 3px; height: 3px; background: #F6C65B; opacity: .44; animation-delay: 2.7s; }
.duo-sparkle-field span:nth-child(11) { left: 38%; top: 30%; width: 2px; height: 2px; background: #FF6F91; opacity: .22; animation-delay: 3.0s; }
.duo-sparkle-field span:nth-child(12) { left: 70%; top: 46%; width: 4px; height: 4px; background: #18C7B8; opacity: .34; animation-delay: 3.3s; }

/* ── 4. Object glow (behind gift / coin / crown / avatar) ── */
.duo-object-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 198, 91, .36), rgba(255, 111, 145, .18) 42%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

/* ── 5. Gradient ring (avatar) — wrapper holds the gradient ── */
.duo-gradient-ring {
  display: inline-block;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F6C65B, #FF6F91, #18C7B8);
  box-shadow:
    0 0 0 5px rgba(246, 198, 91, .12),
    0 10px 22px rgba(16, 32, 51, .12);
}
.duo-gradient-ring > img,
.duo-gradient-ring > .duo-gradient-ring-inner {
  display: block;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  background: #FFFFFF;
}
.duo-gradient-ring--mint   { background: linear-gradient(135deg, #18C7B8, #5FDDCD, #EAFBF8); }
.duo-gradient-ring--strong { box-shadow: 0 0 0 6px rgba(246, 198, 91, .18), 0 16px 28px rgba(16, 32, 51, .16), 0 0 36px rgba(246, 198, 91, .28); }

/* ── 6. Shimmer sweep ── */
.duo-shimmer { position: relative; overflow: hidden; }
.duo-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, .55), transparent 62%);
  transform: translateX(-120%);
  animation: duoShimmer 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* ── 7. Live pulse dot ── */
.duo-live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18C76F;
  box-shadow: 0 0 0 0 rgba(24, 199, 111, .3);
  animation: duoLivePulse 1.8s ease-out infinite;
}

/* ── 8. Waveform (4~6 animated bars) ── */
.duo-waveform {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.duo-waveform i {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #18C7B8, #F6C65B 70%, #FF7A6B);
  animation: duoWave 900ms ease-in-out infinite;
}
.duo-waveform i:nth-child(1) { height: 40%; animation-delay: 0s; }
.duo-waveform i:nth-child(2) { height: 80%; animation-delay: .12s; }
.duo-waveform i:nth-child(3) { height: 55%; animation-delay: .24s; }
.duo-waveform i:nth-child(4) { height: 95%; animation-delay: .36s; }
.duo-waveform i:nth-child(5) { height: 65%; animation-delay: .48s; }
.duo-waveform i:nth-child(6) { height: 45%; animation-delay: .60s; }

/* ── keyframes ── */
@keyframes duoSparkleDrift {
  from { transform: translateY(0) scale(1); opacity: .22; }
  to   { transform: translateY(-6px) scale(1.35); opacity: .48; }
}
@keyframes duoShimmer {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes duoLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(24, 199, 111, .35); }
  70%  { box-shadow: 0 0 0 9px rgba(24, 199, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 199, 111, 0); }
}
@keyframes duoWave {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1); }
}

/* ── reduced-motion: 움직임만 끈다. visual layer는 유지 ── */
@media (prefers-reduced-motion: reduce) {
  .duo-sparkle-field span,
  .duo-shimmer::after,
  .duo-live-pulse,
  .duo-waveform i {
    animation: none !important;
  }
  /* shimmer는 멈춘 상태에서 화면 밖에 있지 않도록 살짝 노출 */
  .duo-shimmer::after { transform: translateX(0); opacity: .35; }
}