/* ===================================================================
   VIEWER OVERLAY EFFECTS
   100개 오버레이 효과 (12개 기존 + 88개 신규)
   ※ 텍스트/문자 기반: .sleepy-z(::before content:'Z'), .music-note(::before content:'♪')
     → 빈 div면 안 보이므로 반드시 content 지정 필요
   =================================================================== */

/* ─── Mood Overlays ─── */
.mood-overlay{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.mood-overlay.despair{ background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.3) 100%); }
.mood-overlay.twilight{ background:linear-gradient(180deg, rgba(255,107,53,.1) 0%, rgba(154,74,106,.2) 100%); }
.mood-overlay.night{ background:radial-gradient(circle at 20% 30%, rgba(255,200,100,.15), transparent 50%); }

/* ─── EXISTING EFFECTS (기존 12개) ─── */

/* Petals */
.petals-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.petal{
  position:absolute; width:12px; height:12px;
  background:radial-gradient(ellipse at 30% 30%, #ffb7c5, #ff91a4 40%, #ff7096 100%);
  border-radius:150% 0 150% 0; opacity:0; animation:fall linear infinite;
}
@keyframes fall{
  0%{ opacity:0; transform:translateY(-20px) translateX(0) rotate(0deg) scale(0.8); }
  10%{ opacity:0.9; } 90%{ opacity:0.7; }
  100%{ opacity:0; transform:translateY(600px) translateX(30px) rotate(360deg) scale(0.6); }
}
.petal:nth-child(1){ left:10%; animation-duration:8s; animation-delay:0s; }
.petal:nth-child(2){ left:25%; animation-duration:9s; animation-delay:1s; width:14px;height:14px; }
.petal:nth-child(3){ left:40%; animation-duration:7s; animation-delay:0.5s; }
.petal:nth-child(4){ left:55%; animation-duration:10s; animation-delay:2s; width:11px;height:11px; }
.petal:nth-child(5){ left:70%; animation-duration:8.5s; animation-delay:0.8s; }
.petal:nth-child(6){ left:85%; animation-duration:9.5s; animation-delay:1.5s; }
.petal:nth-child(7){ left:50%; animation-duration:7.5s; animation-delay:0.3s; width:10px;height:10px; }
.petal:nth-child(8){ left:15%; animation-duration:11s; animation-delay:2.5s; }

/* Tears */
.tears-container{ position:absolute; pointer-events:none; z-index:10; }
.tear{
  position:absolute; width:3px; height:6px;
  background:linear-gradient(180deg, rgba(180,200,220,0.7), rgba(150,170,200,0.8));
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  opacity:0; animation:tear-fall 2.5s ease-in infinite;
}
.tear:nth-child(1){ left:0; animation-delay:0s; }
.tear:nth-child(2){ left:6px; animation-delay:1.5s; }
@keyframes tear-fall{
  0%{ opacity:0; transform:translateY(0) scale(0.8); }
  15%{ opacity:0.5; transform:translateY(1px) scale(1); }
  70%{ opacity:0.3; }
  100%{ opacity:0; transform:translateY(20px) scale(0.4); }
}

/* Snow */
.snow-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.snowflake{
  position:absolute; width:8px; height:8px;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 60%, transparent 100%);
  border-radius:50%; opacity:0; animation:snow-fall linear infinite;
}
@keyframes snow-fall{
  0%{ opacity:0; transform:translateY(-10px) translateX(0) scale(1); }
  10%{ opacity:0.9; }
  100%{ opacity:0.2; transform:translateY(600px) translateX(40px) scale(0.6); }
}
.snowflake:nth-child(1){ left:5%; animation-duration:7s; animation-delay:0s; width:6px;height:6px; }
.snowflake:nth-child(2){ left:15%; animation-duration:9s; animation-delay:1.2s; }
.snowflake:nth-child(3){ left:25%; animation-duration:6s; animation-delay:0.4s; width:10px;height:10px; }
.snowflake:nth-child(4){ left:35%; animation-duration:8s; animation-delay:2s; width:5px;height:5px; }
.snowflake:nth-child(5){ left:45%; animation-duration:10s; animation-delay:0.8s; }
.snowflake:nth-child(6){ left:55%; animation-duration:7.5s; animation-delay:1.5s; width:7px;height:7px; }
.snowflake:nth-child(7){ left:65%; animation-duration:8.5s; animation-delay:0.3s; }
.snowflake:nth-child(8){ left:75%; animation-duration:6.5s; animation-delay:2.5s; width:9px;height:9px; }
.snowflake:nth-child(9){ left:85%; animation-duration:9.5s; animation-delay:0.6s; width:6px;height:6px; }
.snowflake:nth-child(10){ left:92%; animation-duration:11s; animation-delay:1.8s; }

/* Fireflies */
.fireflies-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.firefly{
  position:absolute; width:6px; height:6px;
  background:radial-gradient(circle, rgba(255,255,150,1) 0%, rgba(255,220,80,0.6) 40%, transparent 70%);
  border-radius:50%; opacity:0; box-shadow:0 0 8px 2px rgba(255,255,100,0.4);
  animation:firefly-float ease-in-out infinite;
}
@keyframes firefly-float{
  0%{ opacity:0; transform:translate(0,0) scale(0.5); }
  20%{ opacity:0.9; transform:translate(15px,-20px) scale(1); }
  50%{ opacity:0.4; transform:translate(-10px,-40px) scale(0.7); }
  80%{ opacity:0.8; transform:translate(20px,-15px) scale(1.1); }
  100%{ opacity:0; transform:translate(5px,-30px) scale(0.5); }
}
.firefly:nth-child(1){ left:10%; top:60%; animation-duration:5s; animation-delay:0s; }
.firefly:nth-child(2){ left:30%; top:50%; animation-duration:6s; animation-delay:1s; }
.firefly:nth-child(3){ left:50%; top:70%; animation-duration:4.5s; animation-delay:0.5s; width:5px;height:5px; }
.firefly:nth-child(4){ left:70%; top:55%; animation-duration:5.5s; animation-delay:2s; }
.firefly:nth-child(5){ left:85%; top:65%; animation-duration:7s; animation-delay:0.8s; width:4px;height:4px; }
.firefly:nth-child(6){ left:20%; top:75%; animation-duration:6.5s; animation-delay:1.5s; }
.firefly:nth-child(7){ left:60%; top:45%; animation-duration:5s; animation-delay:2.5s; width:7px;height:7px; }
.firefly:nth-child(8){ left:40%; top:80%; animation-duration:4s; animation-delay:0.3s; }

/* Sparkle */
.sparkle-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sparkle{
  position:absolute; width:4px; height:4px; background:#fff; border-radius:50%;
  box-shadow:0 0 6px 2px rgba(255,255,255,0.8), 0 0 12px 4px rgba(200,180,255,0.3);
  opacity:0; animation:sparkle-twinkle ease-in-out infinite;
}
@keyframes sparkle-twinkle{
  0%,100%{ opacity:0; transform:scale(0.3) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.2) rotate(180deg); }
}
.sparkle:nth-child(1){ left:8%; top:15%; animation-duration:2s; animation-delay:0s; }
.sparkle:nth-child(2){ left:22%; top:35%; animation-duration:2.5s; animation-delay:0.4s; width:5px;height:5px; }
.sparkle:nth-child(3){ left:38%; top:10%; animation-duration:1.8s; animation-delay:0.8s; }
.sparkle:nth-child(4){ left:55%; top:25%; animation-duration:3s; animation-delay:1.2s; width:6px;height:6px; }
.sparkle:nth-child(5){ left:70%; top:45%; animation-duration:2.2s; animation-delay:0.2s; }
.sparkle:nth-child(6){ left:85%; top:20%; animation-duration:2.8s; animation-delay:1.5s; width:3px;height:3px; }
.sparkle:nth-child(7){ left:45%; top:55%; animation-duration:2s; animation-delay:0.6s; }
.sparkle:nth-child(8){ left:15%; top:60%; animation-duration:3.2s; animation-delay:1s; width:5px;height:5px; }
.sparkle:nth-child(9){ left:75%; top:65%; animation-duration:2.4s; animation-delay:1.8s; }
.sparkle:nth-child(10){ left:60%; top:8%; animation-duration:2.6s; animation-delay:0.3s; }

/* Rain */
.rain-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.raindrop{
  position:absolute; width:2px; height:16px;
  background:linear-gradient(180deg, transparent, rgba(174,194,224,0.5) 50%, rgba(174,194,224,0.8));
  border-radius:0 0 2px 2px; opacity:0; animation:rain-fall linear infinite;
}
@keyframes rain-fall{
  0%{ opacity:0; transform:translateY(-20px); }
  10%{ opacity:0.7; }
  100%{ opacity:0; transform:translateY(600px); }
}
.raindrop:nth-child(1){ left:3%; animation-duration:1.2s; animation-delay:0s; }
.raindrop:nth-child(2){ left:10%; animation-duration:1s; animation-delay:0.3s; height:20px; }
.raindrop:nth-child(3){ left:18%; animation-duration:1.4s; animation-delay:0.1s; }
.raindrop:nth-child(4){ left:25%; animation-duration:1.1s; animation-delay:0.5s; height:14px; }
.raindrop:nth-child(5){ left:33%; animation-duration:1.3s; animation-delay:0.2s; }
.raindrop:nth-child(6){ left:40%; animation-duration:1s; animation-delay:0.7s; height:18px; }
.raindrop:nth-child(7){ left:48%; animation-duration:1.5s; animation-delay:0.4s; }
.raindrop:nth-child(8){ left:55%; animation-duration:1.1s; animation-delay:0.6s; }
.raindrop:nth-child(9){ left:63%; animation-duration:1.3s; animation-delay:0.15s; height:22px; }
.raindrop:nth-child(10){ left:70%; animation-duration:1.2s; animation-delay:0.8s; }
.raindrop:nth-child(11){ left:78%; animation-duration:1s; animation-delay:0.35s; height:15px; }
.raindrop:nth-child(12){ left:85%; animation-duration:1.4s; animation-delay:0.55s; }
.raindrop:nth-child(13){ left:92%; animation-duration:1.1s; animation-delay:0.25s; }

/* Bubbles */
.bubbles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.bubble{
  position:absolute; bottom:-20px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(173,216,230,0.2) 60%, transparent);
  border:1px solid rgba(255,255,255,0.3);
  opacity:0; animation:bubble-rise ease-in infinite;
}
@keyframes bubble-rise{
  0%{ opacity:0; transform:translateY(0) scale(0.5); }
  15%{ opacity:0.7; transform:translateY(-40px) scale(1); }
  100%{ opacity:0; transform:translateY(-500px) scale(0.8) translateX(20px); }
}
.bubble:nth-child(1){ left:10%; width:18px;height:18px; animation-duration:6s; animation-delay:0s; }
.bubble:nth-child(2){ left:25%; width:12px;height:12px; animation-duration:7s; animation-delay:1s; }
.bubble:nth-child(3){ left:40%; width:22px;height:22px; animation-duration:5.5s; animation-delay:0.5s; }
.bubble:nth-child(4){ left:55%; width:14px;height:14px; animation-duration:8s; animation-delay:2s; }
.bubble:nth-child(5){ left:70%; width:16px;height:16px; animation-duration:6.5s; animation-delay:0.8s; }
.bubble:nth-child(6){ left:85%; width:10px;height:10px; animation-duration:7.5s; animation-delay:1.5s; }
.bubble:nth-child(7){ left:50%; width:20px;height:20px; animation-duration:5s; animation-delay:2.5s; }
.bubble:nth-child(8){ left:15%; width:8px;height:8px; animation-duration:9s; animation-delay:0.3s; }

