/* ============================================
   PRETPOT IMAGE EFFECTS v2 - CSS Based
   ============================================ */

/* Base Wrapper */
.pretpot-effects-wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.pretpot-effect-container {
	position: relative;
	display: inline-block;
	overflow: hidden;
	line-height: 0;
}

.pretpot-effect-image {
	display: block;
	max-width: 100%;
	height: auto;
	transition: all 0.3s ease;
}

/* ============================================
   GLASS EFFECT
   ============================================ */
.pretpot-effect-glass .pretpot-effect-container,
.pretpot-effect-frosted_glass .pretpot-effect-container {
	position: relative;
}

.pretpot-effect-glass .pretpot-effect-image,
.pretpot-effect-frosted_glass .pretpot-effect-image {
	filter: blur(var(--pretpot-blur, 10px));
	transform: scale(1.1);
}

.pretpot-glass-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.4) 0%,
		rgba(255, 255, 255, 0.1) 50%,
		rgba(255, 255, 255, 0.2) 100%
	);
	backdrop-filter: blur(var(--pretpot-blur, 10px)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--pretpot-blur, 10px)) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.pretpot-effect-frosted_glass .pretpot-glass-overlay {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0.5) 100%
	);
	backdrop-filter: blur(var(--pretpot-blur, 10px)) saturate(200%);
	-webkit-backdrop-filter: blur(var(--pretpot-blur, 10px)) saturate(200%);
}

/* ============================================
   REFRACTED GLASS EFFECT
   ============================================ */
.pretpot-effect-refracted_glass .pretpot-effect-container {
	position: relative;
	overflow: hidden;
}

.pretpot-effect-refracted_glass .pretpot-effect-image {
	filter: blur(calc(var(--pretpot-blur, 10px) * 0.5));
	transform: scale(1.15);
	animation: pretpot-refract-wave 4s ease-in-out infinite;
}

@keyframes pretpot-refract-wave {
	0%, 100% {
		transform: scale(1.15) translateX(0) translateY(0);
	}
	25% {
		transform: scale(1.15) translateX(calc(var(--pretpot-distortion, 20px) * 0.1)) translateY(calc(var(--pretpot-distortion, 20px) * -0.05));
	}
	50% {
		transform: scale(1.15) translateX(calc(var(--pretpot-distortion, 20px) * -0.05)) translateY(calc(var(--pretpot-distortion, 20px) * 0.1));
	}
	75% {
		transform: scale(1.15) translateX(calc(var(--pretpot-distortion, 20px) * -0.1)) translateY(calc(var(--pretpot-distortion, 20px) * -0.08));
	}
}

.pretpot-refracted-overlay {
	position: absolute;
	inset: 0;
	background: 
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent calc(20px / var(--pretpot-frequency, 5)),
			rgba(255, 255, 255, calc(var(--pretpot-roughness, 50) * 0.005)) calc(20px / var(--pretpot-frequency, 5)),
			rgba(255, 255, 255, calc(var(--pretpot-roughness, 50) * 0.005)) calc(40px / var(--pretpot-frequency, 5))
		),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent calc(20px / var(--pretpot-frequency, 5)),
			rgba(255, 255, 255, calc(var(--pretpot-roughness, 50) * 0.003)) calc(20px / var(--pretpot-frequency, 5)),
			rgba(255, 255, 255, calc(var(--pretpot-roughness, 50) * 0.003)) calc(40px / var(--pretpot-frequency, 5))
		);
	backdrop-filter: blur(var(--pretpot-blur, 10px));
	-webkit-backdrop-filter: blur(var(--pretpot-blur, 10px));
	mix-blend-mode: overlay;
	pointer-events: none;
	animation: pretpot-refract-shimmer 3s ease-in-out infinite;
}

@keyframes pretpot-refract-shimmer {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

.pretpot-refracted-highlight {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.5) 0%,
		transparent 40%,
		transparent 60%,
		rgba(255, 255, 255, 0.3) 100%
	);
	pointer-events: none;
	mix-blend-mode: soft-light;
}

/* ============================================
   FRACTAL GLASS EFFECT
   ============================================ */
