/**
 * Responsive Background Images CSS - Unified Approach
 *
 * Uses single CSS custom property (--peaches-bg-image) for all background image needs.
 * Seamlessly integrates with parallax effects and progressive loading.
 */

/* ========================================================================
   BASE RESPONSIVE BACKGROUND SETUP
   ======================================================================== */

/* Base responsive background image setup - unified approach */
.peaches-has-responsive-bg {
	/* Single source of truth - always reference the CSS custom property */
	background-image: var(--peaches-bg-image) !important;

	/* Ensure visibility even when effects are active */
	position: relative;
}

/* ========================================================================
   PROGRESSIVE LOADING OVERLAY SYSTEM
   ======================================================================== */

/* Initial overlay (shows low-quality image during progressive loading) */
.peaches-has-responsive-bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1; /* Above the main background */

	/* Initially visible - shows the low-quality image */
	opacity: 1;

	/* Uses the initial image custom property */
	background-image: var(--peaches-initial-bg-image);
	background-size: inherit;
	background-position: inherit;
	background-repeat: inherit;
	background-attachment: inherit;

	/* Smooth fade-out transition */
	transition: opacity var(--peaches-transition-duration, 0.4s) ease-out;

	/* Ensure it doesn't interfere with content */
	pointer-events: none;
}

/* When high-quality image is ready, fade out the overlay */
.peaches-bg-upgraded::after {
	opacity: 0;
}

/* After fade-out completes, hide the overlay completely */
.peaches-bg-loaded::after {
	display: none;
}

/* ========================================================================
   LOADING STATES
   ======================================================================== */

/* Progressive loading states */
.peaches-bg-initial {
	/* Initial state - ready for progressive enhancement */
	transition: filter var(--peaches-transition-duration, 0.4s) ease-out;
	/* Ensure consistent background positioning */
	background-attachment: scroll;
	/* Prevent background image jumps */
	background-repeat: no-repeat;
}

.peaches-bg-loading {
	/* Loading state - subtle indication without flicker */
	position: relative;
}

.peaches-bg-loaded {
	/* Loaded state - sharp, full-quality image */
	opacity: 1;

	/* Maintain consistent background properties */
	background-attachment: scroll;
	background-repeat: no-repeat;
}

/* ========================================================================
   BOOTSTRAP RATIO COMPATIBILITY
   ======================================================================== */

/* Specific ratio fixes for responsive backgrounds */
.peaches-has-responsive-bg.ratio.ratio-1x1 {
	aspect-ratio: 1 / 1;
}

.peaches-has-responsive-bg.ratio.ratio-2x1 {
	aspect-ratio: 2 / 1;
}

.peaches-has-responsive-bg.ratio.ratio-1x2 {
	aspect-ratio: 1 / 2;
}

.peaches-has-responsive-bg.ratio.ratio-4x3 {
	aspect-ratio: 4 / 3;
}

.peaches-has-responsive-bg.ratio.ratio-3x4 {
	aspect-ratio: 3 / 4;
}

.peaches-has-responsive-bg.ratio.ratio-16x9 {
	aspect-ratio: 16 / 9;
}

.peaches-has-responsive-bg.ratio.ratio-21x9 {
	aspect-ratio: 21 / 9;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
	.peaches-has-responsive-bg.ratio.ratio-1x1::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 100%; /* 1:1 = 100% */
	}

	.peaches-has-responsive-bg.ratio.ratio-2x1::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 50%; /* 2:1 = 50% */
	}

	.peaches-has-responsive-bg.ratio.ratio-1x2::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 200%; /* 1:2 = 200% */
	}

	.peaches-has-responsive-bg.ratio.ratio-4x3::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 75%; /* 4:3 = 75% */
	}

	.peaches-has-responsive-bg.ratio.ratio-3x4::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 133.33%; /* 3:4 = 133.33% */
	}

	.peaches-has-responsive-bg.ratio.ratio-16x9::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 56.25%; /* 16:9 = 56.25% */
	}

	.peaches-has-responsive-bg.ratio.ratio-21x9::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 42.86%; /* 21:9 = 42.86% */
	}
}

/* Override the pseudo-element blocking for ratio fallbacks */
@supports not (aspect-ratio: 1 / 1) {
	.peaches-has-responsive-bg.ratio::before {
		/* Allow pseudo-elements for ratio fallback support */
		content: "" !important;
		/* Don't interfere with our overlay */
		z-index: 0;
	}

	/* But prioritize ratio fallback over loading indicator */
	.peaches-has-responsive-bg.ratio.peaches-bg-loading::before {
		/* Hide loading indicator in favor of ratio pseudo-element */
		display: none;
	}
}

/* ========================================================================
   SEAMLESS PARALLAX INTEGRATION
   ======================================================================== */

/*
 * Parallax integration is now seamless since both systems use --peaches-bg-image
 * The parallax CSS in effects/_parallax.scss will automatically work with responsive backgrounds
 */