/* Leaves */
.leaves-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.leaf{
  position:absolute; width:14px; height:10px; border-radius:2px 80% 2px 80%;
  opacity:0; animation:leaf-fall linear infinite;
}
.leaf:nth-child(odd){ background:linear-gradient(135deg, #d4a03c, #c47e2b); }
.leaf:nth-child(even){ background:linear-gradient(135deg, #c0392b, #e67e22); }
@keyframes leaf-fall{
  0%{ opacity:0; transform:translateY(-10px) rotate(0deg) translateX(0); }
  10%{ opacity:0.85; }
  50%{ transform:translateY(300px) rotate(180deg) translateX(50px); }
  100%{ opacity:0; transform:translateY(600px) rotate(360deg) translateX(-20px); }
}
.leaf:nth-child(1){ left:5%; animation-duration:9s; animation-delay:0s; width:16px;height:12px; }
.leaf:nth-child(2){ left:20%; animation-duration:7s; animation-delay:1s; }
.leaf:nth-child(3){ left:35%; animation-duration:10s; animation-delay:0.5s; width:12px;height:8px; }
.leaf:nth-child(4){ left:50%; animation-duration:8s; animation-delay:2s; }
.leaf:nth-child(5){ left:65%; animation-duration:9.5s; animation-delay:0.8s; width:10px;height:7px; }
.leaf:nth-child(6){ left:80%; animation-duration:7.5s; animation-delay:1.5s; }
.leaf:nth-child(7){ left:45%; animation-duration:8.5s; animation-delay:2.5s; width:18px;height:13px; }
.leaf:nth-child(8){ left:90%; animation-duration:11s; animation-delay:0.3s; }

/* Dust / Light rays */
.dust-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.dust-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:rgba(255,240,200,0.7);
  box-shadow:0 0 4px 1px rgba(255,230,150,0.3);
  opacity:0; animation:dust-drift linear infinite;
}
@keyframes dust-drift{
  0%{ opacity:0; transform:translate(0,0); }
  30%{ opacity:0.6; }
  70%{ opacity:0.4; }
  100%{ opacity:0; transform:translate(30px, 20px); }
}
.dust-particle:nth-child(1){ left:10%; top:20%; animation-duration:8s; animation-delay:0s; width:3px;height:3px; }
.dust-particle:nth-child(2){ left:25%; top:40%; animation-duration:6s; animation-delay:1s; }
.dust-particle:nth-child(3){ left:40%; top:15%; animation-duration:10s; animation-delay:0.5s; width:5px;height:5px; }
.dust-particle:nth-child(4){ left:55%; top:50%; animation-duration:7s; animation-delay:2s; }
.dust-particle:nth-child(5){ left:70%; top:30%; animation-duration:9s; animation-delay:0.8s; width:3px;height:3px; }
.dust-particle:nth-child(6){ left:85%; top:45%; animation-duration:8.5s; animation-delay:1.5s; }
.dust-particle:nth-child(7){ left:30%; top:60%; animation-duration:7.5s; animation-delay:2.5s; width:5px;height:5px; }
.dust-particle:nth-child(8){ left:60%; top:10%; animation-duration:6.5s; animation-delay:0.3s; }
.dust-particle:nth-child(9){ left:15%; top:70%; animation-duration:11s; animation-delay:1.2s; }
.dust-particle:nth-child(10){ left:80%; top:65%; animation-duration:9.5s; animation-delay:0.6s; width:6px;height:6px; }

/* Confetti */
.confetti-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.confetti-piece{
  position:absolute; width:8px; height:12px; opacity:0;
  animation:confetti-fall linear infinite;
}
.confetti-piece:nth-child(1){ left:5%; background:#ff6b6b; animation-duration:4s; animation-delay:0s; border-radius:2px; }
.confetti-piece:nth-child(2){ left:15%; background:#ffd93d; animation-duration:5s; animation-delay:0.3s; width:10px;height:6px; border-radius:50%; }
.confetti-piece:nth-child(3){ left:25%; background:#6bcb77; animation-duration:3.5s; animation-delay:0.6s; border-radius:2px; }
.confetti-piece:nth-child(4){ left:35%; background:#4d96ff; animation-duration:4.5s; animation-delay:1s; width:6px;height:10px; }
.confetti-piece:nth-child(5){ left:45%; background:#ff6bcb; animation-duration:3.8s; animation-delay:0.2s; border-radius:50%; width:8px;height:8px; }
.confetti-piece:nth-child(6){ left:55%; background:#ffa07a; animation-duration:5.2s; animation-delay:1.5s; border-radius:2px; }
.confetti-piece:nth-child(7){ left:65%; background:#87ceeb; animation-duration:4.2s; animation-delay:0.5s; width:10px;height:5px; }
.confetti-piece:nth-child(8){ left:75%; background:#dda0dd; animation-duration:3.6s; animation-delay:0.8s; }
.confetti-piece:nth-child(9){ left:85%; background:#98fb98; animation-duration:4.8s; animation-delay:1.2s; width:6px;height:6px; border-radius:50%; }
.confetti-piece:nth-child(10){ left:95%; background:#ff69b4; animation-duration:3.3s; animation-delay:2s; border-radius:2px; }
@keyframes confetti-fall{
  0%{ opacity:0; transform:translateY(-10px) rotate(0deg); }
  10%{ opacity:1; }
  100%{ opacity:0.3; transform:translateY(600px) rotate(720deg) translateX(30px); }
}

/* Hearts */
.hearts-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.heart{
  position:absolute; bottom:0; opacity:0; animation:heart-rise ease-in infinite;
}
.heart::before, .heart::after{
  content:''; position:absolute; width:10px; height:16px; background:#ff6b81;
  border-radius:10px 10px 0 0;
}
.heart::before{ left:0; transform:rotate(-45deg); transform-origin:bottom right; }
.heart::after{ left:5px; transform:rotate(45deg); transform-origin:bottom left; }
@keyframes heart-rise{
  0%{ opacity:0; transform:translateY(0) scale(0.5); }
  20%{ opacity:0.8; transform:translateY(-60px) scale(1); }
  100%{ opacity:0; transform:translateY(-400px) scale(0.6) translateX(15px); }
}
.heart:nth-child(1){ left:10%; animation-duration:5s; animation-delay:0s; }
.heart:nth-child(2){ left:25%; animation-duration:6s; animation-delay:1s; transform:scale(0.7); }
.heart:nth-child(3){ left:40%; animation-duration:4.5s; animation-delay:0.5s; }
.heart:nth-child(4){ left:55%; animation-duration:7s; animation-delay:2s; transform:scale(0.6); }
.heart:nth-child(5){ left:70%; animation-duration:5.5s; animation-delay:0.8s; }
.heart:nth-child(6){ left:85%; animation-duration:6.5s; animation-delay:1.5s; transform:scale(0.8); }

/* Shooting Stars */
.stars-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.shooting-star{
  position:absolute; width:3px; height:3px; background:#fff; border-radius:50%;
  box-shadow:0 0 6px 2px rgba(255,255,255,0.6);
  opacity:0; animation:shooting ease-in infinite;
}
.shooting-star::after{
  content:''; position:absolute; top:0; left:0; width:40px; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.6), transparent);
  transform:rotate(215deg); transform-origin:left;
}
@keyframes shooting{
  0%{ opacity:0; transform:translate(0,0); }
  5%{ opacity:1; }
  20%{ opacity:0; transform:translate(-120px, 80px); }
  100%{ opacity:0; }
}
.shooting-star:nth-child(1){ top:10%; left:30%; animation-duration:4s; animation-delay:0s; }
.shooting-star:nth-child(2){ top:5%; left:60%; animation-duration:5s; animation-delay:2s; }
.shooting-star:nth-child(3){ top:15%; left:80%; animation-duration:4.5s; animation-delay:3.5s; }
.shooting-star:nth-child(4){ top:20%; left:45%; animation-duration:6s; animation-delay:1s; }
.shooting-star:nth-child(5){ top:8%; left:15%; animation-duration:5.5s; animation-delay:4s; }

/* ═══════════════════════════════════════════════════
   SHARED KEYFRAME ARCHETYPES
   ═══════════════════════════════════════════════════ */
@keyframes fx-fall{
  0%{ opacity:0; transform:translateY(-20px) rotate(0deg); }
  10%{ opacity:var(--fx-opacity,0.8); }
  90%{ opacity:calc(var(--fx-opacity,0.8)*0.7); }
  100%{ opacity:0; transform:translateY(var(--fx-travel,600px)) rotate(var(--fx-spin,360deg)) translateX(var(--fx-sway,30px)); }
}
@keyframes fx-rise{
  0%{ opacity:0; transform:translateY(0) scale(var(--fx-scale-start,0.5)); }
  15%{ opacity:var(--fx-opacity,0.7); }
  100%{ opacity:0; transform:translateY(var(--fx-travel,-500px)) scale(var(--fx-scale-end,0.8)) translateX(var(--fx-sway,20px)); }
}
@keyframes fx-float{
  0%{ opacity:0; transform:translate(0,0) scale(0.5); }
  20%{ opacity:var(--fx-opacity,0.8); transform:translate(15px,-20px) scale(1); }
  50%{ opacity:calc(var(--fx-opacity,0.8)*0.5); transform:translate(-10px,-40px) scale(0.7); }
  80%{ opacity:var(--fx-opacity,0.8); transform:translate(20px,-15px) scale(1.1); }
  100%{ opacity:0; transform:translate(5px,-30px) scale(0.5); }
}
@keyframes fx-twinkle{
  0%,100%{ opacity:0; transform:scale(0.3); }
  50%{ opacity:var(--fx-opacity,1); transform:scale(var(--fx-scale-end,1.2)); }
}
@keyframes fx-streak{
  0%{ opacity:0; transform:translate(0,0); }
  5%{ opacity:var(--fx-opacity,1); }
  20%{ opacity:0; transform:translate(var(--fx-travel-x,-120px),var(--fx-travel-y,80px)); }
  100%{ opacity:0; }
}
@keyframes fx-pulse{
  0%,100%{ opacity:var(--fx-opacity-min,0.3); transform:scale(1); }
  50%{ opacity:var(--fx-opacity,0.8); transform:scale(var(--fx-scale-end,1.15)); }
}
@keyframes fx-wave{
  0%{ transform:translateX(0) translateY(0); }
  25%{ transform:translateX(var(--fx-sway,15px)) translateY(-5px); }
  50%{ transform:translateX(0) translateY(0); }
  75%{ transform:translateX(calc(var(--fx-sway,15px)*-1)) translateY(5px); }
  100%{ transform:translateX(0) translateY(0); }
}
@keyframes fx-burst{
  0%{ opacity:var(--fx-opacity,1); transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--fx-travel-x,50px),var(--fx-travel-y,-80px)) scale(var(--fx-scale-end,0.3)); }
}
@keyframes fx-expand{
  0%{ opacity:var(--fx-opacity,0.6); transform:scale(0.3); }
  100%{ opacity:0; transform:scale(var(--fx-scale-end,3)); }
}
@keyframes fx-drift-h{
  0%{ opacity:0; transform:translateX(var(--fx-start-x,-80px)); }
  10%{ opacity:var(--fx-opacity,0.6); }
  90%{ opacity:var(--fx-opacity,0.6); }
  100%{ opacity:0; transform:translateX(var(--fx-travel-x,400px)); }
}
@keyframes fx-sway{
  0%,100%{ transform:rotate(var(--fx-angle-start,-5deg)); }
  50%{ transform:rotate(var(--fx-angle-end,5deg)); }
}
@keyframes fx-flutter{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.5); }
  20%{ opacity:var(--fx-opacity,0.8); transform:translate(20px,-30px) rotate(15deg) scale(1); }
  40%{ transform:translate(-15px,-60px) rotate(-10deg) scale(0.9); }
  60%{ transform:translate(25px,-90px) rotate(20deg) scale(1.05); }
  80%{ opacity:calc(var(--fx-opacity,0.8)*0.5); transform:translate(-10px,-120px) rotate(-15deg) scale(0.8); }
  100%{ opacity:0; transform:translate(15px,-150px) rotate(10deg) scale(0.5); }
}

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 날씨 (Weather)
   ═══════════════════════════════════════════════════ */

/* Drizzle */
.drizzle-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.drizzle-drop{
  position:absolute; width:1px; height:10px;
  background:linear-gradient(180deg, transparent, rgba(174,194,224,0.3) 50%, rgba(174,194,224,0.5));
  border-radius:0 0 1px 1px; opacity:0;
  animation:fx-fall 3s linear infinite;
  --fx-travel:600px; --fx-spin:0deg; --fx-sway:5px; --fx-opacity:0.5;
}
.drizzle-drop:nth-child(1){ left:5%; animation-duration:3s; }
.drizzle-drop:nth-child(2){ left:15%; animation-duration:3.5s; animation-delay:0.3s; }
.drizzle-drop:nth-child(3){ left:25%; animation-duration:2.8s; animation-delay:0.6s; }
.drizzle-drop:nth-child(4){ left:35%; animation-duration:3.2s; animation-delay:0.1s; }
.drizzle-drop:nth-child(5){ left:45%; animation-duration:3.4s; animation-delay:0.8s; }
.drizzle-drop:nth-child(6){ left:55%; animation-duration:2.9s; animation-delay:0.4s; }
.drizzle-drop:nth-child(7){ left:65%; animation-duration:3.6s; animation-delay:0.7s; }
.drizzle-drop:nth-child(8){ left:75%; animation-duration:3.1s; animation-delay:0.2s; }
.drizzle-drop:nth-child(9){ left:85%; animation-duration:3.3s; animation-delay:0.5s; }
.drizzle-drop:nth-child(10){ left:92%; animation-duration:2.7s; animation-delay:0.9s; }

/* Storm */
.storm-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.storm-drop{
  position:absolute; width:3px; height:24px;
  background:linear-gradient(180deg, transparent, rgba(150,170,200,0.6) 40%, rgba(120,140,180,0.9));
  border-radius:0 0 2px 2px; opacity:0; transform:rotate(15deg);
  animation:fx-fall 0.8s linear infinite;
  --fx-travel:700px; --fx-spin:0deg; --fx-sway:-40px; --fx-opacity:0.7;
}
.storm-drop:nth-child(1){ left:3%; animation-duration:0.7s; }
.storm-drop:nth-child(2){ left:10%; animation-duration:0.9s; animation-delay:0.1s; }
.storm-drop:nth-child(3){ left:17%; animation-duration:0.6s; animation-delay:0.2s; }
.storm-drop:nth-child(4){ left:24%; animation-duration:0.8s; animation-delay:0.05s; }
.storm-drop:nth-child(5){ left:31%; animation-duration:1s; animation-delay:0.15s; }
.storm-drop:nth-child(6){ left:38%; animation-duration:0.7s; animation-delay:0.3s; }
.storm-drop:nth-child(7){ left:45%; animation-duration:0.85s; animation-delay:0.08s; }
.storm-drop:nth-child(8){ left:52%; animation-duration:0.65s; animation-delay:0.25s; }
.storm-drop:nth-child(9){ left:59%; animation-duration:0.9s; animation-delay:0.12s; }
.storm-drop:nth-child(10){ left:66%; animation-duration:0.75s; animation-delay:0.18s; }
.storm-drop:nth-child(11){ left:73%; animation-duration:0.95s; animation-delay:0.22s; }
.storm-drop:nth-child(12){ left:80%; animation-duration:0.7s; animation-delay:0.07s; }
.storm-drop:nth-child(13){ left:87%; animation-duration:0.8s; animation-delay:0.28s; }
.storm-drop:nth-child(14){ left:93%; animation-duration:0.65s; animation-delay:0.35s; }
.storm-drop:nth-child(15){ left:97%; animation-duration:1.1s; animation-delay:0.02s; }

/* Rainbow Shimmer */
.rainbow-shimmer-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.rainbow-band{
  position:absolute; left:0; right:0; height:6px; border-radius:0 0 3px 3px;
  opacity:0; animation:fx-pulse 4s ease-in-out infinite;
  --fx-opacity:0.4; --fx-opacity-min:0.1; --fx-scale-end:1;
}
.rainbow-band:nth-child(1){ top:0; background:#ff6b6b; }
.rainbow-band:nth-child(2){ top:6px; background:#ffa07a; animation-delay:0.3s; }
.rainbow-band:nth-child(3){ top:12px; background:#ffd93d; animation-delay:0.6s; }
.rainbow-band:nth-child(4){ top:18px; background:#6bcb77; animation-delay:0.9s; }
.rainbow-band:nth-child(5){ top:24px; background:#4d96ff; animation-delay:1.2s; }
.rainbow-band:nth-child(6){ top:30px; background:#9b59b6; animation-delay:1.5s; }

/* Fog */
.fog-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.fog-cloud{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
  opacity:0; animation:fx-drift-h 20s linear infinite;
  --fx-opacity:0.4; --fx-start-x:-150px; --fx-travel-x:500px;
}
.fog-cloud:nth-child(1){ top:10%; width:200px;height:80px; animation-duration:25s; }
.fog-cloud:nth-child(2){ top:30%; width:180px;height:70px; animation-duration:20s; animation-delay:5s; }
.fog-cloud:nth-child(3){ top:50%; width:220px;height:90px; animation-duration:30s; animation-delay:2s; }
.fog-cloud:nth-child(4){ top:70%; width:160px;height:60px; animation-duration:22s; animation-delay:8s; }

/* Sunbeams */
.sunbeams-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sunbeam{
  position:absolute; top:-20%; width:40px; height:120%;
  background:linear-gradient(180deg, rgba(255,220,100,0.15), transparent 80%);
  transform:rotate(-20deg); transform-origin:top center;
  opacity:0; animation:fx-pulse 6s ease-in-out infinite;
  --fx-opacity:0.5; --fx-opacity-min:0.1; --fx-scale-end:1.05;
}
.sunbeam:nth-child(1){ left:10%; }
.sunbeam:nth-child(2){ left:25%; animation-delay:1s; width:35px; }
.sunbeam:nth-child(3){ left:45%; animation-delay:2s; width:50px; }
.sunbeam:nth-child(4){ left:65%; animation-delay:0.5s; }
.sunbeam:nth-child(5){ left:80%; animation-delay:1.5s; width:45px; }

/* Morning Dew */
.morning-dew-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.dew-drop{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,230,255,0.9), rgba(150,200,255,0.4) 60%, transparent);
  box-shadow:0 0 3px 1px rgba(200,230,255,0.3);
  opacity:0; animation:fx-twinkle 3s ease-in-out infinite;
  --fx-opacity:0.8; --fx-scale-end:1.3;
}
.dew-drop:nth-child(1){ left:8%; top:55%; animation-delay:0s; }
.dew-drop:nth-child(2){ left:20%; top:65%; animation-delay:0.5s; width:3px;height:3px; }
.dew-drop:nth-child(3){ left:35%; top:50%; animation-delay:1s; }
.dew-drop:nth-child(4){ left:48%; top:70%; animation-delay:0.3s; width:5px;height:5px; }
.dew-drop:nth-child(5){ left:60%; top:58%; animation-delay:1.5s; }
.dew-drop:nth-child(6){ left:72%; top:62%; animation-delay:0.8s; width:3px;height:3px; }
.dew-drop:nth-child(7){ left:85%; top:55%; animation-delay:2s; }
.dew-drop:nth-child(8){ left:45%; top:75%; animation-delay:1.2s; width:5px;height:5px; }

/* Hail */
.hail-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.hailstone{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 30%, rgba(200,220,240,0.8) 70%);
  opacity:0; animation:fx-fall 1.5s linear infinite;
  --fx-travel:650px; --fx-spin:0deg; --fx-sway:10px; --fx-opacity:0.9;
}
.hailstone:nth-child(1){ left:5%; animation-duration:1s; }
.hailstone:nth-child(2){ left:15%; animation-duration:1.3s; animation-delay:0.2s; width:5px;height:5px; }
.hailstone:nth-child(3){ left:25%; animation-duration:0.9s; animation-delay:0.5s; }
.hailstone:nth-child(4){ left:35%; animation-duration:1.4s; animation-delay:0.1s; width:7px;height:7px; }
.hailstone:nth-child(5){ left:45%; animation-duration:1.1s; animation-delay:0.7s; }
.hailstone:nth-child(6){ left:55%; animation-duration:1.5s; animation-delay:0.3s; width:5px;height:5px; }
.hailstone:nth-child(7){ left:65%; animation-duration:0.8s; animation-delay:0.6s; }
.hailstone:nth-child(8){ left:75%; animation-duration:1.2s; animation-delay:0.4s; width:8px;height:8px; }
.hailstone:nth-child(9){ left:85%; animation-duration:1s; animation-delay:0.8s; }
.hailstone:nth-child(10){ left:92%; animation-duration:1.3s; animation-delay:0.15s; }

/* Wind */
.wind-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.wind-streak{
  position:absolute; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, transparent);
  opacity:0; animation:fx-drift-h 2s linear infinite;
  --fx-opacity:0.5; --fx-start-x:-100px; --fx-travel-x:500px;
}
.wind-streak:nth-child(1){ top:15%; width:60px; animation-duration:1.8s; }
.wind-streak:nth-child(2){ top:25%; width:80px; animation-duration:2.2s; animation-delay:0.3s; }
.wind-streak:nth-child(3){ top:35%; width:50px; animation-duration:1.5s; animation-delay:0.6s; }
.wind-streak:nth-child(4){ top:45%; width:70px; animation-duration:2s; animation-delay:0.1s; }
.wind-streak:nth-child(5){ top:55%; width:55px; animation-duration:2.4s; animation-delay:0.5s; }
.wind-streak:nth-child(6){ top:65%; width:65px; animation-duration:1.7s; animation-delay:0.8s; }
.wind-streak:nth-child(7){ top:75%; width:75px; animation-duration:2.1s; animation-delay:0.2s; }
.wind-streak:nth-child(8){ top:85%; width:45px; animation-duration:1.6s; animation-delay:0.7s; }

/* Thunder */
.thunder-container{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.thunder-flash{
  position:absolute; inset:0; background:rgba(255,255,255,0.8);
  opacity:0; animation:thunder-bolt 8s ease-out infinite;
}
@keyframes thunder-bolt{
  0%,89%,91%,93%,95%,100%{ opacity:0; }
  90%{ opacity:0.7; }
  92%{ opacity:0.3; }
  94%{ opacity:0.5; }
}

/* Cloud Drift */
.cloud-drift-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.cloud{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.5), rgba(240,245,255,0.2) 60%, transparent);
  opacity:0; animation:fx-drift-h 30s linear infinite;
  --fx-opacity:0.5; --fx-start-x:-120px; --fx-travel-x:450px;
}
.cloud:nth-child(1){ top:10%; width:100px;height:40px; animation-duration:28s; }
.cloud:nth-child(2){ top:25%; width:80px;height:35px; animation-duration:35s; animation-delay:5s; }
.cloud:nth-child(3){ top:40%; width:120px;height:50px; animation-duration:25s; animation-delay:10s; }
.cloud:nth-child(4){ top:60%; width:90px;height:38px; animation-duration:32s; animation-delay:3s; }
.cloud:nth-child(5){ top:75%; width:70px;height:30px; animation-duration:30s; animation-delay:8s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 자연/식물 (Nature/Plants)
   ═══════════════════════════════════════════════════ */

/* Dandelion */
.dandelion-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.dandelion-seed{
  position:absolute; bottom:20%; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 30%, rgba(255,255,255,0.5) 60%, transparent);
  box-shadow:0 0 6px 2px rgba(255,255,255,0.3);
  opacity:0; animation:fx-rise 8s ease-out infinite;
  --fx-travel:-450px; --fx-scale-start:0.5; --fx-scale-end:0.3; --fx-sway:30px; --fx-opacity:0.7;
}
.dandelion-seed:nth-child(1){ left:10%; animation-delay:0s; }
.dandelion-seed:nth-child(2){ left:22%; animation-delay:1s; width:5px;height:5px; }
.dandelion-seed:nth-child(3){ left:35%; animation-delay:0.5s; }
.dandelion-seed:nth-child(4){ left:48%; animation-delay:2s; width:4px;height:4px; }
.dandelion-seed:nth-child(5){ left:60%; animation-delay:0.8s; }
.dandelion-seed:nth-child(6){ left:72%; animation-delay:1.5s; width:7px;height:7px; }
.dandelion-seed:nth-child(7){ left:85%; animation-delay:2.5s; }
.dandelion-seed:nth-child(8){ left:50%; animation-delay:0.3s; width:5px;height:5px; }

/* Maple Leaves */
.maple-leaves-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.maple-leaf{
  position:absolute; width:16px; height:14px;
  opacity:0; animation:fx-fall 10s linear infinite;
  --fx-travel:600px; --fx-spin:540deg; --fx-sway:60px; --fx-opacity:0.8;
}
.maple-leaf:nth-child(odd){ background:linear-gradient(135deg, #e74c3c, #c0392b); border-radius:4px 50% 4px 50%; }
.maple-leaf:nth-child(even){ background:linear-gradient(135deg, #e67e22, #d35400); border-radius:50% 4px 50% 4px; }
.maple-leaf:nth-child(1){ left:5%; animation-duration:9s; }
.maple-leaf:nth-child(2){ left:18%; animation-duration:11s; animation-delay:1s; }
.maple-leaf:nth-child(3){ left:32%; animation-duration:8s; animation-delay:0.5s; width:14px;height:12px; }
.maple-leaf:nth-child(4){ left:45%; animation-duration:10s; animation-delay:2s; }
.maple-leaf:nth-child(5){ left:58%; animation-duration:9.5s; animation-delay:0.8s; width:12px;height:10px; }
.maple-leaf:nth-child(6){ left:72%; animation-duration:8.5s; animation-delay:1.5s; }
.maple-leaf:nth-child(7){ left:85%; animation-duration:11s; animation-delay:2.5s; width:18px;height:16px; }
.maple-leaf:nth-child(8){ left:92%; animation-duration:7.5s; animation-delay:0.3s; }

/* Green Leaves */
.green-leaves-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.green-leaf{
  position:absolute; width:14px; height:10px; border-radius:2px 80% 2px 80%;
  opacity:0; animation:fx-fall 9s linear infinite;
  --fx-travel:600px; --fx-spin:360deg; --fx-sway:40px; --fx-opacity:0.8;
}
.green-leaf:nth-child(odd){ background:linear-gradient(135deg, #27ae60, #2ecc71); }
.green-leaf:nth-child(even){ background:linear-gradient(135deg, #1abc9c, #16a085); }
.green-leaf:nth-child(1){ left:8%; animation-duration:8s; }
.green-leaf:nth-child(2){ left:20%; animation-duration:10s; animation-delay:1s; }
.green-leaf:nth-child(3){ left:35%; animation-duration:7s; animation-delay:0.5s; width:12px;height:8px; }
.green-leaf:nth-child(4){ left:50%; animation-duration:9s; animation-delay:2s; }
.green-leaf:nth-child(5){ left:65%; animation-duration:8.5s; animation-delay:0.8s; }
.green-leaf:nth-child(6){ left:78%; animation-duration:10.5s; animation-delay:1.5s; width:16px;height:12px; }
.green-leaf:nth-child(7){ left:88%; animation-duration:7.5s; animation-delay:2.5s; }
.green-leaf:nth-child(8){ left:42%; animation-duration:9.5s; animation-delay:0.3s; }

/* Flower Petals (multicolor) */
.flower-petals-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.flower-petal{
  position:absolute; width:12px; height:12px; border-radius:150% 0 150% 0;
  opacity:0; animation:fx-fall 9s linear infinite;
  --fx-travel:600px; --fx-spin:360deg; --fx-sway:35px; --fx-opacity:0.8;
}
.flower-petal:nth-child(1){ left:8%; background:#ff7096; animation-duration:8s; }
.flower-petal:nth-child(2){ left:20%; background:#ffd93d; animation-duration:10s; animation-delay:0.5s; }
.flower-petal:nth-child(3){ left:35%; background:#c39bd3; animation-duration:7.5s; animation-delay:1s; }
.flower-petal:nth-child(4){ left:48%; background:#85c1e9; animation-duration:9s; animation-delay:1.5s; }
.flower-petal:nth-child(5){ left:60%; background:#f8c471; animation-duration:8.5s; animation-delay:0.3s; }
.flower-petal:nth-child(6){ left:72%; background:#ff6b81; animation-duration:10.5s; animation-delay:2s; }
.flower-petal:nth-child(7){ left:85%; background:#abebc6; animation-duration:7s; animation-delay:0.8s; }
.flower-petal:nth-child(8){ left:45%; background:#ff91a4; animation-duration:9.5s; animation-delay:2.5s; }

/* Pine Needles */
.pine-needles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.pine-needle{
  position:absolute; width:2px; height:14px;
  background:linear-gradient(180deg, #2d5016, #4a7c28);
  border-radius:1px; opacity:0; animation:fx-fall 7s linear infinite;
  --fx-travel:600px; --fx-spin:180deg; --fx-sway:20px; --fx-opacity:0.7;
}
.pine-needle:nth-child(1){ left:8%; animation-duration:6s; }
.pine-needle:nth-child(2){ left:20%; animation-duration:7.5s; animation-delay:0.5s; }
.pine-needle:nth-child(3){ left:35%; animation-duration:5.5s; animation-delay:1s; }
.pine-needle:nth-child(4){ left:48%; animation-duration:8s; animation-delay:0.3s; }
.pine-needle:nth-child(5){ left:60%; animation-duration:6.5s; animation-delay:1.5s; }
.pine-needle:nth-child(6){ left:72%; animation-duration:7s; animation-delay:0.8s; }
.pine-needle:nth-child(7){ left:85%; animation-duration:5s; animation-delay:2s; }
.pine-needle:nth-child(8){ left:92%; animation-duration:7.5s; animation-delay:0.2s; }

/* Pollen */
.pollen-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.pollen-grain{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,220,80,0.8); box-shadow:0 0 3px 1px rgba(255,220,80,0.3);
  opacity:0; animation:fx-float 7s ease-in-out infinite; --fx-opacity:0.6;
}
.pollen-grain:nth-child(1){ left:10%; top:20%; animation-duration:6s; }
.pollen-grain:nth-child(2){ left:25%; top:40%; animation-duration:7s; animation-delay:0.5s; }
.pollen-grain:nth-child(3){ left:40%; top:15%; animation-duration:5.5s; animation-delay:1s; }
.pollen-grain:nth-child(4){ left:55%; top:50%; animation-duration:8s; animation-delay:0.3s; }
.pollen-grain:nth-child(5){ left:65%; top:30%; animation-duration:6.5s; animation-delay:1.5s; }
.pollen-grain:nth-child(6){ left:78%; top:45%; animation-duration:7.5s; animation-delay:0.8s; }
.pollen-grain:nth-child(7){ left:35%; top:60%; animation-duration:5s; animation-delay:2s; }
.pollen-grain:nth-child(8){ left:85%; top:25%; animation-duration:6s; animation-delay:1.2s; }
.pollen-grain:nth-child(9){ left:50%; top:70%; animation-duration:7s; animation-delay:0.6s; }
.pollen-grain:nth-child(10){ left:15%; top:55%; animation-duration:8.5s; animation-delay:1.8s; }

/* Seeds */
.seeds-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.seed{
  position:absolute; width:5px; height:8px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:linear-gradient(180deg, #8B6914, #654321);
  opacity:0; animation:fx-fall 11s linear infinite;
  --fx-travel:600px; --fx-spin:180deg; --fx-sway:25px; --fx-opacity:0.7;
}
.seed:nth-child(1){ left:10%; animation-duration:10s; }
.seed:nth-child(2){ left:28%; animation-duration:12s; animation-delay:1s; }
.seed:nth-child(3){ left:45%; animation-duration:9s; animation-delay:0.5s; width:4px;height:6px; }
.seed:nth-child(4){ left:62%; animation-duration:11s; animation-delay:2s; }
.seed:nth-child(5){ left:78%; animation-duration:10.5s; animation-delay:0.8s; }
.seed:nth-child(6){ left:90%; animation-duration:13s; animation-delay:1.5s; width:6px;height:9px; }

/* Vines */
.vines-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.vine-leaf{
  position:absolute; width:10px; height:8px; border-radius:2px 80% 2px 80%;
  background:linear-gradient(135deg, #27ae60, #1e8449);
  opacity:0.6; animation:fx-sway 4s ease-in-out infinite;
  --fx-angle-start:-8deg; --fx-angle-end:8deg;
}
.vine-leaf:nth-child(1){ left:2%; top:15%; }
.vine-leaf:nth-child(2){ left:5%; top:30%; animation-delay:0.5s; width:8px;height:6px; }
.vine-leaf:nth-child(3){ left:3%; top:50%; animation-delay:1s; }
.vine-leaf:nth-child(4){ left:6%; top:70%; animation-delay:1.5s; width:12px;height:10px; }
.vine-leaf:nth-child(5){ right:2%; top:20%; animation-delay:0.3s; }
.vine-leaf:nth-child(6){ right:5%; top:40%; animation-delay:0.8s; width:9px;height:7px; }
.vine-leaf:nth-child(7){ right:3%; top:60%; animation-delay:1.2s; }
.vine-leaf:nth-child(8){ right:6%; top:80%; animation-delay:1.8s; width:11px;height:9px; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 생물 (Creatures)
   ═══════════════════════════════════════════════════ */

/* Butterflies */
.butterflies-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.butterfly{
  position:absolute; width:14px; height:10px; opacity:0;
  animation:fx-flutter 8s ease-in-out infinite; --fx-opacity:0.8;
}
.butterfly::before,.butterfly::after{
  content:''; position:absolute; width:7px; height:10px; border-radius:50%;
}
.butterfly::before{ left:0; }
.butterfly::after{ right:0; }
.butterfly:nth-child(odd)::before{ background:rgba(255,150,50,0.7); }
.butterfly:nth-child(odd)::after{ background:rgba(255,180,80,0.6); }
.butterfly:nth-child(even)::before{ background:rgba(150,100,255,0.7); }
.butterfly:nth-child(even)::after{ background:rgba(180,130,255,0.6); }
.butterfly:nth-child(1){ left:10%; top:30%; animation-duration:7s; }
.butterfly:nth-child(2){ left:30%; top:50%; animation-duration:9s; animation-delay:1s; }
.butterfly:nth-child(3){ left:50%; top:25%; animation-duration:6.5s; animation-delay:0.5s; }
.butterfly:nth-child(4){ left:65%; top:60%; animation-duration:8s; animation-delay:2s; }
.butterfly:nth-child(5){ left:80%; top:40%; animation-duration:7.5s; animation-delay:0.8s; }
.butterfly:nth-child(6){ left:45%; top:70%; animation-duration:9.5s; animation-delay:1.5s; }

/* Dragonflies */
.dragonflies-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.dragonfly{
  position:absolute; width:4px; height:16px;
  background:linear-gradient(180deg, #5dade2, #2e86c1);
  border-radius:2px; opacity:0; animation:fx-flutter 6s ease-in-out infinite; --fx-opacity:0.7;
}
.dragonfly::after{
  content:''; position:absolute; top:3px; left:-5px; width:14px; height:2px;
  background:rgba(180,220,255,0.5); border-radius:1px;
}
.dragonfly:nth-child(1){ left:15%; top:30%; animation-duration:5s; }
.dragonfly:nth-child(2){ left:35%; top:50%; animation-duration:6.5s; animation-delay:1s; }
.dragonfly:nth-child(3){ left:55%; top:25%; animation-duration:5.5s; animation-delay:0.5s; }
.dragonfly:nth-child(4){ left:75%; top:45%; animation-duration:7s; animation-delay:2s; }
.dragonfly:nth-child(5){ left:50%; top:65%; animation-duration:6s; animation-delay:1.5s; }

/* Bees */
.bees-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.bee{
  position:absolute; width:8px; height:6px; border-radius:50%;
  background:repeating-linear-gradient(90deg, #f1c40f 0px, #f1c40f 2px, #2c3e50 2px, #2c3e50 4px);
  opacity:0; animation:fx-float 5s ease-in-out infinite; --fx-opacity:0.8;
}
.bee:nth-child(1){ left:15%; top:25%; animation-duration:4.5s; }
.bee:nth-child(2){ left:35%; top:45%; animation-duration:5.5s; animation-delay:0.8s; }
.bee:nth-child(3){ left:55%; top:30%; animation-duration:4s; animation-delay:1.5s; }
.bee:nth-child(4){ left:70%; top:55%; animation-duration:6s; animation-delay:0.3s; }
.bee:nth-child(5){ left:85%; top:35%; animation-duration:5s; animation-delay:2s; }
.bee:nth-child(6){ left:45%; top:65%; animation-duration:4.5s; animation-delay:1s; }

/* Ladybugs */
.ladybugs-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.ladybug{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #e74c3c, #c0392b);
  box-shadow:inset 2px 0 0 rgba(0,0,0,0.3);
  opacity:0; animation:fx-float 7s ease-in-out infinite; --fx-opacity:0.8;
}
.ladybug::before{
  content:''; position:absolute; top:1px; left:2px; width:2px; height:2px;
  background:#2c3e50; border-radius:50%; box-shadow:3px 0 0 #2c3e50, 1px 3px 0 #2c3e50;
}
.ladybug:nth-child(1){ left:20%; top:40%; animation-duration:6s; }
.ladybug:nth-child(2){ left:40%; top:60%; animation-duration:7.5s; animation-delay:1s; }
.ladybug:nth-child(3){ left:60%; top:35%; animation-duration:6.5s; animation-delay:0.5s; }
.ladybug:nth-child(4){ left:80%; top:55%; animation-duration:8s; animation-delay:2s; }
.ladybug:nth-child(5){ left:50%; top:75%; animation-duration:7s; animation-delay:1.5s; }

/* Birds */
.birds-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.bird{
  position:absolute; width:16px; height:6px; opacity:0;
  animation:fx-drift-h 12s linear infinite;
  --fx-opacity:0.6; --fx-start-x:-50px; --fx-travel-x:450px;
}
.bird::before,.bird::after{
  content:''; position:absolute; top:0; width:8px; height:2px;
  background:#2c3e50; border-radius:1px;
}
.bird::before{ left:0; transform:rotate(-25deg); }
.bird::after{ right:0; transform:rotate(25deg); }
.bird:nth-child(1){ top:10%; animation-duration:10s; }
.bird:nth-child(2){ top:20%; animation-duration:12s; animation-delay:2s; }
.bird:nth-child(3){ top:15%; animation-duration:11s; animation-delay:4s; }
.bird:nth-child(4){ top:25%; animation-duration:9s; animation-delay:1s; }
.bird:nth-child(5){ top:8%; animation-duration:13s; animation-delay:3s; }

/* Fish */
.fish-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.fish-particle{
  position:absolute; width:12px; height:6px;
  border-radius:60% 40% 40% 60% / 50% 50% 50% 50%;
  opacity:0; animation:fx-drift-h 10s linear infinite;
  --fx-opacity:0.6; --fx-start-x:-40px; --fx-travel-x:400px;
}
.fish-particle:nth-child(odd){ background:linear-gradient(90deg, #f39c12, #e67e22); }
.fish-particle:nth-child(even){ background:linear-gradient(90deg, #3498db, #2980b9); }
.fish-particle:nth-child(1){ top:40%; animation-duration:9s; }
.fish-particle:nth-child(2){ top:55%; animation-duration:11s; animation-delay:2s; }
.fish-particle:nth-child(3){ top:65%; animation-duration:8s; animation-delay:1s; }
.fish-particle:nth-child(4){ top:50%; animation-duration:10s; animation-delay:3s; }
.fish-particle:nth-child(5){ top:70%; animation-duration:12s; animation-delay:0.5s; }

/* Feathers */
.feathers-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.feather{
  position:absolute; width:4px; height:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(220,220,220,0.5));
  border-radius:50% 50% 50% 50% / 20% 20% 80% 80%;
  opacity:0; animation:fx-fall 12s linear infinite;
  --fx-travel:600px; --fx-spin:180deg; --fx-sway:60px; --fx-opacity:0.7;
}
.feather:nth-child(1){ left:10%; animation-duration:11s; }
.feather:nth-child(2){ left:25%; animation-duration:13s; animation-delay:1s; }
.feather:nth-child(3){ left:42%; animation-duration:10s; animation-delay:0.5s; width:3px;height:15px; }
.feather:nth-child(4){ left:58%; animation-duration:12s; animation-delay:2s; }
.feather:nth-child(5){ left:75%; animation-duration:14s; animation-delay:0.8s; }
.feather:nth-child(6){ left:88%; animation-duration:11.5s; animation-delay:1.5s; width:5px;height:20px; }

/* Paw Prints */
.paw-prints-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.paw-print{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:rgba(139,90,43,0.4);
  opacity:0; animation:fx-twinkle 4s ease-in-out infinite;
  --fx-opacity:0.5; --fx-scale-end:1;
}
.paw-print::before{
  content:''; position:absolute; top:-4px; left:0; width:4px; height:4px;
  background:rgba(139,90,43,0.4); border-radius:50%;
  box-shadow:5px -1px 0 rgba(139,90,43,0.4), 1px -6px 0 rgba(139,90,43,0.4), 7px -5px 0 rgba(139,90,43,0.4);
}
.paw-print:nth-child(1){ left:15%; top:70%; animation-delay:0s; }
.paw-print:nth-child(2){ left:30%; top:55%; animation-delay:0.8s; }
.paw-print:nth-child(3){ left:45%; top:65%; animation-delay:1.5s; }
.paw-print:nth-child(4){ left:55%; top:50%; animation-delay:0.3s; }
.paw-print:nth-child(5){ left:70%; top:60%; animation-delay:2s; }
.paw-print:nth-child(6){ left:82%; top:75%; animation-delay:1s; }

/* Caterpillar */
.caterpillar-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.caterpillar-seg{
  position:absolute; bottom:10%; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #2ecc71, #27ae60);
  opacity:0.6; animation:fx-wave 3s ease-in-out infinite; --fx-sway:5px;
}
.caterpillar-seg:nth-child(1){ left:30%; animation-delay:0s; }
.caterpillar-seg:nth-child(2){ left:32.5%; animation-delay:0.15s; }
.caterpillar-seg:nth-child(3){ left:35%; animation-delay:0.3s; }
.caterpillar-seg:nth-child(4){ left:37.5%; animation-delay:0.45s; }
.caterpillar-seg:nth-child(5){ left:40%; animation-delay:0.6s; }
.caterpillar-seg:nth-child(6){ left:42.5%; animation-delay:0.75s; }
.caterpillar-seg:nth-child(7){ left:45%; animation-delay:0.9s; width:5px;height:5px; }
.caterpillar-seg:nth-child(8){ left:47%; animation-delay:1.05s; width:4px;height:4px; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 축하/파티 (Celebration)
   ═══════════════════════════════════════════════════ */

/* Balloons */
.balloons-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.balloon{
  position:absolute; bottom:-20px; width:16px; height:20px;
  border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;
  opacity:0; animation:fx-rise 10s ease-out infinite;
  --fx-travel:-550px; --fx-scale-start:0.8; --fx-scale-end:0.6; --fx-sway:25px; --fx-opacity:0.7;
}
.balloon::after{
  content:''; position:absolute; bottom:-6px; left:50%; width:1px; height:8px;
  background:rgba(0,0,0,0.2); transform:translateX(-50%);
}
.balloon:nth-child(1){ background:#ff6b6b; left:10%; }
.balloon:nth-child(2){ background:#ffd93d; left:25%; animation-delay:1.5s; }
.balloon:nth-child(3){ background:#6bcb77; left:40%; animation-delay:0.5s; }
.balloon:nth-child(4){ background:#4d96ff; left:55%; animation-delay:2s; }
.balloon:nth-child(5){ background:#ff6bcb; left:70%; animation-delay:1s; }
.balloon:nth-child(6){ background:#dda0dd; left:85%; animation-delay:2.5s; }

/* Streamers */
.streamers-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.streamer{
  position:absolute; width:3px; height:30px; border-radius:1px;
  opacity:0; animation:fx-fall 6s linear infinite;
  --fx-travel:650px; --fx-spin:720deg; --fx-sway:50px; --fx-opacity:0.8;
}
.streamer:nth-child(1){ left:5%; background:#ff6b6b; animation-duration:5s; }
.streamer:nth-child(2){ left:18%; background:#ffd93d; animation-duration:6.5s; animation-delay:0.3s; }
.streamer:nth-child(3){ left:30%; background:#6bcb77; animation-duration:5.5s; animation-delay:0.8s; }
.streamer:nth-child(4){ left:42%; background:#4d96ff; animation-duration:7s; animation-delay:0.1s; }
.streamer:nth-child(5){ left:55%; background:#ff6bcb; animation-duration:5.8s; animation-delay:1s; }
.streamer:nth-child(6){ left:68%; background:#ffa07a; animation-duration:6.2s; animation-delay:0.5s; }
.streamer:nth-child(7){ left:80%; background:#87ceeb; animation-duration:5.3s; animation-delay:1.5s; }
.streamer:nth-child(8){ left:92%; background:#dda0dd; animation-duration:6.8s; animation-delay:0.2s; }

/* Fireworks */
.fireworks-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.firework-spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  top:30%; left:50%; opacity:0; animation:fx-burst 3s ease-out infinite; --fx-scale-end:0.2;
}
.firework-spark:nth-child(1){ --fx-travel-x:60px; --fx-travel-y:-80px; background:#ff6b6b; }
.firework-spark:nth-child(2){ --fx-travel-x:-50px; --fx-travel-y:-70px; background:#ffd93d; animation-delay:0.1s; }
.firework-spark:nth-child(3){ --fx-travel-x:70px; --fx-travel-y:-40px; background:#6bcb77; animation-delay:0.05s; }
.firework-spark:nth-child(4){ --fx-travel-x:-60px; --fx-travel-y:-90px; background:#4d96ff; animation-delay:0.15s; }
.firework-spark:nth-child(5){ --fx-travel-x:30px; --fx-travel-y:-100px; background:#ff6bcb; animation-delay:0.08s; }
.firework-spark:nth-child(6){ --fx-travel-x:-80px; --fx-travel-y:-50px; background:#ffa07a; animation-delay:0.12s; }
.firework-spark:nth-child(7){ --fx-travel-x:50px; --fx-travel-y:-60px; background:#87ceeb; animation-delay:0.03s; }
.firework-spark:nth-child(8){ --fx-travel-x:-30px; --fx-travel-y:-85px; background:#dda0dd; animation-delay:0.18s; }

/* Party Poppers */
.party-poppers-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.popper-piece{
  position:absolute; bottom:0; width:6px; height:6px; border-radius:50%;
  opacity:0; animation:fx-burst 4s ease-out infinite; --fx-scale-end:0.2;
}
.popper-piece:nth-child(1){ left:5%; background:#ff6b6b; --fx-travel-x:60px; --fx-travel-y:-150px; }
.popper-piece:nth-child(2){ left:90%; background:#ffd93d; --fx-travel-x:-50px; --fx-travel-y:-120px; animation-delay:0.3s; }
.popper-piece:nth-child(3){ left:5%; background:#6bcb77; --fx-travel-x:80px; --fx-travel-y:-180px; animation-delay:0.2s; }
.popper-piece:nth-child(4){ left:90%; background:#4d96ff; --fx-travel-x:-70px; --fx-travel-y:-160px; animation-delay:0.5s; }
.popper-piece:nth-child(5){ left:5%; background:#ff6bcb; --fx-travel-x:40px; --fx-travel-y:-200px; animation-delay:0.1s; }
.popper-piece:nth-child(6){ left:90%; background:#dda0dd; --fx-travel-x:-90px; --fx-travel-y:-140px; animation-delay:0.4s; }

/* Gift Sparkle */
.gift-sparkle-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.gift-spark{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #ffd700, rgba(255,215,0,0.4));
  box-shadow:0 0 6px 2px rgba(255,215,0,0.3);
  opacity:0; animation:fx-twinkle 2.5s ease-in-out infinite;
  --fx-opacity:0.9; --fx-scale-end:1.3;
}
.gift-spark:nth-child(1){ left:30%; top:35%; }
.gift-spark:nth-child(2){ left:42%; top:45%; animation-delay:0.4s; }
.gift-spark:nth-child(3){ left:55%; top:30%; animation-delay:0.8s; }
.gift-spark:nth-child(4){ left:48%; top:55%; animation-delay:1.2s; }
.gift-spark:nth-child(5){ left:38%; top:50%; animation-delay:0.2s; }
.gift-spark:nth-child(6){ left:60%; top:40%; animation-delay:1.5s; }
.gift-spark:nth-child(7){ left:35%; top:60%; animation-delay:0.6s; }
.gift-spark:nth-child(8){ left:52%; top:25%; animation-delay:1s; }

/* Trophy Glint */
.trophy-glint-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.trophy-glint-spark{
  position:absolute; width:3px; height:3px; background:#fff; border-radius:50%;
  box-shadow:0 0 8px 3px rgba(255,255,255,0.6), 0 0 15px 5px rgba(255,215,0,0.2);
  opacity:0; animation:fx-twinkle 2s ease-in-out infinite;
  --fx-opacity:1; --fx-scale-end:1.5;
}
.trophy-glint-spark:nth-child(1){ left:35%; top:20%; }
.trophy-glint-spark:nth-child(2){ left:50%; top:15%; animation-delay:0.5s; }
.trophy-glint-spark:nth-child(3){ left:65%; top:25%; animation-delay:1s; }
.trophy-glint-spark:nth-child(4){ left:42%; top:30%; animation-delay:0.3s; }
.trophy-glint-spark:nth-child(5){ left:58%; top:10%; animation-delay:1.5s; }
.trophy-glint-spark:nth-child(6){ left:48%; top:35%; animation-delay:0.8s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 마법/판타지 (Magic/Fantasy)
   ═══════════════════════════════════════════════════ */

/* Fairy Dust */
.fairy-dust-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.fairy-mote{
  position:absolute; bottom:0; width:3px; height:3px; border-radius:50%;
  box-shadow:0 0 4px 1px currentColor;
  opacity:0; animation:fx-rise 6s ease-out infinite;
  --fx-travel:-400px; --fx-sway:20px; --fx-opacity:0.8;
}
.fairy-mote:nth-child(1){ color:#ff9ff3; background:#ff9ff3; left:8%; }
.fairy-mote:nth-child(2){ color:#feca57; background:#feca57; left:20%; animation-delay:0.8s; }
.fairy-mote:nth-child(3){ color:#48dbfb; background:#48dbfb; left:32%; animation-delay:0.3s; }
.fairy-mote:nth-child(4){ color:#ff6b6b; background:#ff6b6b; left:45%; animation-delay:1.5s; }
.fairy-mote:nth-child(5){ color:#1dd1a1; background:#1dd1a1; left:58%; animation-delay:0.6s; }
.fairy-mote:nth-child(6){ color:#c8d6e5; background:#c8d6e5; left:70%; animation-delay:2s; }
.fairy-mote:nth-child(7){ color:#ffd93d; background:#ffd93d; left:82%; animation-delay:1s; }
.fairy-mote:nth-child(8){ color:#a29bfe; background:#a29bfe; left:92%; animation-delay:1.8s; }

/* Wand Sparkle */
.wand-sparkle-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.wand-spark{
  position:absolute; top:40%; left:60%; width:4px; height:4px; border-radius:50%;
  background:#ffd700; box-shadow:0 0 8px 2px rgba(255,215,0,0.5);
  opacity:0; animation:fx-burst 2.5s ease-out infinite; --fx-scale-end:0.2;
}
.wand-spark:nth-child(1){ --fx-travel-x:40px; --fx-travel-y:-50px; }
.wand-spark:nth-child(2){ --fx-travel-x:-30px; --fx-travel-y:-40px; animation-delay:0.3s; }
.wand-spark:nth-child(3){ --fx-travel-x:50px; --fx-travel-y:20px; animation-delay:0.6s; }
.wand-spark:nth-child(4){ --fx-travel-x:-40px; --fx-travel-y:30px; animation-delay:0.9s; }
.wand-spark:nth-child(5){ --fx-travel-x:20px; --fx-travel-y:-60px; animation-delay:0.15s; }
.wand-spark:nth-child(6){ --fx-travel-x:-50px; --fx-travel-y:-20px; animation-delay:0.45s; }

/* Potion Bubbles */
.potion-bubbles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.potion-bubble{
  position:absolute; bottom:-10px; border-radius:50%;
  border:1px solid rgba(100,200,100,0.3);
  opacity:0; animation:fx-rise 7s ease-in infinite;
  --fx-travel:-500px; --fx-sway:15px; --fx-opacity:0.6;
}
.potion-bubble:nth-child(odd){ background:radial-gradient(circle at 30% 30%, rgba(100,255,100,0.3), rgba(50,200,50,0.1) 60%, transparent); }
.potion-bubble:nth-child(even){ background:radial-gradient(circle at 30% 30%, rgba(200,100,255,0.3), rgba(150,50,200,0.1) 60%, transparent); }
.potion-bubble:nth-child(1){ left:10%; width:12px;height:12px; animation-duration:6s; }
.potion-bubble:nth-child(2){ left:22%; width:8px;height:8px; animation-duration:7.5s; animation-delay:1s; }
.potion-bubble:nth-child(3){ left:35%; width:16px;height:16px; animation-duration:5.5s; animation-delay:0.5s; }
.potion-bubble:nth-child(4){ left:48%; width:10px;height:10px; animation-duration:8s; animation-delay:2s; }
.potion-bubble:nth-child(5){ left:60%; width:14px;height:14px; animation-duration:6.5s; animation-delay:0.8s; }
.potion-bubble:nth-child(6){ left:72%; width:9px;height:9px; animation-duration:7s; animation-delay:1.5s; }
.potion-bubble:nth-child(7){ left:85%; width:18px;height:18px; animation-duration:5s; animation-delay:2.5s; }
.potion-bubble:nth-child(8){ left:50%; width:11px;height:11px; animation-duration:9s; animation-delay:0.3s; }

/* Magic Circles */
.magic-circles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.magic-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(200,180,255,0.6);
  opacity:0; animation:fx-expand 4s ease-out infinite;
  --fx-opacity:0.6; --fx-scale-end:4;
}
.magic-ring:nth-child(1){ animation-delay:0s; }
.magic-ring:nth-child(2){ animation-delay:1.3s; }
.magic-ring:nth-child(3){ animation-delay:2.6s; }

/* Pixie Trail */
.pixie-trail-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.pixie-dot{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#ffd700; box-shadow:0 0 4px 1px rgba(255,215,0,0.5);
  opacity:0; animation:fx-flutter 5s ease-in-out infinite; --fx-opacity:0.8;
}
.pixie-dot:nth-child(1){ left:10%; top:30%; animation-duration:4.5s; }
.pixie-dot:nth-child(2){ left:20%; top:45%; animation-duration:5.5s; animation-delay:0.5s; }
.pixie-dot:nth-child(3){ left:32%; top:25%; animation-duration:4s; animation-delay:1s; }
.pixie-dot:nth-child(4){ left:45%; top:55%; animation-duration:6s; animation-delay:0.3s; }
.pixie-dot:nth-child(5){ left:55%; top:35%; animation-duration:5s; animation-delay:1.5s; }
.pixie-dot:nth-child(6){ left:65%; top:50%; animation-duration:4.5s; animation-delay:0.8s; }
.pixie-dot:nth-child(7){ left:75%; top:20%; animation-duration:5.5s; animation-delay:2s; }
.pixie-dot:nth-child(8){ left:85%; top:40%; animation-duration:4s; animation-delay:1.2s; }
.pixie-dot:nth-child(9){ left:40%; top:65%; animation-duration:6s; animation-delay:0.6s; }
.pixie-dot:nth-child(10){ left:60%; top:15%; animation-duration:5s; animation-delay:1.8s; }

/* Enchant Glow */
.enchant-glow-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.enchant-aura{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(200,180,255,0.15), transparent 70%);
  opacity:0; animation:fx-pulse 5s ease-in-out infinite;
  --fx-opacity:0.8; --fx-opacity-min:0.2; --fx-scale-end:1.05;
}

/* Stardust */
.stardust-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.stardust-mote{
  position:absolute; width:2px; height:2px; border-radius:50%;
  box-shadow:0 0 3px 1px currentColor;
  opacity:0; animation:fx-twinkle 3s ease-in-out infinite;
  --fx-opacity:0.9; --fx-scale-end:1.5;
}
.stardust-mote:nth-child(1){ color:#fff; background:#fff; left:8%; top:12%; }
.stardust-mote:nth-child(2){ color:#ffd700; background:#ffd700; left:18%; top:28%; animation-delay:0.4s; }
.stardust-mote:nth-child(3){ color:#ff9ff3; background:#ff9ff3; left:30%; top:18%; animation-delay:0.8s; }
.stardust-mote:nth-child(4){ color:#48dbfb; background:#48dbfb; left:42%; top:35%; animation-delay:1.2s; }
.stardust-mote:nth-child(5){ color:#fff; background:#fff; left:55%; top:22%; animation-delay:0.2s; }
.stardust-mote:nth-child(6){ color:#ffd700; background:#ffd700; left:65%; top:45%; animation-delay:1.5s; }
.stardust-mote:nth-child(7){ color:#ff9ff3; background:#ff9ff3; left:75%; top:15%; animation-delay:0.6s; }
.stardust-mote:nth-child(8){ color:#48dbfb; background:#48dbfb; left:85%; top:30%; animation-delay:1s; }
.stardust-mote:nth-child(9){ color:#1dd1a1; background:#1dd1a1; left:50%; top:55%; animation-delay:1.8s; }
.stardust-mote:nth-child(10){ color:#feca57; background:#feca57; left:38%; top:65%; animation-delay:0.3s; }

/* Aurora */
.aurora-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.aurora-band{
  position:absolute; left:-20%; width:140%; height:40%;
  border-radius:0 0 50% 50%;
  opacity:0; animation:fx-pulse 8s ease-in-out infinite;
  --fx-opacity:0.25; --fx-opacity-min:0.05; --fx-scale-end:1.02;
}
.aurora-band:nth-child(1){ top:0; background:linear-gradient(90deg, transparent, rgba(100,255,200,0.3), transparent); }
.aurora-band:nth-child(2){ top:5%; background:linear-gradient(90deg, transparent, rgba(100,200,255,0.2), transparent); animation-delay:2s; }
.aurora-band:nth-child(3){ top:10%; background:linear-gradient(90deg, transparent, rgba(200,100,255,0.2), transparent); animation-delay:4s; }

/* Teleport */
.teleport-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.teleport-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  border:3px solid rgba(100,200,255,0.7);
  box-shadow:0 0 10px rgba(100,200,255,0.4);
  opacity:0; animation:fx-expand 2s ease-out infinite;
  --fx-opacity:0.8; --fx-scale-end:6;
}
.teleport-ring:nth-child(1){ animation-delay:0s; }
.teleport-ring:nth-child(2){ animation-delay:0.6s; }
.teleport-ring:nth-child(3){ animation-delay:1.2s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 감정 (Emotions)
   ═══════════════════════════════════════════════════ */

/* Happy Tears */
.happy-tears-container{ position:absolute; pointer-events:none; z-index:10; }
.happy-tear{
  position:absolute; width:3px; height:6px;
  background:linear-gradient(180deg, rgba(100,180,255,0.7), rgba(80,150,255,0.8));
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  opacity:0; animation:tear-fall 2.5s ease-in infinite;
}
.happy-tear:nth-child(1){ left:0; animation-delay:0s; }
.happy-tear:nth-child(2){ left:6px; animation-delay:1.5s; }

/* Blush */
.blush-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.blush-spot{
  position:absolute; width:30px; height:20px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,150,150,0.4), transparent 70%);
  opacity:0; animation:fx-pulse 3s ease-in-out infinite;
  --fx-opacity:0.6; --fx-opacity-min:0.2; --fx-scale-end:1.1;
}
.blush-spot:nth-child(1){ top:45%; left:25%; }
.blush-spot:nth-child(2){ top:45%; right:25%; animation-delay:0.5s; }

/* Anger Steam */
.anger-steam-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.anger-puff{
  position:absolute; top:5%; width:15px; height:20px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle, rgba(255,80,80,0.5), rgba(200,50,50,0.2) 60%, transparent);
  opacity:0; animation:fx-rise 3s ease-out infinite;
  --fx-travel:-80px; --fx-sway:5px; --fx-opacity:0.6;
}
.anger-puff:nth-child(1){ left:25%; animation-delay:0s; }
.anger-puff:nth-child(2){ left:45%; animation-delay:0.8s; }
.anger-puff:nth-child(3){ left:60%; animation-delay:0.3s; }
.anger-puff:nth-child(4){ left:75%; animation-delay:1.2s; }

/* Surprise Pop */
.surprise-pop-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.surprise-mark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#ffd93d; box-shadow:0 0 8px 2px rgba(255,217,61,0.4);
  opacity:0; animation:fx-burst 2s ease-out infinite; --fx-scale-end:0.3;
}
.surprise-mark:nth-child(1){ top:30%; left:50%; --fx-travel-x:40px; --fx-travel-y:-60px; }
.surprise-mark:nth-child(2){ top:30%; left:50%; --fx-travel-x:-35px; --fx-travel-y:-50px; animation-delay:0.2s; }
.surprise-mark:nth-child(3){ top:30%; left:50%; --fx-travel-x:50px; --fx-travel-y:-30px; animation-delay:0.1s; }
.surprise-mark:nth-child(4){ top:30%; left:50%; --fx-travel-x:-45px; --fx-travel-y:-70px; animation-delay:0.3s; }
.surprise-mark:nth-child(5){ top:30%; left:50%; --fx-travel-x:20px; --fx-travel-y:-80px; animation-delay:0.15s; }
.surprise-mark:nth-child(6){ top:30%; left:50%; --fx-travel-x:-60px; --fx-travel-y:-40px; animation-delay:0.25s; }

/* Laughter */
.laughter-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.laugh-bubble{
  position:absolute; bottom:30%; width:8px; height:8px; border-radius:50%;
  background:rgba(255,223,100,0.5); box-shadow:0 0 4px 1px rgba(255,223,100,0.2);
  opacity:0; animation:fx-rise 4s ease-out infinite;
  --fx-travel:-200px; --fx-sway:15px; --fx-opacity:0.7;
}
.laugh-bubble:nth-child(1){ left:25%; animation-delay:0s; }
.laugh-bubble:nth-child(2){ left:38%; animation-delay:0.5s; }
.laugh-bubble:nth-child(3){ left:50%; animation-delay:1s; }
.laugh-bubble:nth-child(4){ left:62%; animation-delay:0.3s; }
.laugh-bubble:nth-child(5){ left:75%; animation-delay:1.5s; }
.laugh-bubble:nth-child(6){ left:45%; animation-delay:0.8s; }

/* Sleepy (낮잠 Z) */
.sleepy-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sleepy-z{
  position:absolute; bottom:40%; right:20%; font-size:14px; font-weight:bold;
  color:rgba(100,130,200,0.75); font-family:serif;
  opacity:0; animation:fx-rise 5s ease-out infinite;
  --fx-travel:-150px; --fx-sway:20px; --fx-opacity:0.7; --fx-scale-start:0.6; --fx-scale-end:1.2;
}
.sleepy-z::before{ content:'Z'; }
.sleepy-z:nth-child(1){ font-size:14px; }
.sleepy-z:nth-child(2){ font-size:18px; right:15%; animation-delay:1.5s; }
.sleepy-z:nth-child(3){ font-size:12px; right:25%; animation-delay:3s; }

/* Love Float */
.love-float-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.love-particle{
  position:absolute; bottom:0; opacity:0;
  animation:fx-rise 7s ease-out infinite;
  --fx-travel:-450px; --fx-sway:25px; --fx-opacity:0.7;
}
.love-particle:nth-child(odd)::before,.love-particle:nth-child(odd)::after{
  content:''; position:absolute; width:6px; height:10px; background:#ff6b81;
  border-radius:6px 6px 0 0;
}
.love-particle:nth-child(odd)::before{ left:0; transform:rotate(-45deg); transform-origin:bottom right; }
.love-particle:nth-child(odd)::after{ left:3px; transform:rotate(45deg); transform-origin:bottom left; }
.love-particle:nth-child(even){
  width:4px; height:4px; border-radius:50%; background:#ffd700;
  box-shadow:0 0 4px 1px rgba(255,215,0,0.4);
}
.love-particle:nth-child(1){ left:10%; }
.love-particle:nth-child(2){ left:22%; animation-delay:1s; }
.love-particle:nth-child(3){ left:35%; animation-delay:0.5s; }
.love-particle:nth-child(4){ left:48%; animation-delay:2s; }
.love-particle:nth-child(5){ left:60%; animation-delay:0.8s; }
.love-particle:nth-child(6){ left:72%; animation-delay:1.5s; }
.love-particle:nth-child(7){ left:85%; animation-delay:2.5s; }
.love-particle:nth-child(8){ left:50%; animation-delay:0.3s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 계절 (Seasons)
   ═══════════════════════════════════════════════════ */

/* Spring Blossoms */
.spring-blossoms-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.spring-blossom{
  position:absolute; width:8px; height:8px; border-radius:50%;
  opacity:0; animation:fx-fall 10s linear infinite;
  --fx-travel:600px; --fx-spin:180deg; --fx-sway:30px; --fx-opacity:0.7;
}
.spring-blossom:nth-child(odd){ background:radial-gradient(circle, #ffb7c5, rgba(255,183,197,0.4)); }
.spring-blossom:nth-child(even){ background:radial-gradient(circle, #fff, rgba(255,255,255,0.4)); }
.spring-blossom:nth-child(1){ left:8%; animation-duration:9s; }
.spring-blossom:nth-child(2){ left:20%; animation-duration:11s; animation-delay:0.5s; }
.spring-blossom:nth-child(3){ left:32%; animation-duration:8s; animation-delay:1s; }
.spring-blossom:nth-child(4){ left:45%; animation-duration:10s; animation-delay:1.5s; width:6px;height:6px; }
.spring-blossom:nth-child(5){ left:58%; animation-duration:9.5s; animation-delay:0.3s; }
.spring-blossom:nth-child(6){ left:70%; animation-duration:12s; animation-delay:2s; width:10px;height:10px; }
.spring-blossom:nth-child(7){ left:82%; animation-duration:8.5s; animation-delay:0.8s; }
.spring-blossom:nth-child(8){ left:92%; animation-duration:10.5s; animation-delay:2.5s; }

/* Summer Heat */
.summer-heat-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.heat-wave{
  position:absolute; bottom:0; left:0; right:0; height:40%;
  background:linear-gradient(0deg, rgba(255,200,100,0.1) 0%, transparent 100%);
  opacity:0; animation:fx-pulse 4s ease-in-out infinite;
  --fx-opacity:0.5; --fx-opacity-min:0.1; --fx-scale-end:1.02;
}
.heat-wave:nth-child(2){ height:30%; animation-delay:2s; }

/* Autumn Harvest */
.autumn-harvest-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.harvest-particle{
  position:absolute; border-radius:50%;
  opacity:0; animation:fx-fall 9s linear infinite;
  --fx-travel:600px; --fx-spin:360deg; --fx-sway:40px; --fx-opacity:0.8;
}
.harvest-particle:nth-child(1){ left:8%; width:8px; height:10px; background:#e67e22; border-radius:50% 50% 50% 50% / 40% 40% 60% 60%; animation-duration:8s; }
.harvest-particle:nth-child(2){ left:22%; width:14px; height:10px; background:linear-gradient(135deg,#d4a03c,#c47e2b); border-radius:2px 80% 2px 80%; animation-duration:10s; animation-delay:0.5s; }
.harvest-particle:nth-child(3){ left:38%; width:6px; height:6px; background:#c0392b; animation-duration:7.5s; animation-delay:1s; }
.harvest-particle:nth-child(4){ left:55%; width:12px; height:8px; background:linear-gradient(135deg,#c0392b,#e67e22); border-radius:2px 80% 2px 80%; animation-duration:9s; animation-delay:2s; }
.harvest-particle:nth-child(5){ left:70%; width:8px; height:8px; background:#8B6914; animation-duration:8.5s; animation-delay:0.8s; }
.harvest-particle:nth-child(6){ left:85%; width:10px; height:7px; background:linear-gradient(135deg,#d4a03c,#c47e2b); border-radius:2px 80% 2px 80%; animation-duration:10.5s; animation-delay:1.5s; }

/* Winter Frost */
.winter-frost-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.frost-crystal{
  position:absolute; width:6px; height:6px;
  background:radial-gradient(circle, rgba(200,230,255,0.9), rgba(150,200,255,0.4) 60%, transparent);
  box-shadow:0 0 4px 1px rgba(200,230,255,0.3);
  border-radius:50%; opacity:0; animation:fx-twinkle 4s ease-in-out infinite;
  --fx-opacity:0.8; --fx-scale-end:1.3;
}
.frost-crystal:nth-child(1){ left:5%; top:10%; }
.frost-crystal:nth-child(2){ left:15%; top:25%; animation-delay:0.5s; }
.frost-crystal:nth-child(3){ left:28%; top:8%; animation-delay:1s; width:4px;height:4px; }
.frost-crystal:nth-child(4){ left:42%; top:20%; animation-delay:0.3s; }
.frost-crystal:nth-child(5){ left:55%; top:12%; animation-delay:1.5s; width:5px;height:5px; }
.frost-crystal:nth-child(6){ left:68%; top:28%; animation-delay:0.8s; }
.frost-crystal:nth-child(7){ left:80%; top:15%; animation-delay:2s; width:7px;height:7px; }
.frost-crystal:nth-child(8){ left:90%; top:22%; animation-delay:1.2s; }
.frost-crystal:nth-child(9){ left:35%; top:80%; animation-delay:0.6s; width:4px;height:4px; }
.frost-crystal:nth-child(10){ left:75%; top:85%; animation-delay:1.8s; }

/* Spring Rain */
.spring-rain-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.spring-drop{
  position:absolute; width:1px; height:12px;
  background:linear-gradient(180deg, transparent, rgba(150,220,180,0.4) 50%, rgba(150,220,180,0.6));
  border-radius:0 0 1px 1px; opacity:0; animation:fx-fall 2.5s linear infinite;
  --fx-travel:600px; --fx-spin:0deg; --fx-sway:8px; --fx-opacity:0.5;
}
.spring-drop:nth-child(1){ left:5%; animation-duration:2.3s; }
.spring-drop:nth-child(2){ left:15%; animation-duration:2.8s; animation-delay:0.3s; }
.spring-drop:nth-child(3){ left:25%; animation-duration:2.1s; animation-delay:0.6s; }
.spring-drop:nth-child(4){ left:35%; animation-duration:2.6s; animation-delay:0.1s; }
.spring-drop:nth-child(5){ left:45%; animation-duration:2.4s; animation-delay:0.8s; }
.spring-drop:nth-child(6){ left:55%; animation-duration:2.9s; animation-delay:0.4s; }
.spring-drop:nth-child(7){ left:65%; animation-duration:2.2s; animation-delay:0.7s; }
.spring-drop:nth-child(8){ left:75%; animation-duration:2.7s; animation-delay:0.2s; }
.spring-drop:nth-child(9){ left:85%; animation-duration:2.5s; animation-delay:0.5s; }
.spring-drop:nth-child(10){ left:92%; animation-duration:3s; animation-delay:0.9s; }

/* Summer Splash */
.summer-splash-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.splash-drop{
  position:absolute; bottom:10%; left:50%; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(100,180,255,0.8), rgba(70,150,230,0.4));
  opacity:0; animation:fx-burst 3s ease-out infinite; --fx-scale-end:0.3;
}
.splash-drop:nth-child(1){ --fx-travel-x:30px; --fx-travel-y:-80px; }
.splash-drop:nth-child(2){ --fx-travel-x:-25px; --fx-travel-y:-70px; animation-delay:0.2s; }
.splash-drop:nth-child(3){ --fx-travel-x:45px; --fx-travel-y:-60px; animation-delay:0.4s; }
.splash-drop:nth-child(4){ --fx-travel-x:-40px; --fx-travel-y:-90px; animation-delay:0.1s; }
.splash-drop:nth-child(5){ --fx-travel-x:15px; --fx-travel-y:-100px; animation-delay:0.3s; }
.splash-drop:nth-child(6){ --fx-travel-x:-55px; --fx-travel-y:-50px; animation-delay:0.5s; }

/* Autumn Wind */
.autumn-wind-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.wind-leaf{
  position:absolute; width:12px; height:8px; border-radius:2px 80% 2px 80%;
  opacity:0; animation:fx-drift-h 4s linear infinite;
  --fx-opacity:0.7; --fx-start-x:-40px; --fx-travel-x:400px;
}
.wind-leaf:nth-child(odd){ background:linear-gradient(135deg, #d4a03c, #c47e2b); }
.wind-leaf:nth-child(even){ background:linear-gradient(135deg, #c0392b, #e67e22); }
.wind-leaf:nth-child(1){ top:20%; animation-duration:3.5s; }
.wind-leaf:nth-child(2){ top:35%; animation-duration:4.5s; animation-delay:0.5s; }
.wind-leaf:nth-child(3){ top:50%; animation-duration:3s; animation-delay:1s; }
.wind-leaf:nth-child(4){ top:65%; animation-duration:5s; animation-delay:0.3s; }
.wind-leaf:nth-child(5){ top:45%; animation-duration:3.8s; animation-delay:1.5s; }
.wind-leaf:nth-child(6){ top:75%; animation-duration:4.2s; animation-delay:0.8s; }

/* Snowfall Heavy */
.snowfall-heavy-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.heavy-snowflake{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 60%, transparent 100%);
  opacity:0; animation:fx-fall 5s linear infinite;
  --fx-travel:650px; --fx-spin:180deg; --fx-sway:50px; --fx-opacity:0.9;
}
.heavy-snowflake:nth-child(1){ left:3%; width:10px;height:10px; animation-duration:4s; }
.heavy-snowflake:nth-child(2){ left:10%; width:12px;height:12px; animation-duration:5s; animation-delay:0.3s; }
.heavy-snowflake:nth-child(3){ left:17%; width:8px;height:8px; animation-duration:4.5s; animation-delay:0.7s; }
.heavy-snowflake:nth-child(4){ left:24%; width:14px;height:14px; animation-duration:3.5s; animation-delay:0.1s; }
.heavy-snowflake:nth-child(5){ left:31%; width:9px;height:9px; animation-duration:5.5s; animation-delay:0.5s; }
.heavy-snowflake:nth-child(6){ left:38%; width:11px;height:11px; animation-duration:4s; animation-delay:1s; }
.heavy-snowflake:nth-child(7){ left:45%; width:13px;height:13px; animation-duration:4.8s; animation-delay:0.2s; }
.heavy-snowflake:nth-child(8){ left:52%; width:8px;height:8px; animation-duration:5.2s; animation-delay:0.8s; }
.heavy-snowflake:nth-child(9){ left:59%; width:10px;height:10px; animation-duration:3.8s; animation-delay:0.4s; }
.heavy-snowflake:nth-child(10){ left:66%; width:12px;height:12px; animation-duration:4.5s; animation-delay:1.2s; }
.heavy-snowflake:nth-child(11){ left:73%; width:9px;height:9px; animation-duration:5s; animation-delay:0.6s; }
.heavy-snowflake:nth-child(12){ left:80%; width:11px;height:11px; animation-duration:3.5s; animation-delay:0.9s; }
.heavy-snowflake:nth-child(13){ left:87%; width:14px;height:14px; animation-duration:4.2s; animation-delay:0.15s; }
.heavy-snowflake:nth-child(14){ left:93%; width:8px;height:8px; animation-duration:5.8s; animation-delay:1.5s; }
.heavy-snowflake:nth-child(15){ left:97%; width:10px;height:10px; animation-duration:4.5s; animation-delay:0.35s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 음식/간식 (Food/Snacks)
   ═══════════════════════════════════════════════════ */

/* Candy Rain */
.candy-rain-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.candy{
  position:absolute; width:8px; height:8px; border-radius:50%;
  opacity:0; animation:fx-fall 6s linear infinite;
  --fx-travel:600px; --fx-spin:360deg; --fx-sway:30px; --fx-opacity:0.8;
}
.candy:nth-child(1){ left:5%; background:#ff6b6b; animation-duration:5s; }
.candy:nth-child(2){ left:18%; background:#ffd93d; border-radius:2px; animation-duration:6.5s; animation-delay:0.3s; }
.candy:nth-child(3){ left:30%; background:#6bcb77; animation-duration:5.5s; animation-delay:0.8s; }
.candy:nth-child(4){ left:42%; background:#ff6bcb; border-radius:2px; animation-duration:7s; animation-delay:0.1s; }
.candy:nth-child(5){ left:55%; background:#4d96ff; animation-duration:5.8s; animation-delay:1s; }
.candy:nth-child(6){ left:68%; background:#ffa07a; border-radius:2px; animation-duration:6.2s; animation-delay:0.5s; }
.candy:nth-child(7){ left:80%; background:#dda0dd; animation-duration:5.3s; animation-delay:1.5s; }
.candy:nth-child(8){ left:92%; background:#87ceeb; border-radius:2px; animation-duration:6.8s; animation-delay:0.2s; }

/* Sprinkles */
.sprinkles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sprinkle{
  position:absolute; width:3px; height:8px; border-radius:1px;
  opacity:0; animation:fx-fall 5s linear infinite;
  --fx-travel:600px; --fx-spin:540deg; --fx-sway:20px; --fx-opacity:0.8;
}
.sprinkle:nth-child(1){ left:5%; background:#ff6b6b; animation-duration:4s; }
.sprinkle:nth-child(2){ left:15%; background:#ffd93d; animation-duration:5s; animation-delay:0.2s; }
.sprinkle:nth-child(3){ left:25%; background:#6bcb77; animation-duration:4.5s; animation-delay:0.5s; }
.sprinkle:nth-child(4){ left:35%; background:#4d96ff; animation-duration:5.5s; animation-delay:0.1s; }
.sprinkle:nth-child(5){ left:45%; background:#ff6bcb; animation-duration:4.2s; animation-delay:0.8s; }
.sprinkle:nth-child(6){ left:55%; background:#ffa07a; animation-duration:5.2s; animation-delay:0.3s; }
.sprinkle:nth-child(7){ left:65%; background:#87ceeb; animation-duration:4.8s; animation-delay:1s; }
.sprinkle:nth-child(8){ left:75%; background:#dda0dd; animation-duration:5.5s; animation-delay:0.6s; }
.sprinkle:nth-child(9){ left:85%; background:#98fb98; animation-duration:4.3s; animation-delay:1.2s; }
.sprinkle:nth-child(10){ left:92%; background:#ff69b4; animation-duration:5.8s; animation-delay:0.4s; }

/* Honey Drip */
.honey-drip-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.honey-drop{
  position:absolute; width:6px; height:10px;
  background:linear-gradient(180deg, rgba(255,193,7,0.8), rgba(230,160,0,0.9));
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  opacity:0; animation:fx-fall 8s linear infinite;
  --fx-travel:600px; --fx-spin:0deg; --fx-sway:5px; --fx-opacity:0.7;
}
.honey-drop:nth-child(1){ left:12%; animation-duration:7s; }
.honey-drop:nth-child(2){ left:28%; animation-duration:9s; animation-delay:1s; }
.honey-drop:nth-child(3){ left:45%; animation-duration:6.5s; animation-delay:0.5s; width:5px;height:8px; }
.honey-drop:nth-child(4){ left:60%; animation-duration:8s; animation-delay:2s; }
.honey-drop:nth-child(5){ left:75%; animation-duration:7.5s; animation-delay:0.8s; }
.honey-drop:nth-child(6){ left:88%; animation-duration:9.5s; animation-delay:1.5s; width:7px;height:12px; }

/* Cookie Crumbs */
.cookie-crumbs-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.cookie-crumb{
  position:absolute; border-radius:30%;
  background:linear-gradient(135deg, #d4a03c, #c47e2b);
  opacity:0; animation:fx-fall 7s linear infinite;
  --fx-travel:600px; --fx-spin:270deg; --fx-sway:25px; --fx-opacity:0.7;
}
.cookie-crumb:nth-child(1){ left:8%; width:5px;height:4px; animation-duration:6s; }
.cookie-crumb:nth-child(2){ left:20%; width:3px;height:3px; animation-duration:7.5s; animation-delay:0.5s; }
.cookie-crumb:nth-child(3){ left:32%; width:6px;height:5px; animation-duration:5.5s; animation-delay:1s; }
.cookie-crumb:nth-child(4){ left:45%; width:4px;height:3px; animation-duration:8s; animation-delay:0.3s; }
.cookie-crumb:nth-child(5){ left:58%; width:7px;height:6px; animation-duration:6.5s; animation-delay:1.5s; }
.cookie-crumb:nth-child(6){ left:70%; width:3px;height:4px; animation-duration:7s; animation-delay:0.8s; }
.cookie-crumb:nth-child(7){ left:82%; width:5px;height:5px; animation-duration:5s; animation-delay:2s; }
.cookie-crumb:nth-child(8){ left:92%; width:4px;height:3px; animation-duration:7.5s; animation-delay:0.2s; }

/* Popcorn Pop */
.popcorn-pop-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.popcorn{
  position:absolute; bottom:20%; width:8px; height:8px; border-radius:40%;
  background:radial-gradient(circle at 40% 30%, #fff8dc, #f5deb3);
  box-shadow:0 0 2px rgba(200,180,100,0.3);
  opacity:0; animation:fx-burst 3s ease-out infinite; --fx-scale-end:0.4;
}
.popcorn:nth-child(1){ left:30%; --fx-travel-x:20px; --fx-travel-y:-100px; }
.popcorn:nth-child(2){ left:45%; --fx-travel-x:-15px; --fx-travel-y:-80px; animation-delay:0.5s; }
.popcorn:nth-child(3){ left:60%; --fx-travel-x:30px; --fx-travel-y:-110px; animation-delay:1s; }
.popcorn:nth-child(4){ left:40%; --fx-travel-x:-25px; --fx-travel-y:-90px; animation-delay:1.5s; }
.popcorn:nth-child(5){ left:55%; --fx-travel-x:10px; --fx-travel-y:-120px; animation-delay:0.8s; }
.popcorn:nth-child(6){ left:35%; --fx-travel-x:-35px; --fx-travel-y:-70px; animation-delay:1.3s; }

/* Cotton Candy */
.cotton-candy-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.cotton-puff{
  position:absolute; border-radius:50%;
  opacity:0; animation:fx-float 8s ease-in-out infinite; --fx-opacity:0.5;
}
.cotton-puff:nth-child(odd){ background:radial-gradient(circle, rgba(255,182,193,0.5), rgba(255,150,180,0.2) 60%, transparent); }
.cotton-puff:nth-child(even){ background:radial-gradient(circle, rgba(173,216,255,0.5), rgba(150,200,255,0.2) 60%, transparent); }
.cotton-puff:nth-child(1){ left:10%; top:20%; width:30px;height:25px; animation-duration:7s; }
.cotton-puff:nth-child(2){ left:30%; top:45%; width:25px;height:20px; animation-duration:9s; animation-delay:1s; }
.cotton-puff:nth-child(3){ left:50%; top:30%; width:35px;height:28px; animation-duration:6.5s; animation-delay:0.5s; }
.cotton-puff:nth-child(4){ left:70%; top:55%; width:28px;height:22px; animation-duration:8.5s; animation-delay:2s; }
.cotton-puff:nth-child(5){ left:85%; top:35%; width:22px;height:18px; animation-duration:7.5s; animation-delay:0.8s; }
.cotton-puff:nth-child(6){ left:45%; top:65%; width:32px;height:26px; animation-duration:9.5s; animation-delay:1.5s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 음악/소리 (Music/Sound)
   ═══════════════════════════════════════════════════ */

/* Music Notes (문자 없으면 비어 보임 → ::before로 음표 표시) */
.music-notes-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.music-note{
  position:absolute; bottom:0; font-size:16px; line-height:1;
  color:rgba(80,80,80,0.5);
  opacity:0; animation:fx-rise 6s ease-out infinite;
  --fx-travel:-400px; --fx-sway:30px; --fx-opacity:0.6;
}
.music-note::before{ content:'\266A'; }
.music-note:nth-child(1){ left:15%; animation-delay:0s; }
.music-note:nth-child(2){ left:30%; animation-delay:1s; font-size:20px; }
.music-note:nth-child(3){ left:45%; animation-delay:0.5s; font-size:14px; }
.music-note:nth-child(4){ left:60%; animation-delay:2s; }
.music-note:nth-child(5){ left:75%; animation-delay:0.8s; font-size:18px; }
.music-note:nth-child(6){ left:88%; animation-delay:1.5s; font-size:12px; }

/* Sound Waves */
.sound-waves-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sound-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(100,150,200,0.4);
  opacity:0; animation:fx-expand 3s ease-out infinite;
  --fx-opacity:0.5; --fx-scale-end:5;
}
.sound-ring:nth-child(1){ animation-delay:0s; }
.sound-ring:nth-child(2){ animation-delay:1s; }
.sound-ring:nth-child(3){ animation-delay:2s; }

/* Bells */
.bells-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.bell-sparkle{
  position:absolute; width:6px; height:8px;
  background:radial-gradient(circle at 50% 30%, #ffd700, rgba(255,215,0,0.4) 60%, transparent);
  border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;
  box-shadow:0 0 4px 1px rgba(255,215,0,0.3);
  opacity:0; animation:fx-sway 2s ease-in-out infinite;
  --fx-angle-start:-10deg; --fx-angle-end:10deg;
}
.bell-sparkle:nth-child(1){ left:12%; top:15%; }
.bell-sparkle:nth-child(2){ left:30%; top:25%; animation-delay:0.4s; }
.bell-sparkle:nth-child(3){ left:48%; top:10%; animation-delay:0.8s; }
.bell-sparkle:nth-child(4){ left:62%; top:20%; animation-delay:1.2s; }
.bell-sparkle:nth-child(5){ left:78%; top:15%; animation-delay:0.2s; }
.bell-sparkle:nth-child(6){ left:90%; top:28%; animation-delay:1.5s; }

/* Chime */
.chime-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.chime-line{
  position:absolute; top:10%; width:1px;
  background:linear-gradient(180deg, rgba(192,192,192,0.5), rgba(220,220,220,0.3) 50%, rgba(192,192,192,0.5));
  opacity:0; animation:fx-pulse 3s ease-in-out infinite;
  --fx-opacity:0.6; --fx-opacity-min:0.2; --fx-scale-end:1;
}
.chime-line:nth-child(1){ left:20%; height:50px; }
.chime-line:nth-child(2){ left:35%; height:60px; animation-delay:0.5s; }
.chime-line:nth-child(3){ left:50%; height:70px; animation-delay:1s; }
.chime-line:nth-child(4){ left:65%; height:55px; animation-delay:1.5s; }
.chime-line:nth-child(5){ left:80%; height:45px; animation-delay:2s; }

/* Drum Beats */
.drum-beats-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.drum-pulse{
  position:absolute; bottom:10%; left:50%; transform:translateX(-50%);
  width:20px; height:10px; border-radius:50%;
  border:2px solid rgba(200,100,50,0.5);
  opacity:0; animation:fx-expand 2s ease-out infinite;
  --fx-opacity:0.6; --fx-scale-end:4;
}
.drum-pulse:nth-child(1){ animation-delay:0s; }
.drum-pulse:nth-child(2){ animation-delay:0.7s; }
.drum-pulse:nth-child(3){ animation-delay:1.4s; }

/* Singing */
.singing-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sing-wave{
  position:absolute; bottom:30%; width:30px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,180,100,0.5), transparent);
  opacity:0; animation:fx-rise 5s ease-out infinite;
  --fx-travel:-200px; --fx-sway:15px; --fx-opacity:0.5;
}
.sing-wave:nth-child(1){ left:20%; animation-delay:0s; }
.sing-wave:nth-child(2){ left:35%; animation-delay:0.8s; width:25px; }
.sing-wave:nth-child(3){ left:50%; animation-delay:0.3s; }
.sing-wave:nth-child(4){ left:65%; animation-delay:1.5s; width:35px; }
.sing-wave:nth-child(5){ left:78%; animation-delay:0.6s; }
.sing-wave:nth-child(6){ left:42%; animation-delay:1s; width:28px; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 밤/잠 (Night/Sleep)
   ═══════════════════════════════════════════════════ */

/* Twinkling Stars */
.twinkling-stars-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.twinkle-star{
  position:absolute; width:3px; height:3px; background:#fff; border-radius:50%;
  box-shadow:0 0 4px 1px rgba(255,255,255,0.6);
  opacity:0; animation:fx-twinkle 3s ease-in-out infinite;
  --fx-opacity:0.9; --fx-scale-end:1.5;
}
.twinkle-star:nth-child(1){ left:5%; top:8%; }
.twinkle-star:nth-child(2){ left:15%; top:18%; animation-delay:0.5s; width:2px;height:2px; }
.twinkle-star:nth-child(3){ left:25%; top:5%; animation-delay:1s; }
.twinkle-star:nth-child(4){ left:35%; top:22%; animation-delay:0.3s; width:4px;height:4px; }
.twinkle-star:nth-child(5){ left:45%; top:10%; animation-delay:1.5s; }
.twinkle-star:nth-child(6){ left:55%; top:25%; animation-delay:0.8s; width:2px;height:2px; }
.twinkle-star:nth-child(7){ left:65%; top:8%; animation-delay:2s; }
.twinkle-star:nth-child(8){ left:75%; top:20%; animation-delay:0.2s; }
.twinkle-star:nth-child(9){ left:85%; top:12%; animation-delay:1.2s; width:4px;height:4px; }
.twinkle-star:nth-child(10){ left:92%; top:5%; animation-delay:0.6s; }
.twinkle-star:nth-child(11){ left:40%; top:35%; animation-delay:1.8s; width:2px;height:2px; }
.twinkle-star:nth-child(12){ left:70%; top:30%; animation-delay:0.4s; }

/* Crescent Moon */
.crescent-moon-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.moon-glow{
  position:absolute; top:10%; right:15%; width:30px; height:30px; border-radius:50%;
  background:transparent;
  box-shadow:inset -10px 0 0 rgba(255,240,180,0.8), 0 0 20px 5px rgba(255,240,180,0.2);
  opacity:0; animation:fx-pulse 6s ease-in-out infinite;
  --fx-opacity:0.8; --fx-opacity-min:0.5; --fx-scale-end:1.05;
}

/* Dream Clouds */
.dream-clouds-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.dream-cloud{
  position:absolute; border-radius:50%;
  opacity:0; animation:fx-drift-h 25s linear infinite;
  --fx-opacity:0.3; --fx-start-x:-120px; --fx-travel-x:450px;
}
.dream-cloud:nth-child(odd){ background:radial-gradient(circle, rgba(200,180,255,0.3), transparent 70%); }
.dream-cloud:nth-child(even){ background:radial-gradient(circle, rgba(180,200,255,0.3), transparent 70%); }
.dream-cloud:nth-child(1){ top:15%; width:120px;height:50px; animation-duration:22s; }
.dream-cloud:nth-child(2){ top:35%; width:100px;height:40px; animation-duration:28s; animation-delay:5s; }
.dream-cloud:nth-child(3){ top:55%; width:140px;height:55px; animation-duration:20s; animation-delay:10s; }
.dream-cloud:nth-child(4){ top:70%; width:90px;height:35px; animation-duration:26s; animation-delay:3s; }

/* Counting Sheep */
.counting-sheep-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sheep{
  position:absolute; bottom:30%; width:14px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #fff, rgba(240,240,240,0.8));
  box-shadow:0 0 4px rgba(255,255,255,0.3);
  opacity:0; animation:fx-flutter 6s ease-in-out infinite; --fx-opacity:0.7;
}
.sheep::before{
  content:''; position:absolute; top:-3px; left:2px; width:4px; height:4px;
  background:#f0f0f0; border-radius:50%;
}
.sheep:nth-child(1){ left:20%; animation-delay:0s; }
.sheep:nth-child(2){ left:40%; animation-delay:1.5s; }
.sheep:nth-child(3){ left:60%; animation-delay:3s; }
.sheep:nth-child(4){ left:75%; animation-delay:4.5s; }

/* Night Sky */
.night-sky-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.night-star{
  position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow:0 0 3px 1px rgba(255,255,255,0.5);
  opacity:0; animation:fx-twinkle 4s ease-in-out infinite;
  --fx-opacity:0.8; --fx-scale-end:1.3;
}
.night-star:nth-child(1){ left:3%; top:5%; }
.night-star:nth-child(2){ left:12%; top:15%; animation-delay:0.5s; }
.night-star:nth-child(3){ left:22%; top:8%; animation-delay:1s; }
.night-star:nth-child(4){ left:30%; top:20%; animation-delay:0.3s; width:3px;height:3px; }
.night-star:nth-child(5){ left:40%; top:12%; animation-delay:1.5s; }
.night-star:nth-child(6){ left:48%; top:25%; animation-delay:0.8s; }
.night-star:nth-child(7){ left:55%; top:6%; animation-delay:2s; width:3px;height:3px; }
.night-star:nth-child(8){ left:65%; top:18%; animation-delay:0.2s; }
.night-star:nth-child(9){ left:72%; top:10%; animation-delay:1.2s; }
.night-star:nth-child(10){ left:80%; top:22%; animation-delay:0.6s; }
.night-star:nth-child(11){ left:88%; top:8%; animation-delay:1.8s; width:3px;height:3px; }
.night-star:nth-child(12){ left:95%; top:15%; animation-delay:0.4s; }
.night-star:nth-child(13){ left:35%; top:30%; animation-delay:2.5s; }
.night-star:nth-child(14){ left:58%; top:35%; animation-delay:1.3s; }
.night-star:nth-child(15){ left:82%; top:28%; animation-delay:0.9s; }

/* Moonlight */
.moonlight-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.moonlight-ray{
  position:absolute; top:0; right:0; width:60%; height:60%;
  background:radial-gradient(circle at 100% 0%, rgba(255,250,230,0.15), transparent 70%);
  opacity:0; animation:fx-pulse 8s ease-in-out infinite;
  --fx-opacity:0.6; --fx-opacity-min:0.2; --fx-scale-end:1.03;
}

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 물/바다 (Water/Ocean)
   ═══════════════════════════════════════════════════ */

/* Waves */
.waves-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.wave-line{
  position:absolute; left:-10%; width:120%; height:15px;
  background:linear-gradient(0deg, rgba(70,130,200,0.2), transparent);
  border-radius:50% 50% 0 0;
  animation:fx-wave 4s ease-in-out infinite; --fx-sway:20px;
}
.wave-line:nth-child(1){ bottom:0; opacity:0.5; }
.wave-line:nth-child(2){ bottom:10px; opacity:0.3; animation-delay:1s; }
.wave-line:nth-child(3){ bottom:20px; opacity:0.2; animation-delay:2s; }

/* Seashells */
.seashells-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.seashell{
  position:absolute; bottom:5%; width:10px; height:8px;
  border-radius:50% 50% 0 0;
  opacity:0; animation:fx-twinkle 5s ease-in-out infinite;
  --fx-opacity:0.6; --fx-scale-end:1.1;
}
.seashell:nth-child(odd){ background:linear-gradient(180deg, #f8c471, #e5a84b); }
.seashell:nth-child(even){ background:linear-gradient(180deg, #d5a6bd, #c39bd3); }
.seashell:nth-child(1){ left:10%; }
.seashell:nth-child(2){ left:30%; animation-delay:1s; }
.seashell:nth-child(3){ left:50%; animation-delay:0.5s; width:8px;height:6px; }
.seashell:nth-child(4){ left:70%; animation-delay:2s; }
.seashell:nth-child(5){ left:88%; animation-delay:1.5s; width:12px;height:10px; }

/* Coral Bubbles */
.coral-bubbles-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.coral-bubble{
  position:absolute; bottom:-10px; border-radius:50%;
  opacity:0; animation:fx-rise 8s ease-in infinite;
  --fx-travel:-500px; --fx-sway:15px; --fx-opacity:0.5;
}
.coral-bubble:nth-child(odd){
  background:radial-gradient(circle at 30% 30%, rgba(255,150,100,0.4), rgba(255,120,80,0.2) 60%, transparent);
  border:1px solid rgba(255,150,100,0.2);
}
.coral-bubble:nth-child(even){
  background:radial-gradient(circle at 30% 30%, rgba(255,180,200,0.4), rgba(255,150,180,0.2) 60%, transparent);
  border:1px solid rgba(255,180,200,0.2);
}
.coral-bubble:nth-child(1){ left:8%; width:12px;height:12px; animation-duration:7s; }
.coral-bubble:nth-child(2){ left:20%; width:8px;height:8px; animation-duration:9s; animation-delay:1s; }
.coral-bubble:nth-child(3){ left:35%; width:16px;height:16px; animation-duration:6s; animation-delay:0.5s; }
.coral-bubble:nth-child(4){ left:48%; width:10px;height:10px; animation-duration:8s; animation-delay:2s; }
.coral-bubble:nth-child(5){ left:60%; width:14px;height:14px; animation-duration:7.5s; animation-delay:0.8s; }
.coral-bubble:nth-child(6){ left:72%; width:9px;height:9px; animation-duration:8.5s; animation-delay:1.5s; }
.coral-bubble:nth-child(7){ left:85%; width:18px;height:18px; animation-duration:5.5s; animation-delay:2.5s; }
.coral-bubble:nth-child(8){ left:50%; width:11px;height:11px; animation-duration:9.5s; animation-delay:0.3s; }

/* Ripples */
.ripples-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.ripple-ring{
  position:absolute; bottom:20%; left:50%; transform:translateX(-50%);
  width:10px; height:5px; border-radius:50%;
  border:1px solid rgba(100,180,255,0.4);
  opacity:0; animation:fx-expand 4s ease-out infinite;
  --fx-opacity:0.5; --fx-scale-end:8;
}
.ripple-ring:nth-child(1){ animation-delay:0s; }
.ripple-ring:nth-child(2){ animation-delay:1.3s; }
.ripple-ring:nth-child(3){ animation-delay:2.6s; }

/* Splash */
.splash-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.splash-particle{
  position:absolute; bottom:5%; left:50%; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(100,180,255,0.8), rgba(70,150,230,0.4));
  opacity:0; animation:fx-burst 2.5s ease-out infinite; --fx-scale-end:0.3;
}
.splash-particle:nth-child(1){ --fx-travel-x:40px; --fx-travel-y:-100px; }
.splash-particle:nth-child(2){ --fx-travel-x:-35px; --fx-travel-y:-80px; animation-delay:0.3s; }
.splash-particle:nth-child(3){ --fx-travel-x:55px; --fx-travel-y:-70px; animation-delay:0.1s; }
.splash-particle:nth-child(4){ --fx-travel-x:-50px; --fx-travel-y:-110px; animation-delay:0.4s; }
.splash-particle:nth-child(5){ --fx-travel-x:20px; --fx-travel-y:-120px; animation-delay:0.2s; }
.splash-particle:nth-child(6){ --fx-travel-x:-65px; --fx-travel-y:-60px; animation-delay:0.5s; }

/* Seaweed */
.seaweed-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.seaweed-strand{
  position:absolute; bottom:0; width:4px; border-radius:2px;
  background:linear-gradient(180deg, rgba(46,204,113,0.6), rgba(39,174,96,0.3));
  transform-origin:bottom center;
  opacity:0.6; animation:fx-sway 3s ease-in-out infinite;
  --fx-angle-start:-8deg; --fx-angle-end:8deg;
}
.seaweed-strand:nth-child(1){ left:10%; height:50px; }
.seaweed-strand:nth-child(2){ left:25%; height:40px; animation-delay:0.5s; }
.seaweed-strand:nth-child(3){ left:40%; height:55px; animation-delay:1s; }
.seaweed-strand:nth-child(4){ left:60%; height:35px; animation-delay:1.5s; }
.seaweed-strand:nth-child(5){ left:75%; height:45px; animation-delay:0.8s; }
.seaweed-strand:nth-child(6){ left:90%; height:50px; animation-delay:1.3s; }

/* Water Drops */
.water-drops-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.water-drop{
  position:absolute; width:6px; height:10px;
  background:linear-gradient(180deg, rgba(100,180,255,0.7), rgba(70,150,230,0.9));
  border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  opacity:0; animation:fx-fall 4s linear infinite;
  --fx-travel:600px; --fx-spin:0deg; --fx-sway:10px; --fx-opacity:0.7;
}
.water-drop:nth-child(1){ left:8%; animation-duration:3.5s; }
.water-drop:nth-child(2){ left:20%; animation-duration:4.5s; animation-delay:0.5s; }
.water-drop:nth-child(3){ left:32%; animation-duration:3s; animation-delay:1s; width:5px;height:8px; }
.water-drop:nth-child(4){ left:45%; animation-duration:4s; animation-delay:0.3s; }
.water-drop:nth-child(5){ left:58%; animation-duration:3.8s; animation-delay:1.5s; }
.water-drop:nth-child(6){ left:70%; animation-duration:4.2s; animation-delay:0.8s; width:7px;height:12px; }
.water-drop:nth-child(7){ left:82%; animation-duration:3.5s; animation-delay:2s; }
.water-drop:nth-child(8){ left:92%; animation-duration:4.8s; animation-delay:0.2s; }

/* ═══════════════════════════════════════════════════
   NEW EFFECTS - 모험 (Adventure)
   ═══════════════════════════════════════════════════ */

/* Footprints */
.footprints-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.footprint{
  position:absolute; width:8px; height:12px; border-radius:40% 40% 30% 30%;
  background:rgba(139,90,43,0.3);
  opacity:0; animation:fx-twinkle 4s ease-in-out infinite;
  --fx-opacity:0.4; --fx-scale-end:1;
}
.footprint:nth-child(1){ left:15%; top:80%; }
.footprint:nth-child(2){ left:25%; top:70%; animation-delay:0.8s; }
.footprint:nth-child(3){ left:35%; top:62%; animation-delay:1.5s; }
.footprint:nth-child(4){ left:45%; top:55%; animation-delay:0.3s; }
.footprint:nth-child(5){ left:55%; top:48%; animation-delay:2s; }
.footprint:nth-child(6){ left:65%; top:42%; animation-delay:1s; }

/* Compass Spin */
.compass-spin-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.compass-needle{
  position:absolute; top:15%; right:15%; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(200,180,100,0.5);
  opacity:0; animation:fx-pulse 4s ease-in-out infinite;
  --fx-opacity:0.5; --fx-opacity-min:0.2; --fx-scale-end:1.1;
}
.compass-needle::before{
  content:''; position:absolute; top:50%; left:50%; width:2px; height:10px;
  background:linear-gradient(180deg, #c0392b, #2c3e50);
  transform:translate(-50%,-50%);
  animation:compass-rotate 6s linear infinite;
}
@keyframes compass-rotate{
  0%{ transform:translate(-50%,-50%) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* Treasure Sparkle */
.treasure-sparkle-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.treasure-spark{
  position:absolute; bottom:15%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #ffd700, rgba(255,215,0,0.4));
  box-shadow:0 0 8px 2px rgba(255,215,0,0.4);
  opacity:0; animation:fx-twinkle 2s ease-in-out infinite;
  --fx-opacity:1; --fx-scale-end:1.4;
}
.treasure-spark:nth-child(1){ left:30%; top:65%; }
.treasure-spark:nth-child(2){ left:38%; top:72%; animation-delay:0.3s; }
.treasure-spark:nth-child(3){ left:45%; top:68%; animation-delay:0.6s; }
.treasure-spark:nth-child(4){ left:52%; top:75%; animation-delay:0.9s; }
.treasure-spark:nth-child(5){ left:58%; top:70%; animation-delay:0.15s; }
.treasure-spark:nth-child(6){ left:65%; top:66%; animation-delay:1.2s; }
.treasure-spark:nth-child(7){ left:42%; top:78%; animation-delay:0.45s; }
.treasure-spark:nth-child(8){ left:55%; top:62%; animation-delay:0.75s; }

/* Map Glow */
.map-glow-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.map-aura{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,220,150,0.1), transparent 70%);
  opacity:0; animation:fx-pulse 6s ease-in-out infinite;
  --fx-opacity:0.5; --fx-opacity-min:0.1; --fx-scale-end:1.03;
}

/* Torch Flicker */
.torch-flicker-container{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.torch-light{
  position:absolute; top:20%; left:0; width:40%; height:60%;
  background:radial-gradient(circle at 0% 50%, rgba(255,150,50,0.15), transparent 70%);
  opacity:0; animation:fx-pulse 2s ease-in-out infinite;
  --fx-opacity:0.6; --fx-opacity-min:0.2; --fx-scale-end:1.05;
}
.torch-light:nth-child(2){
  animation-delay:0.3s; animation-duration:1.5s;
  background:radial-gradient(circle at 0% 50%, rgba(255,180,80,0.1), transparent 60%);
}

/* Wind Trail */
.wind-trail-container{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.wind-particle{
  position:absolute; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  opacity:0; animation:fx-drift-h 3s linear infinite;
  --fx-opacity:0.4; --fx-start-x:-60px; --fx-travel-x:400px;
}
.wind-particle:nth-child(1){ top:12%; width:35px; animation-duration:2.5s; }
.wind-particle:nth-child(2){ top:25%; width:50px; animation-duration:3s; animation-delay:0.3s; }
.wind-particle:nth-child(3){ top:38%; width:30px; animation-duration:2.2s; animation-delay:0.7s; }
.wind-particle:nth-child(4){ top:48%; width:45px; animation-duration:3.5s; animation-delay:0.1s; }
.wind-particle:nth-child(5){ top:58%; width:40px; animation-duration:2.8s; animation-delay:0.5s; }
.wind-particle:nth-child(6){ top:68%; width:25px; animation-duration:2s; animation-delay:1s; }
.wind-particle:nth-child(7){ top:78%; width:55px; animation-duration:3.2s; animation-delay:0.2s; }
.wind-particle:nth-child(8){ top:88%; width:35px; animation-duration:2.6s; animation-delay:0.8s; }

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* 장식 입자 층만 멈추고 흐리게 — 퀴즈·핫스팟처럼 글자·조작이 있는 층은 제외 */
  [class$="-container"]:not(.quiz-container):not(.hotspots-container) > * { animation: none !important; opacity: 0.5 !important; }
}

/* ═══════════════════════════════════════════════════
   TOUCH INTERACTION (유아동화 터치 인터랙션)
   ═══════════════════════════════════════════════════ */

/* Hotspot Container */
.hotspots-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* Individual Hotspot */
.hotspot {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  transition: transform 0.2s ease;
  /* 터치 영역 시각화 (반투명 원) */
  background: radial-gradient(circle, rgba(255,255,200,0.4) 0%, rgba(255,200,100,0.2) 50%, transparent 70%);
  border: 3px solid rgba(255,200,100,0.5);
  box-shadow: 0 0 15px rgba(255,200,100,0.4);
}

.hotspot:hover {
  transform: scale(1.05);
}

.hotspot:active {
  transform: scale(0.95);
}

/* Touch Indicator (반짝이 힌트) */
.hotspot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  opacity: 0;
  animation: hotspot-hint 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hotspot-hint {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* ─── Hotspot Animations ─── */

/* Wiggle (흔들흔들) */
.hotspot-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}

/* Bounce (통통) */
.hotspot-bounce {
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-20px); }
  50% { transform: translateY(-5px); }
  70% { transform: translateY(-10px); }
}

/* Pop (팡!) */
.hotspot-pop {
  animation: pop 0.4s ease;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Sparkle (반짝) */
.hotspot-sparkle {
  animation: sparkle 0.6s ease;
}

@keyframes sparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(255,255,100,0.8)); }
}

/* Spin (회전) */
.hotspot-spin {
  animation: hotspot-spin 0.5s ease;
}

@keyframes hotspot-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── 전체 이미지 흔들기 애니메이션 ─── */
.illus.illus-wiggle {
  animation: illus-wiggle 0.5s ease-in-out;
}

@keyframes illus-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-2deg) scale(1.02); }
  40% { transform: rotate(2deg) scale(1.02); }
  60% { transform: rotate(-1deg) scale(1.01); }
  80% { transform: rotate(1deg) scale(1.01); }
}

.illus.illus-bounce {
  animation: illus-bounce 0.6s ease;
}

@keyframes illus-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-15px) scale(1.03); }
  50% { transform: translateY(-5px) scale(1.01); }
  70% { transform: translateY(-8px) scale(1.02); }
}

.illus.illus-pop {
  animation: illus-pop 0.4s ease;
}

@keyframes illus-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.illus.illus-sparkle {
  animation: illus-sparkle 0.6s ease;
}

@keyframes illus-sparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) saturate(1.2); }
}

/* ─── Speech Bubble (말풍선) ─── */
.speech-bubble {
  position: absolute;
  background: white;
  border-radius: 20px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  transform: scale(0.5) translateY(10px);
  animation: bubble-appear 0.3s ease forwards;
  pointer-events: none;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: white;
  border-bottom: 0;
}

@keyframes bubble-appear {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bubble-disappear {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.8) translateY(-10px); }
}

.speech-bubble.hiding {
  animation: bubble-disappear 0.3s ease forwards;
}

/* ─── Touch Ripple (터치 물결) ─── */
.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 50;
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ─── Touch Sparkles (터치 반짝이) ─── */
.touch-sparkles {
  position: absolute;
  pointer-events: none;
  z-index: 55;
}

.touch-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #FFD700 0%, #FFA500 50%, transparent 70%);
  border-radius: 50%;
  animation: sparkle-fly 0.8s ease-out forwards;
}

@keyframes sparkle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}