/* ============================================================================
   HEADER WAVE ANIMATION
   ============================================================================ */

/**
 * This animation creates a mesmerizing wave effect that traces the border
 * of the header element when hovered. The wave starts from the bottom-left,
 * travels along the bottom, up the right side, across the top, and down
 * the left side, creating a continuous glowing border animation.
 */

#site-header {
	position: relative;
	overflow: visible;
}

#site-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--bp-primary) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	background-position: 200% 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--bp-transition-base);
	border-radius: 0;
	z-index: 1;
}

#site-header:hover::before {
	opacity: 0;
}

/**
 * Wave animation using SVG-like approach with multiple pseudo-elements
 * and keyframe animations to create the border trace effect
 */

#site-header::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(
		90deg,
		var(--bp-primary) 0%,
		var(--bp-accent) 25%,
		var(--bp-primary) 50%,
		var(--bp-accent) 75%,
		var(--bp-primary) 100%
	);
	background-size: 200% 100%;
	border-radius: 0;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	transition: opacity var(--bp-transition-base);
}

#site-header:hover::after {
	opacity: 0;
	animation: none;
}

/**
 * Alternative wave border animation using clip-path
 * Creates a smooth wave that traces the header border
 */

.header-wave {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--bp-transition-base);
	z-index: 0;
}

#site-header:hover .header-wave {
	opacity: 1;
	animation: wave-border 3s ease-in-out infinite;
}

/**
 * Wave Border Animation Keyframes
 * 
 * This animation creates a glowing line that traces the entire border
 * of the header element in a continuous loop:
 * 1. Bottom border (left to right)
 * 2. Right border (bottom to top)
 * 3. Top border (right to left)
 * 4. Left border (top to bottom)
 */

@keyframes wave-border {
	0% {
		box-shadow: 
			inset 0 -2px 0 0 var(--bp-primary),
			inset 0 0 0 0 transparent,
			inset 0 0 0 0 transparent,
			inset 0 0 0 0 transparent;
	}
	
	25% {
		box-shadow: 
			inset 0 -2px 0 0 transparent,
			inset 2px 0 0 0 var(--bp-primary),
			inset 0 0 0 0 transparent,
			inset 0 0 0 0 transparent;
	}
	
	50% {
		box-shadow: 
			inset 0 -2px 0 0 transparent,
			inset 2px 0 0 0 transparent,
			inset 0 2px 0 0 var(--bp-primary),
			inset 0 0 0 0 transparent;
	}
	
	75% {
		box-shadow: 
			inset 0 -2px 0 0 transparent,
			inset 2px 0 0 0 transparent,
			inset 0 2px 0 0 transparent,
			inset -2px 0 0 0 var(--bp-primary);
	}
	
	100% {
		box-shadow: 
			inset 0 -2px 0 0 var(--bp-primary),
			inset 2px 0 0 0 transparent,
			inset 0 2px 0 0 transparent,
			inset -2px 0 0 0 transparent;
	}
}

/**
 * Enhanced Wave Animation with Glow Effect
 * Uses multiple layers to create a more sophisticated wave effect
 */

#site-header:hover {
	animation: header-glow 2s ease-in-out infinite;
}

@keyframes header-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
	}
	
	50% {
		box-shadow: 0 0 20px 0 rgba(37, 99, 235, 0.3);
	}
}

/**
 * Smooth Border Trace Animation
 * Creates a continuous wave that traces the header border
 */

#site-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		linear-gradient(90deg, var(--bp-primary) 0%, transparent 100%) no-repeat,
		linear-gradient(180deg, var(--bp-primary) 0%, transparent 100%) no-repeat,
		linear-gradient(270deg, var(--bp-primary) 0%, transparent 100%) no-repeat,
		linear-gradient(0deg, var(--bp-primary) 0%, transparent 100%) no-repeat;
	background-size: 
		100% 2px,
		2px 100%,
		100% 2px,
		2px 100%;
	background-position: 
		0 0,
		100% 0,
		100% 100%,
		0 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--bp-transition-base);
	z-index: 1;
}

#site-header:hover::before {
	opacity: 1;
	animation: trace-border 4s ease-in-out infinite;
}

@keyframes trace-border {
	0% {
		background-position: 
			0 0,
			100% 0,
			100% 100%,
			0 100%;
		opacity: 0.3;
	}
	
	25% {
		background-position: 
			100% 0,
			100% 0,
			100% 100%,
			0 100%;
		opacity: 0.6;
	}
	
	50% {
		background-position: 
			100% 0,
			100% 100%,
			100% 100%,
			0 100%;
		opacity: 0.8;
	}
	
	75% {
		background-position: 
			100% 0,
			100% 100%,
			0 100%,
			0 100%;
		opacity: 0.6;
	}
	
	100% {
		background-position: 
			0 0,
			100% 0,
			100% 100%,
			0 100%;
		opacity: 0.3;
	}
}

/* ============================================================================
   SMOOTH TRANSITIONS & HOVER EFFECTS
   ============================================================================ */

/**
 * Smooth fade-in animation for page load
 */

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.site {
	animation: fade-in 0.6s ease-out;
}

/**
 * Smooth scale animation for interactive elements
 */

@keyframes scale-up {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.blog-post-card {
	animation: scale-up 0.4s ease-out;
}

/**
 * Pulse animation for attention-grabbing elements
 */

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/**
 * Smooth slide-in animation for sidebar
 */

@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.blog-sidebar {
	animation: slide-in-right 0.5s ease-out;
}

/**
 * Smooth slide-in animation for footer
 */

@keyframes slide-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.site-footer {
	animation: slide-in-up 0.6s ease-out;
}

/**
 * Bounce animation for buttons
 */

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

button:active {
	animation: bounce 0.3s ease-out;
}

/**
 * Shimmer loading animation
 */

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.loading {
	background: linear-gradient(
		90deg,
		var(--bp-bg-secondary) 25%,
		var(--bp-bg-tertiary) 50%,
		var(--bp-bg-secondary) 75%
	);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
}

/* ============================================================================
   RESPONSIVE ANIMATIONS
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	
	#site-header:hover {
		animation: none;
	}
	
	#site-header:hover::before {
		animation: none;
	}
	
	#site-header:hover .header-wave {
		animation: none;
	}
}

@media (max-width: 768px) {
	#site-header:hover {
		animation: none;
	}
	
	#site-header:hover::before {
		animation: none;
	}
	
	#site-header:hover .header-wave {
		animation: none;
	}
}