/* ========================================
   Pretpot Banner with Floating Images
   ======================================== */

.pretpot-floating-banner-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pretpot-floating-banner {
	position: relative;
	width: 100%;
	height: 60vh;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pretpot-banner-video,
.pretpot-banner-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.pretpot-banner-image {
	background-size: cover;
	background-position: center;
}

.pretpot-floating-images-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.pretpot-floating-image {
	position: absolute;
	transform: translate(-50%, -50%);
	will-change: transform;
	pointer-events: auto;
}

.pretpot-floating-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Animation States */
.pretpot-floating-banner-wrapper.paused .pretpot-floating-image {
	animation-play-state: paused !important;
}

.pretpot-floating-banner-wrapper.playing .pretpot-floating-image {
	animation-play-state: running !important;
}

/* Wiggle Animation */
@keyframes pretpot-wiggle {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
	25% { transform: translate(-50%, -50%) rotate(var(--wiggle-intensity, 5deg)); }
	75% { transform: translate(-50%, -50%) rotate(calc(var(--wiggle-intensity, 5deg) * -1)); }
}

.pretpot-anim-wiggle {
	animation: pretpot-wiggle 3s ease-in-out infinite;
}

/* Bounce Animation */
@keyframes pretpot-bounce {
	0%, 100% { transform: translate(-50%, -50%) translateY(0); }
	50% { transform: translate(-50%, -50%) translateY(calc(var(--bounce-intensity, -10px))); }
}

.pretpot-anim-bounce {
	animation: pretpot-bounce 2s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pretpot-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(var(--pulse-scale, 1.1)); }
}

.pretpot-anim-pulse {
	animation: pretpot-pulse 2.5s ease-in-out infinite;
}

/* Float Animation */
@keyframes pretpot-float {
	0%, 100% { transform: translate(-50%, -50%) translateY(0) translateX(0); }
	25% { transform: translate(-50%, -50%) translateY(calc(var(--float-intensity, -15px))) translateX(5px); }
	50% { transform: translate(-50%, -50%) translateY(0) translateX(10px); }
	75% { transform: translate(-50%, -50%) translateY(calc(var(--float-intensity, -15px))) translateX(5px); }
}

.pretpot-anim-float {
	animation: pretpot-float 4s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
	.pretpot-floating-banner {
		height: 50vh;
	}
	
	.pretpot-floating-image img {
		max-width: 60px;
	}
}

@media (max-width: 480px) {
	.pretpot-floating-banner {
		height: 40vh;
	}
	
	.pretpot-floating-image img {
		max-width: 40px;
	}
}