/* ========================================
   ANIMATED WEATHER BACKGROUNDS - PROFESSIONAL
   ======================================== */

/* ===== SUNNY DAY ANIMATIONS ===== */

/* Animated Sun */
.animated-sun {
	position: fixed;
	width: 80px;
	height: 80px;
	top: 8%;
	right: 10%;
	z-index: -1;
	pointer-events: none;
	animation: sunPulse 4s ease-in-out infinite;
}

.animated-sun::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, #FDB813 0%, #F59E0B 50%, transparent 70%);
	border-radius: 50%;
	animation: sunGlow 3s ease-in-out infinite alternate;
}

.animated-sun::after {
	content: '';
	position: absolute;
	width: 130%;
	height: 130%;
	top: -15%;
	left: -15%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 10deg,
		rgba(251,191,36,0.3) 10deg 15deg,
		transparent 15deg 45deg,
		rgba(251,191,36,0.3) 45deg 50deg,
		transparent 50deg 80deg,
		rgba(251,191,36,0.3) 80deg 85deg,
		transparent 85deg 115deg,
		rgba(251,191,36,0.3) 115deg 120deg,
		transparent 120deg 150deg,
		rgba(251,191,36,0.3) 150deg 155deg,
		transparent 155deg 185deg,
		rgba(251,191,36,0.3) 185deg 190deg,
		transparent 190deg 220deg,
		rgba(251,191,36,0.3) 220deg 225deg,
		transparent 225deg 255deg,
		rgba(251,191,36,0.3) 255deg 260deg,
		transparent 260deg 290deg,
		rgba(251,191,36,0.3) 290deg 295deg,
		transparent 295deg 325deg,
		rgba(251,191,36,0.3) 325deg 330deg,
		transparent 330deg 360deg
	);
	border-radius: 50%;
	animation: sunRotate 20s linear infinite;
}

@keyframes sunPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes sunGlow {
	from { box-shadow: 0 0 20px 5px rgba(251,191,36,0.2); }
	to { box-shadow: 0 0 30px 10px rgba(251,191,36,0.3); }
}

@keyframes sunRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Animated Clouds - Fluffy Style */
.animated-cloud {
	position: fixed;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	animation: cloudMove 40s linear infinite;
}

.animated-cloud::before,
.animated-cloud::after,
.animated-cloud span {
	content: '';
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(230,230,230,0.8));
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.animated-cloud::before {
	width: 80px;
	height: 40px;
	left: 0;
	top: 15px;
}

.animated-cloud::after {
	width: 60px;
	height: 35px;
	left: 40px;
	top: 0;
}

.animated-cloud span {
	width: 70px;
	height: 38px;
	left: 70px;
	top: 10px;
	display: block;
}

@keyframes cloudMove {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		transform: translateX(calc(100vw + 200px));
		opacity: 0;
	}
}

/* Flying Birds */
.animated-bird {
	position: fixed;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	animation: birdFlight 25s ease-in-out infinite;
}

.animated-bird::before,
.animated-bird::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 3px;
	background: #333;
	border-radius: 50%;
}

.animated-bird::before {
	left: 0;
	transform-origin: right center;
	animation: wingFlap 0.3s ease-in-out infinite;
}

.animated-bird::after {
	right: 0;
	transform-origin: left center;
	animation: wingFlap 0.3s ease-in-out infinite reverse;
}