.pretpot-effect-fractal_glass .pretpot-effect-container {
	position: relative;
	filter: contrast(1.2) brightness(1.1);
}

.pretpot-effect-fractal_glass .pretpot-effect-image {
	filter: url('#pretpot-fractal-filter') blur(calc(var(--pretpot-intensity, 50) * 0.1px));
	transform: scale(1.05);
}

.pretpot-fractal-overlay {
	position: absolute;
	inset: 0;
	background: 
		radial-gradient(
			circle at 20% 50%,
			rgba(120, 119, 198, calc(var(--pretpot-intensity, 50) * 0.005)) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 80% 80%,
			rgba(255, 119, 198, calc(var(--pretpot-intensity, 50) * 0.005)) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 40% 20%,
			rgba(120, 219, 255, calc(var(--pretpot-intensity, 50) * 0.005)) 0%,
			transparent 50%
		);
	mix-blend-mode: color-dodge;
	pointer-events: none;
	animation: pretpot-fractal-shift 8s ease-in-out infinite;
}

@keyframes pretpot-fractal-shift {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.8;
	}
	33% {
		transform: translate(2%, 2%) scale(1.05);
		opacity: 1;
	}
	66% {
		transform: translate(-1%, 1%) scale(0.95);
		opacity: 0.9;
	}
}

/* ============================================
   LIQUID GLASS EFFECT
   ============================================ */
.pretpot-effect-liquid_glass .pretpot-effect-container {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
}

.pretpot-effect-liquid_glass .pretpot-effect-image {
	filter: blur(var(--pretpot-blur, 10px)) saturate(1.5);
	transform: scale(1.1);
	animation: pretpot-liquid-warp 5s ease-in-out infinite;
}

@keyframes pretpot-liquid-warp {
	0%, 100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
		transform: scale(1.1) rotate(0deg);
	}
	25% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
		transform: scale(1.12) rotate(1deg);
	}
	50% {
		border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
		transform: scale(1.08) rotate(-1deg);
	}
	75% {
		border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
		transform: scale(1.1) rotate(0.5deg);
	}
}

.pretpot-liquid-overlay {
	position: absolute;
	inset: -20%;
	background: 
		conic-gradient(
			from 0deg at 50% 50%,
			rgba(255, 255, 255, 0.3) 0deg,
			rgba(255, 255, 255, 0.1) 60deg,
			rgba(255, 255, 255, 0.4) 120deg,
			rgba(255, 255, 255, 0.1) 180deg,
			rgba(255, 255, 255, 0.3) 240deg,
			rgba(255, 255, 255, 0.1) 300deg,
			rgba(255, 255, 255, 0.3) 360deg
		);
	backdrop-filter: blur(calc(var(--pretpot-blur, 10px) * 0.5));
	-webkit-backdrop-filter: blur(calc(var(--pretpot-blur, 10px) * 0.5));
	animation: pretpot-liquid-rotate 10s linear infinite;
	pointer-events: none;
	mix-blend-mode: overlay;
}

@keyframes pretpot-liquid-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ============================================
   SUPER GRADIENT EFFECT
   ============================================ */
.pretpot-effect-super_gradient .pretpot-effect-container {
	position: relative;
}

.pretpot-effect-super_gradient .pretpot-effect-image {
	filter: saturate(1.5) contrast(1.1);
	mix-blend-mode: multiply;
}

.pretpot-gradient-overlay {
	position: absolute;
	inset: 0;
	background: var(--pretpot-gradient, linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0));
	mix-blend-mode: screen;
	opacity: calc(var(--pretpot-intensity, 50) * 0.01);
	pointer-events: none;
	animation: pretpot-gradient-shift 3s ease infinite;
	background-size: 200% 200%;
}

@keyframes pretpot-gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Gradient presets */
.pretpot-effect-super_gradient[data-gradient="neon"] {
	--pretpot-gradient: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
}