/* ========================================================================
   ANTI-FLICKER OPTIMIZATIONS
   ======================================================================== */

/* Enhanced anti-flicker for image swapping */
.peaches-bg-transitioning {
	/* Temporary state during image URL change */
	transition: none !important;
}

/* Smooth transitions between loading states */
.peaches-has-responsive-bg {
	/* Use only filter transition to prevent image swapping flicker */
	transition: filter var(--peaches-transition-duration, 0.4s) ease-out;

	/* Prevent layout shifts during image changes */
	will-change: filter;

	/* Ensure consistent background behavior */
	background-attachment: scroll;
	background-repeat: no-repeat;
}

/* ========================================================================
   PERFORMANCE OPTIMIZATIONS
   ======================================================================== */

/* CSS custom properties for configuration */
:root {
	--peaches-blur-amount: 2px;
	--peaches-transition-duration: 0.4s;
}

/* High-performance GPU acceleration for transitions */
.peaches-bg-loading,
.peaches-bg-loaded {
	will-change: filter, opacity;
	transform: translateZ(0); /* Force GPU layer */
}

/* Remove will-change after transition to free GPU memory */
.peaches-bg-loaded {
	animation: peaches-cleanup-gpu 0.1s ease-out 0.5s forwards;
}

@keyframes peaches-cleanup-gpu {
	to {
		will-change: auto;
		transform: none;
	}
}

/* ========================================================================
   BOOTSTRAP UTILITIES COMPATIBILITY
   ======================================================================== */

/* Ensure compatibility with Bootstrap utilities */
.peaches-has-responsive-bg.bg-cover {
	background-size: cover !important;
}

.peaches-has-responsive-bg.bg-contain {
	background-size: contain !important;
}

.peaches-has-responsive-bg.bg-center {
	background-position: center !important;
}

/* ========================================================================
   RESPONSIVE DESIGN OPTIMIZATIONS
   ======================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.peaches-has-responsive-bg,
	.peaches-has-responsive-bg::after {
		transition-duration: 0.1s !important;
	}

	.peaches-bg-loading::before {
		animation: none;
		opacity: 0.5;
	}

	:root {
		--peaches-transition-duration: 0.1s;
	}
}

/* Mobile optimizations */
@media (max-width: 767px) {
	.peaches-has-responsive-bg,
	.peaches-has-responsive-bg::after {
		/* Faster transitions on mobile for better performance */
		transition-duration: 0.2s;
	}

	.peaches-bg-loading::before {
		/* Smaller loading indicator on mobile */
		width: 14px;
		height: 14px;
		margin: -7px 0 0 -7px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.peaches-bg-loading::before {
		/* Higher contrast loading indicator */
		border-color: rgba(255, 255, 255, 0.8);
		border-top-color: rgba(255, 255, 255, 1);
	}
}

/* ========================================================================
   CONTAINER QUERIES SUPPORT
   ======================================================================== */

/* Support for container queries when available */
@supports (container-type: inline-size) {
	.peaches-responsive-container {
		container-type: inline-size;
	}

	@container (max-width: 400px) {
		.peaches-has-responsive-bg::after {
			/* Faster transitions in small containers */
			transition-duration: 0.2s;
		}
	}
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */

/* Print styles - use highest quality image */
@media print {
	.peaches-has-responsive-bg {
		/* Force high-quality image for print */
		background-image: var(--peaches-bg-image) !important;
		filter: none !important;
		opacity: 1 !important;
	}

	.peaches-has-responsive-bg::after {
		/* Hide overlay when printing */
		display: none !important;
	}
}

/* ========================================================================
   FALLBACK SUPPORT
   ======================================================================== */

/* Fallback for browsers without CSS custom property support */
@supports not (background-image: var(--test)) {
	.peaches-has-responsive-bg {
		/* Fallback: JavaScript will set background-image directly */
		/* The system will still work but without CSS custom properties */
	}
}

/* ========================================================================
   DEBUG STYLES (DEVELOPMENT ONLY)
   ======================================================================== */

/* Debug styles (only when debug class is present) */
.peaches-debug .peaches-has-responsive-bg {
	position: relative;
	border: 2px solid rgba(0, 0, 255, 0.3);
}

.peaches-debug .peaches-has-responsive-bg::after {
	border: 2px solid rgba(255, 0, 0, 0.3);
}

.peaches-debug .peaches-bg-upgraded::after {
	border-color: rgba(255, 165, 0, 0.8);
}

.peaches-debug .peaches-bg-loaded::after {
	border-color: rgba(0, 255, 0, 0.8);
}

.peaches-debug .peaches-has-responsive-bg::before {
	content: attr(data-bg-id) ' - ' attr(data-current-size);
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-family: monospace;
	border-radius: 2px;
	z-index: 1000;
	pointer-events: none;
}