@keyframes birdFlight {
	0% {
		transform: translate(-100px, 0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	50% {
		transform: translate(50vw, -50px);
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translate(calc(100vw + 100px), 0);
		opacity: 0;
	}
}

@keyframes wingFlap {
	0%, 100% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(-40deg);
	}
}

/* ===== RAINY DAY ANIMATIONS ===== */

/* Rain Drops - بهبود یافته */
.animated-rain-drop {
	position: fixed;
	width: 2px;
	height: 25px;
	background: linear-gradient(to bottom, 
		rgba(150, 180, 220, 0.3), 
		rgba(124, 211, 255, 0.7),
		rgba(100, 180, 230, 0.9)
	);
	border-radius: 2px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	animation: rainDrop 1.5s linear infinite;
	box-shadow: 0 0 3px rgba(124, 211, 255, 0.3);
}

@keyframes rainDrop {
	0% {
		transform: translateY(-100px);
		opacity: 0;
	}
	5% {
		opacity: 0.8;
	}
	92% {
		opacity: 0.7;
	}
	100% {
		transform: translateY(calc(100vh + 50px));
		opacity: 0;
	}
}

/* Rain Cloud */
.animated-rain-cloud {
	position: fixed;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	animation: cloudMove 50s linear infinite;
}

.animated-rain-cloud::before,
.animated-rain-cloud::after,
.animated-rain-cloud span {
	content: '';
	position: absolute;
	background: linear-gradient(to bottom, rgba(100,100,120,0.9), rgba(80,80,100,0.8));
	border-radius: 50%;
	box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.animated-rain-cloud::before {
	width: 90px;
	height: 45px;
	left: 0;
	top: 15px;
}

.animated-rain-cloud::after {
	width: 70px;
	height: 40px;
	left: 45px;
	top: 0;
}

.animated-rain-cloud span {
	width: 80px;
	height: 43px;
	left: 80px;
	top: 10px;
	display: block;
}

/* Lightning Flash - رعد و برق حرفه‌ای */
.animated-lightning {
	position: fixed;
	width: 4px;
	height: 120px;
	background: linear-gradient(to bottom, 
		rgba(255,255,255,1) 0%, 
		rgba(220,230,255,0.95) 30%,
		rgba(200,220,255,0.85) 60%,
		rgba(180,210,255,0.6) 85%,
		transparent 100%
	);
	box-shadow: 
		0 0 15px 3px rgba(255,255,255,0.9),
		0 0 30px 6px rgba(200,220,255,0.6),
		0 0 50px 10px rgba(180,210,255,0.3);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	animation: lightning 8s infinite;
	clip-path: polygon(
		48% 0%, 
		35% 35%, 
		55% 35%, 
		40% 55%, 
		60% 55%, 
		45% 75%, 
		65% 75%, 
		50% 100%, 
		58% 75%, 
		38% 75%, 
		53% 55%, 
		30% 55%,
		50% 35%,
		42% 35%
	);
}

@keyframes lightning {
	0%, 100% { opacity: 0; }
	48% { opacity: 0; }
	49% { opacity: 1; }
	49.3% { opacity: 0; }
	49.5% { opacity: 0.9; }
	49.8% { opacity: 0; }
	50% { opacity: 1; }
	50.3% { opacity: 0; }
	50.6% { opacity: 0.7; }
	51% { opacity: 0; }
}

/* ===== SNOWY DAY ANIMATIONS ===== */

/* ابرهای ثابت برفی - بدون انیمیشن - در دو لایه مثل بارانی */
.static-snow-cloud {
	position: fixed;
	width: 200px;
	height: 100px;
	z-index: -10;
	pointer-events: none;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
	/* بدون انیمیشن - ثابت */
}

.static-snow-cloud::before,
.static-snow-cloud::after {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
}

.static-snow-cloud::before {
	width: 45%;
	height: 58%;
	left: 0;
	bottom: 0;
	border-radius: 40px;
}

.static-snow-cloud::after {
	width: 40%;
	height: 75%;
	left: 20%;
	bottom: 8%;
	border-radius: 60px;
}

.static-snow-cloud span {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 32%;
	height: 50%;
	left: 45%;
	bottom: 0;
	border-radius: 40px;
	display: block;
}

.static-snow-cloud .cloud-part-4 {
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 30%;
	height: 42%;
	left: 58%;
	bottom: 20%;
	border-radius: 50px;
	transform: rotate(90deg);
}

/* Snow Flakes - ستاره‌ای شکل 6 پر واقعی - دقیقا مثل flake در آیکون */
.animated-snowflake {
	position: fixed;
	width: 14px;
	height: 14px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	animation: snowFall 8s linear infinite;
	transform-origin: center center;
	/* نقطه مرکزی ستاره */
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, transparent 35%);
}

/* خط اول: افقی (0 درجه) */
.animated-snowflake::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1.5px;
	background: rgba(255,255,255,1);
	border-radius: 1px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 3px rgba(255,255,255,0.9);
}

/* خط دوم: 60 درجه */
.animated-snowflake::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1.5px;
	background: rgba(255,255,255,1);
	border-radius: 1px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(60deg);
	box-shadow: 0 0 3px rgba(255,255,255,0.9);
}

/* خط سوم: 120 درجه */
.animated-snowflake span {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.animated-snowflake span::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1.5px;
	background: rgba(255,255,255,1);
	border-radius: 1px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(120deg);
	box-shadow: 0 0 3px rgba(255,255,255,0.9);
}

@keyframes snowFall {
	0% {
		transform: translateY(-50px) translateX(0) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 0.9;
	}
	100% {
		transform: translateY(100vh) translateX(50px) rotate(360deg);
		opacity: 0;
	}
}

/* ===== CLOUDY DAY ANIMATIONS ===== */