.pretpot-effect-super_gradient[data-gradient="sunset"] {
	--pretpot-gradient: linear-gradient(45deg, #ff512f, #dd2476, #ff512f);
}

.pretpot-effect-super_gradient[data-gradient="ocean"] {
	--pretpot-gradient: linear-gradient(45deg, #2193b0, #6dd5ed, #2193b0);
}

.pretpot-effect-super_gradient[data-gradient="forest"] {
	--pretpot-gradient: linear-gradient(45deg, #11998e, #38ef7d, #11998e);
}

/* ============================================
   LEGO PIXEL EFFECT
   ============================================ */
.pretpot-effect-lego_pixel .pretpot-effect-container {
	position: relative;
	image-rendering: pixelated;
}

.pretpot-effect-lego_pixel .pretpot-effect-image {
	display: none;
}

.pretpot-pixel-canvas {
	display: block;
	image-rendering: pixelated;
	width: 100%;
	height: auto;
}

/* ============================================
   CHROMATIC ABERRATION EFFECT
   ============================================ */
.pretpot-effect-chromatic_aberration .pretpot-effect-container {
	position: relative;
}

.pretpot-effect-chromatic_aberration .pretpot-effect-image {
	filter: grayscale(100%) contrast(1.2);
}

.pretpot-chromatic-layer {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	background-size: cover;
	background-position: center;
}

.pretpot-chromatic-red {
	background-image: inherit;
	filter: url('#pretpot-chromatic-red');
	transform: translateX(calc(var(--pretpot-offset, 5px) * -1));
	opacity: 0.8;
}

.pretpot-chromatic-blue {
	background-image: inherit;
	filter: url('#pretpot-chromatic-blue');
	transform: translateX(var(--pretpot-offset, 5px));
	opacity: 0.8;
}

/* ============================================
   GRAIN EFFECT
   ============================================ */
.pretpot-effect-grain .pretpot-effect-container {
	position: relative;
}

.pretpot-effect-grain .pretpot-effect-image {
	filter: contrast(1.1) saturate(0.9);
}

.pretpot-noise-overlay {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: calc(var(--pretpot-intensity, 50) * 0.01);
	pointer-events: none;
	mix-blend-mode: overlay;
	animation: pretpot-grain-shift 0.5s steps(10) infinite;
}

@keyframes pretpot-grain-shift {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-1%, -1%); }
	20% { transform: translate(1%, 1%); }
	30% { transform: translate(-1%, 1%); }
	40% { transform: translate(1%, -1%); }
	50% { transform: translate(-1%, 0%); }
	60% { transform: translate(1%, 0%); }
	70% { transform: translate(0%, 1%); }
	80% { transform: translate(0%, -1%); }
	90% { transform: translate(1%, 1%); }
}

/* ============================================
   NOISE EFFECT
   ============================================ */
.pretpot-effect-noise .pretpot-effect-container {
	position: relative;
}

.pretpot-effect-noise .pretpot-noise-overlay {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: calc(var(--pretpot-intensity, 50) * 0.015);
	mix-blend-mode: color-burn;
	animation: pretpot-noise-shift 0.2s steps(5) infinite;
}

@keyframes pretpot-noise-shift {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(2%, -2%); }
	50% { transform: translate(-2%, 2%); }
	75% { transform: translate(-2%, -2%); }
}

/* ============================================
   HOVER ANIMATIONS
   ============================================ */
.pretpot-effect-animate-hover .pretpot-effect-image {
	transition: all 0.5s ease;
}

.pretpot-effect-animate-hover:hover .pretpot-effect-image {
	transform: scale(1.05);
	filter: blur(0) !important;
}

.pretpot-effect-animate-hover.pretpot-effect-glass:hover .pretpot-glass-overlay,
.pretpot-effect-animate-hover.pretpot-effect-frosted_glass:hover .pretpot-glass-overlay {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.pretpot-effect-animate-hover.pretpot-effect-chromatic_aberration:hover .pretpot-chromatic-layer {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.pretpot-effect-animate-hover.pretpot-effect-super_gradient:hover .pretpot-gradient-overlay {
	opacity: 0.3;
}

/* ============================================
   SVG FILTERS (Hidden)
   ============================================ */
.pretpot-svg-filters {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}