/**
 * Mood Background Effects CSS
 *
 * 배경 애니메이션 효과 스타일시트
 * 모든 효과는 --effect-color CSS 변수를 지원합니다.
 *
 * @version 1.1.0
 */

/* Base Layer */
.mood-effect-layer {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ============================================
   1. Sparkle (반짝임) - 떠다니는 빛 입자
   ============================================ */
.mood-effect-sparkle {
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--effect-color, #FFD700) 100%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, var(--effect-color, #FFD700) 100%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, var(--effect-color, #FFD700) 100%, transparent 100%),
    radial-gradient(2px 2px at 80% 50%, var(--effect-color, #FFD700) 100%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, var(--effect-color, #FFD700) 100%, transparent 100%),
    radial-gradient(2px 2px at 70% 90%, var(--effect-color, #FFD700) 100%, transparent 100%);
  background-size: 200px 200px;
  animation: sparkleFloat var(--effect-duration, 8s) linear infinite;
  opacity: var(--effect-opacity, 0.7);
}

@keyframes sparkleFloat {
  0% { background-position: 0 0; transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { background-position: 0 -200px; transform: translateY(0); }
}

/* ============================================
   2. Confetti (색종이) - 떨어지는 색종이
   ============================================ */
.mood-effect-confetti {
  background-image:
    radial-gradient(circle, var(--effect-color, #ff6b6b) 3px, transparent 3px),
    radial-gradient(circle, var(--effect-color, #ff6b6b) 3px, transparent 3px),
    radial-gradient(circle, var(--effect-color, #ff6b6b) 3px, transparent 3px),
    radial-gradient(circle, var(--effect-color, #ff6b6b) 3px, transparent 3px),
    radial-gradient(circle, var(--effect-color, #ff6b6b) 3px, transparent 3px);
  background-size: 80px 80px, 100px 100px, 60px 60px, 90px 90px, 70px 70px;
  background-position: 0 0, 30px 20px, 50px 40px, 20px 60px, 60px 30px;
  animation: confettiFall var(--effect-duration, 4s) linear infinite;
  opacity: var(--effect-opacity, 0.8);
}

@keyframes confettiFall {
  0% { background-position: 0 0, 30px 0, 50px 0, 20px 0, 60px 0; }
  100% { background-position: 0 200px, 30px 250px, 50px 180px, 20px 220px, 60px 190px; }
}

/* ============================================
   3. Rain (비) - 내리는 빗줄기
   ============================================ */
.mood-effect-rain {
  background:
    linear-gradient(to bottom, transparent 0%, var(--effect-color, rgba(255,255,255,0.3)) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--effect-color, rgba(255,255,255,0.2)) 50%, transparent 100%);
  background-size: 2px 80px, 3px 100px;
  background-position: 0 0, 30px -50px;
  animation: rainFall var(--effect-duration, 0.8s) linear infinite;
  opacity: var(--effect-opacity, 0.5);
}

@keyframes rainFall {
  0% { background-position: 0 0, 30px -50px; }
  100% { background-position: 0 200px, 30px 150px; }
}

/* ============================================
   4. Snow (눈) - 흩날리는 눈송이
   ============================================ */
.mood-effect-snow {
  background-image:
    radial-gradient(4px 4px at 20% 30%, var(--effect-color, white) 100%, transparent 100%),
    radial-gradient(3px 3px at 40% 70%, var(--effect-color, white) 100%, transparent 100%),
    radial-gradient(5px 5px at 60% 40%, var(--effect-color, white) 100%, transparent 100%),
    radial-gradient(3px 3px at 80% 10%, var(--effect-color, white) 100%, transparent 100%),
    radial-gradient(2px 2px at 50% 80%, var(--effect-color, white) 100%, transparent 100%);
  background-size: 200px 200px;
  animation: snowDrift var(--effect-duration, 12s) linear infinite;
  opacity: var(--effect-opacity, 0.8);
}

@keyframes snowDrift {
  0% { background-position: 0 0; }
  100% { background-position: 30px 200px; }
}

/* ============================================
   5. Glow (빛남) - 부드러운 발광
   ============================================ */
.mood-effect-glow {
  background: radial-gradient(ellipse at center, var(--effect-color, rgba(249, 115, 22, 0.4)) 0%, transparent 70%);
  animation: glowPulse var(--effect-duration, 3s) ease-in-out infinite;
  opacity: var(--effect-opacity, 0.6);
}

@keyframes glowPulse {
  0%, 100% { opacity: var(--effect-opacity, 0.6); transform: scale(1); }
  50% { opacity: calc(var(--effect-opacity, 0.6) * 0.7); transform: scale(1.1); }
}

/* ============================================
   6. Wave (파동) - 물결 흐름
   ============================================ */
.mood-effect-wave {
  background: linear-gradient(120deg,
    transparent 30%,
    var(--effect-color, rgba(6, 182, 212, 0.3)) 50%,
    transparent 70%);
  background-size: 200% 200%;
  animation: waveFlow var(--effect-duration, 5s) ease-in-out infinite alternate;
  opacity: var(--effect-opacity, 0.5);
}

@keyframes waveFlow {
  0% { background-position: 0% 50%; transform: scale(1); }
  100% { background-position: 100% 50%; transform: scale(1.05); }
}

/* ============================================
   7. Aurora (오로라) - 다색 빛 흐름
   Note: 다색 효과 특성상 effect-color는 주요 색상으로 사용됨
   ============================================ */
.mood-effect-aurora {
  background: linear-gradient(45deg,
    var(--effect-color, rgba(139, 92, 246, 0.5)) 0%,
    rgba(236, 72, 153, 0.3) 25%,
    rgba(6, 182, 212, 0.3) 50%,
    rgba(16, 185, 129, 0.3) 75%,
    var(--effect-color, rgba(139, 92, 246, 0.5)) 100%);
  background-size: 400% 400%;
  animation: auroraShift var(--effect-duration, 10s) ease infinite;
  opacity: var(--effect-opacity, 0.6);
}

@keyframes auroraShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   8. Float (부유) - 부드러운 떠다님
   ============================================ */
.mood-effect-float {
  background: radial-gradient(ellipse at 30% 40%, var(--effect-color, rgba(16, 185, 129, 0.3)) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 60%, var(--effect-color, rgba(16, 185, 129, 0.2)) 0%, transparent 50%);
  animation: floatDrift var(--effect-duration, 8s) ease-in-out infinite;
  opacity: var(--effect-opacity, 0.5);
}

@keyframes floatDrift {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(-5px) translateX(-5px); }
  75% { transform: translateY(-15px) translateX(3px); }
}

/* ============================================
   9. Hearts (하트) - 떠오르는 하트
   Note: mask-image 사용으로 effect-color 적용
   ============================================ */
.mood-effect-hearts {
  background-color: var(--effect-color, #EC4899);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  -webkit-mask-size: 20px 20px, 15px 15px, 25px 25px;
  mask-size: 20px 20px, 15px 15px, 25px 25px;
  -webkit-mask-position: 20% 100%, 50% 100%, 80% 100%;
  mask-position: 20% 100%, 50% 100%, 80% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: heartsRise var(--effect-duration, 6s) linear infinite;
  opacity: var(--effect-opacity, 0.6);
}

@keyframes heartsRise {
  0% {
    -webkit-mask-position: 20% 100%, 50% 100%, 80% 100%;
    mask-position: 20% 100%, 50% 100%, 80% 100%;
    opacity: var(--effect-opacity, 0.6);
  }
  50% { opacity: var(--effect-opacity, 0.6); }
  100% {
    -webkit-mask-position: 20% -20%, 50% -30%, 80% -10%;
    mask-position: 20% -20%, 50% -30%, 80% -10%;
    opacity: 0;
  }
}

/* ============================================
   10. Shimmer (빛줄기) - 스윕 광택
   ============================================ */
.mood-effect-shimmer {
  background: linear-gradient(105deg,
    transparent 40%,
    var(--effect-color, rgba(255, 255, 255, 0.5)) 50%,
    transparent 60%);
  background-size: 200% 100%;
  animation: shimmerSweep var(--effect-duration, 3s) ease-in-out infinite;
  opacity: var(--effect-opacity, 0.6);
}

@keyframes shimmerSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   11. Breathe (호흡) - 천천히 확대/축소
   ============================================ */
.mood-effect-breathe {
  background: radial-gradient(ellipse at center, var(--effect-color, rgba(99, 102, 241, 0.3)) 0%, transparent 70%);
  animation: breatheScale var(--effect-duration, 4s) ease-in-out infinite;
  opacity: var(--effect-opacity, 0.5);
}

@keyframes breatheScale {
  0%, 100% { transform: scale(1); opacity: var(--effect-opacity, 0.5); }
  50% { transform: scale(1.2); opacity: calc(var(--effect-opacity, 0.5) * 0.6); }
}

/* ============================================
   12. Bubbles (거품) - 올라가는 거품
   ============================================ */
.mood-effect-bubbles {
  background-image:
    radial-gradient(circle at 50% 50%, var(--effect-color, rgba(255,255,255,0.6)) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, var(--effect-color, rgba(255,255,255,0.5)) 0%, transparent 50%);
  background-size: 40px 40px, 25px 25px;
  background-position: 20% 100%, 70% 100%;
  animation: bubblesRise var(--effect-duration, 8s) linear infinite;
  opacity: var(--effect-opacity, 0.6);
}

@keyframes bubblesRise {
  0% { background-position: 20% 110%, 70% 120%; opacity: 0; }
  10% { opacity: var(--effect-opacity, 0.6); }
  90% { opacity: var(--effect-opacity, 0.6); }
  100% { background-position: 20% -10%, 70% -20%; opacity: 0; }
}

/* ============================================
   13. Mist (안개) - 흐르는 안개
   ============================================ */
.mood-effect-mist {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--effect-color, rgba(255, 255, 255, 0.2)) 20%,
    var(--effect-color, rgba(255, 255, 255, 0.3)) 50%,
    var(--effect-color, rgba(255, 255, 255, 0.2)) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: mistFlow var(--effect-duration, 10s) ease-in-out infinite;
  filter: blur(20px);
  opacity: var(--effect-opacity, 0.4);
}

@keyframes mistFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}