/**
 * Animated Background - Modern Geometric Pattern
 * Adaptive background for all screen resolutions
 * 
 * @package Blog Content
 */

/* ========================================
   Base Background
   ======================================== */

body {
	background: #f5f7fa;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	background: 
		linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	opacity: 0.03;
}

/* Dot pattern overlay */
body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: 
		radial-gradient(circle, rgba(0, 123, 255, 0.08) 1px, transparent 1px);
	background-size: 30px 30px;
	background-position: 0 0, 15px 15px;
	animation: dotMove 20s linear infinite;
}

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

/* Geometric shapes overlay */
.animated-bg-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.particle {
	position: absolute;
	background: rgba(0, 123, 255, 0.04);
	animation: geometricFloat 25s ease-in-out infinite;
}

/* Different shapes and positions */
.particle:nth-child(1) {
	width: 15vw;
	height: 15vw;
	max-width: 200px;
	max-height: 200px;
	left: 5%;
	top: 10%;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	animation-duration: 20s;
	animation-delay: 0s;
}

.particle:nth-child(2) {
	width: 12vw;
	height: 12vw;
	max-width: 180px;
	max-height: 180px;
	right: 10%;
	top: 20%;
	border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
	animation-duration: 25s;
	animation-delay: 3s;
}

.particle:nth-child(3) {
	width: 18vw;
	height: 18vw;
	max-width: 250px;
	max-height: 250px;
	left: 15%;
	bottom: 15%;
	border-radius: 41% 59% 41% 59% / 41% 59% 41% 59%;
	animation-duration: 30s;
	animation-delay: 5s;
}

.particle:nth-child(4) {
	width: 10vw;
	height: 10vw;
	max-width: 150px;
	max-height: 150px;
	right: 15%;
	bottom: 25%;
	border-radius: 73% 27% 26% 74% / 55% 48% 52% 45%;
	animation-duration: 22s;
	animation-delay: 2s;
}

.particle:nth-child(5) {
	width: 14vw;
	height: 14vw;
	max-width: 190px;
	max-height: 190px;
	left: 50%;
	top: 40%;
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	animation-duration: 28s;
	animation-delay: 7s;
}

@keyframes geometricFloat {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
	25% {
		transform: translate(20px, -20px) rotate(90deg) scale(1.1);
	}
	50% {
		transform: translate(-20px, 20px) rotate(180deg) scale(0.9);
	}
	75% {
		transform: translate(20px, 20px) rotate(270deg) scale(1.05);
	}
}

/* ========================================
   Content Overlay - Ensure Readability
   ======================================== */

/* White overlay on main content */
#page {
	position: relative;
	z-index: 1;
}

.site-content,
#primary,
.entry-content,
article {
	position: relative;
	z-index: 2;
}

/* Ensure content has solid background */
.site-main article,
.widget,
.entry-content,
#primary {
	background: rgba(255, 255, 255, 0.95);
}


/* ========================================
   Responsive Adjustments
   ======================================== */

/* 4K and larger screens */
@media (min-width: 2560px) {
	body::after {
		background-size: 40px 40px;
	}
	
	.particle {
		max-width: 300px;
		max-height: 300px;
	}
}

/* Large screens (2K) */
@media (min-width: 1920px) and (max-width: 2559px) {
	body::after {
		background-size: 35px 35px;
	}
}

/* Standard desktop */
@media (min-width: 1200px) and (max-width: 1919px) {
	body::after {
		background-size: 30px 30px;
	}
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1199px) {
	body::after {
		background-size: 25px 25px;
	}
	
	.particle {
		width: 20vw;
		height: 20vw;
		max-width: 150px;
		max-height: 150px;
	}
}

/* Mobile - simplified version */
@media (max-width: 768px) {
	body::before {
		opacity: 0.02;
	}
	
	body::after {
		animation: none;
		background-size: 20px 20px;
	}
	
	.particle {
		width: 25vw;
		height: 25vw;
		max-width: 100px;
		max-height: 100px;
		animation-duration: 15s !important;
	}
	
	.particle:nth-child(4),
	.particle:nth-child(5) {
		display: none;
	}
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.particle {
		animation: none;
	}
}