.animated-dark-cloud {
	position: fixed;
	width: 200px;
	height: 100px;
	z-index: -10;
	pointer-events: none;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

.animated-dark-cloud::before,
.animated-dark-cloud::after {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
}

.animated-dark-cloud::before {
	width: 45%;
	height: 58%;
	left: 0;
	bottom: 0;
	border-radius: 40px;
}

.animated-dark-cloud::after {
	width: 40%;
	height: 75%;
	left: 20%;
	bottom: 8%;
	border-radius: 60px;
}

.animated-dark-cloud span {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 32%;
	height: 50%;
	left: 45%;
	bottom: 0;
	border-radius: 40px;
	display: block;
}

.animated-dark-cloud .cloud-part-4 {
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 30%;
	height: 42%;
	left: 58%;
	bottom: 20%;
	border-radius: 50px;
	transform: rotate(90deg);
}

/* ابرهای ثابت بارانی - بدون انیمیشن */
.static-rain-cloud {
	position: fixed;
	width: 200px;
	height: 100px;
	z-index: -10;
	pointer-events: none;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
	/* بدون انیمیشن - ثابت */
}

.static-rain-cloud::before,
.static-rain-cloud::after {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
}

.static-rain-cloud::before {
	width: 45%;
	height: 58%;
	left: 0;
	bottom: 0;
	border-radius: 40px;
}

.static-rain-cloud::after {
	width: 40%;
	height: 75%;
	left: 20%;
	bottom: 8%;
	border-radius: 60px;
}

.static-rain-cloud span {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 32%;
	height: 50%;
	left: 45%;
	bottom: 0;
	border-radius: 40px;
	display: block;
}

.static-rain-cloud .cloud-part-4 {
	position: absolute;
	background: linear-gradient(180deg, #e6f1ff 0%, #cbd7ea 60%, #a7b6cf 100%);
	width: 30%;
	height: 42%;
	left: 58%;
	bottom: 20%;
	border-radius: 50px;
	transform: rotate(90deg);
}

/* انیمیشن شناور ابرها - چپ به راست سریع‌تر */
@keyframes cloudFloatSlow {
	0%, 100% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(60px);
	}
}

/* انیمیشن ابرهای متحرک از چپ به راست */
@keyframes cloudMoveLeftToRight {
	0% {
		transform: translateX(0px);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		transform: translateX(calc(100vw + 200px));
		opacity: 0;
	}
}

/* ابرهای روشن برای روز آفتابی */
body.theme-sunny-day .animated-dark-cloud::before,
body.theme-sunny-day .animated-dark-cloud::after,
body.theme-sunny-day .animated-dark-cloud span,
body.theme-sunny-day .animated-dark-cloud .cloud-part-4 {
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(240,245,250,0.9) 60%, rgba(220,230,245,0.85) 100%);
}

/* ===== NIGHT ANIMATIONS ===== */

/* Moon */
.animated-moon {
	position: fixed;
	width: 70px;
	height: 70px;
	top: 10%;
	right: 12%;
	background: radial-gradient(circle at 30% 30%, #F5F5DC 0%, #E8D9A8 60%, #C9B888 100%);
	border-radius: 50%;
	box-shadow: 0 0 30px 8px rgba(245,245,220,0.25);
	pointer-events: none;
	z-index: -1;
	animation: moonGlow 5s ease-in-out infinite alternate;
}

.animated-moon::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	top: 20%;
	left: 60%;
	background: rgba(180,170,140,0.25);
	border-radius: 50%;
	box-shadow: 
		-12px 8px 0 -2px rgba(180,170,140,0.18),
		8px 20px 0 -5px rgba(180,170,140,0.2);
}

@keyframes moonGlow {
	from { box-shadow: 0 0 30px 8px rgba(245,245,220,0.2); }
	to { box-shadow: 0 0 40px 12px rgba(245,245,220,0.35); }
}

/* Stars */
.animated-star {
	position: fixed;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	box-shadow: 0 0 4px 1px rgba(255,255,255,0.5);
	animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.5); }
}

/* Shooting Star */
.animated-shooting-star {
	position: fixed;
	width: 3px;
	height: 3px;
	background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	animation: shootingStar 3s ease-out infinite;
	box-shadow: 0 0 6px 2px rgba(255,255,255,0.6);
}

.animated-shooting-star::after {
	content: '';
	position: absolute;
	width: 100px;
	height: 2px;
	background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(200,220,255,0.6), transparent);
	right: 0;
	top: 0;
	border-radius: 2px;
	box-shadow: 0 0 4px 1px rgba(255,255,255,0.4);
}

@keyframes shootingStar {
	0% {
		transform: translate(0, 0) rotate(-45deg);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	85% {
		opacity: 0.6;
	}
	100% {
		transform: translate(-350px, 350px) rotate(-45deg);
		opacity: 0;
	}
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.animated-sun {
		width: 60px;
		height: 60px;
		top: 5%;
		right: 8%;
	}
	
	.animated-cloud::before { width: 60px; height: 30px; }
	.animated-cloud::after { width: 45px; height: 26px; }
	.animated-cloud span { width: 52px; height: 28px; }
	
	.animated-moon {
		width: 55px;
		height: 55px;
		top: 8%;
	}
}