/**
 * TinyTaleWorld Mood Layer
 * Layer 2: Moods
 * Atmospheric overlays with animations for all 15 moods
 */

/* ============================
   Rainy Mood
   Dark blue overlay, subtle pulse
   ============================ */
@keyframes ttw-rainy {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.45; }
}

body.mood-rainy::before {
	opacity: 0.35;
	background: rgba(0, 50, 100, 0.6);
	animation: ttw-rainy var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Starry Mood
   Dark with radial white dots pattern
   ============================ */
@keyframes ttw-starry {
	0%, 100% { opacity: 0.4; background-position: 0 0; }
	50% { opacity: 0.5; background-position: 10px 10px; }
}

body.mood-starry::before {
	opacity: 0.4;
	background: 
		radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
		radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
		radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent),
		radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.7), transparent),
		radial-gradient(1px 1px at 160px 20px, rgba(255,255,255,0.8), transparent),
		rgba(10, 10, 30, 0.7);
	background-size: 200px 100px;
	animation: ttw-starry var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Foggy Mood
   White overlay, slow drift animation
   ============================ */
@keyframes ttw-foggy {
	0%, 100% { opacity: 0.4; transform: translateX(0); }
	50% { opacity: 0.5; transform: translateX(20px); }
}

body.mood-foggy::before {
	opacity: 0.4;
	background: rgba(255, 255, 255, 0.7);
	animation: ttw-foggy var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Sunny Mood
   Warm yellow radial gradient
   ============================ */
@keyframes ttw-sunny {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.25; }
}

body.mood-sunny::before {
	opacity: 0.2;
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 200, 50, 0.4) 0%, transparent 70%);
	animation: ttw-sunny var(--ttw-anim-med) ease-in-out infinite;
}

/* ============================
   Snowy Mood
   White overlay, gentle shimmer
   ============================ */
@keyframes ttw-snowy {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.35; }
}

body.mood-snowy::before {
	opacity: 0.25;
	background: rgba(255, 255, 255, 0.8);
	animation: ttw-snowy var(--ttw-anim-med) ease-in-out infinite;
}

/* ============================
   Stormy Mood
   Dark purple, fast flicker
   ============================ */
@keyframes ttw-stormy {
	0%, 100% { opacity: 0.5; }
	25% { opacity: 0.6; }
	50% { opacity: 0.4; }
	75% { opacity: 0.55; }
}

body.mood-stormy::before {
	opacity: 0.5;
	background: rgba(50, 20, 80, 0.7);
	animation: ttw-stormy var(--ttw-anim-fast) ease-in-out infinite;
}

/* ============================
   Magical Mood
   Purple/pink gradient, slow pulse
   ============================ */
@keyframes ttw-magical {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 0.4; }
}

body.mood-magical::before {
	opacity: 0.3;
	background: linear-gradient(135deg, rgba(200, 100, 255, 0.5) 0%, rgba(255, 100, 200, 0.5) 100%);
	animation: ttw-magical var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Spooky Mood
   Dark green overlay, slow pulse
   ============================ */
@keyframes ttw-spooky {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.55; }
}

body.mood-spooky::before {
	opacity: 0.45;
	background: rgba(20, 60, 20, 0.8);
	animation: ttw-spooky var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Dreamy Mood
   Lavender, slow drift
   ============================ */
@keyframes ttw-dreamy {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50% { opacity: 0.35; transform: translateY(-10px); }
}

body.mood-dreamy::before {
	opacity: 0.3;
	background: rgba(200, 180, 255, 0.6);
	animation: ttw-dreamy var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Mysterious Mood
   Dark teal, slow pulse
   ============================ */
@keyframes ttw-mysterious {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.5; }
}

body.mood-mysterious::before {
	opacity: 0.4;
	background: rgba(0, 80, 80, 0.7);
	animation: ttw-mysterious var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Misty Mood
   Grey-white, slow drift
   ============================ */
@keyframes ttw-misty {
	0%, 100% { opacity: 0.4; transform: translateX(0); }
	50% { opacity: 0.45; transform: translateX(-15px); }
}

body.mood-misty::before {
	opacity: 0.4;
	background: rgba(200, 200, 210, 0.7);
	animation: ttw-misty var(--ttw-anim-slow) ease-in-out infinite;
}

/* ============================
   Peaceful Mood
   Soft blue, no animation
   ============================ */
body.mood-peaceful::before {
	opacity: 0.2;
	background: rgba(135, 206, 235, 0.5);
}

/* ============================
   Windy Mood
   Transparent, diagonal sweep animation only
   ============================ */
@keyframes ttw-windy {
	0% { transform: translateX(-100%) translateY(-100%); }
	100% { transform: translateX(100%) translateY(100%); }
}

body.mood-windy::before {
	opacity: 0;
	background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
	background-size: 200% 200%;
	animation: ttw-windy var(--ttw-anim-fast) linear infinite;
}

/* ============================
   Festive Mood
   Warm gold, twinkle keyframes
   ============================ */
@keyframes ttw-festive {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.35; }
}

body.mood-festive::before {
	opacity: 0.25;
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
	animation: ttw-festive var(--ttw-anim-med) ease-in-out infinite;
}

/* ============================
   Lonely Mood
   Grey-blue, very slow fade pulse
   ============================ */
@keyframes ttw-lonely {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.4; }
}

body.mood-lonely::before {
	opacity: 0.35;
	background: rgba(100, 120, 140, 0.6);
	animation: ttw-lonely var(--ttw-anim-slow) ease-in-out infinite;
}