/**
 * Popup Animations
 * Enhanced animations for better UX
 */

/* Animation Variables */
:root {
	--ipm-animation-duration: 0.3s;
	--ipm-animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
	--ipm-animation-delay: 0s;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Base Animation Classes */
.instant-popup-container {
	animation-duration: var(--ipm-animation-duration);
	animation-timing-function: var(--ipm-animation-timing);
	animation-fill-mode: both;
}

/* Fade Animation */
@keyframes ipmFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ipmFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.ipm-anim-fade.instant-popup-show {
	animation-name: ipmFadeIn;
}

.ipm-anim-fade.instant-popup-hide {
	animation-name: ipmFadeOut;
}

/* Slide Up Animation */
@keyframes ipmSlideUp {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ipmSlideUpOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-50px);
	}
}

.ipm-anim-slide-up.instant-popup-show {
	animation-name: ipmSlideUp;
}

.ipm-anim-slide-up.instant-popup-hide {
	animation-name: ipmSlideUpOut;
}

/* Slide Down Animation */
@keyframes ipmSlideDown {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ipmSlideDownOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(50px);
	}
}

.ipm-anim-slide-down.instant-popup-show {
	animation-name: ipmSlideDown;
}

.ipm-anim-slide-down.instant-popup-hide {
	animation-name: ipmSlideDownOut;
}

/* Slide Left Animation */
@keyframes ipmSlideLeft {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ipmSlideLeftOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-50px);
	}
}

.ipm-anim-slide-left.instant-popup-show {
	animation-name: ipmSlideLeft;
}

.ipm-anim-slide-left.instant-popup-hide {
	animation-name: ipmSlideLeftOut;
}

/* Slide Right Animation */
@keyframes ipmSlideRight {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ipmSlideRightOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(50px);
	}
}

.ipm-anim-slide-right.instant-popup-show {
	animation-name: ipmSlideRight;
}

.ipm-anim-slide-right.instant-popup-hide {
	animation-name: ipmSlideRightOut;
}

/* Zoom Animation */
@keyframes ipmZoomIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ipmZoomOut {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.8);
	}
}

.ipm-anim-zoom.instant-popup-show {
	animation-name: ipmZoomIn;
}

.ipm-anim-zoom.instant-popup-hide {
	animation-name: ipmZoomOut;
}

/* Bounce Animation */
@keyframes ipmBounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ipmBounceOut {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(0.95);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		opacity: 0;
		transform: scale(0.3);
	}
}

.ipm-anim-bounce.instant-popup-show {
	animation-name: ipmBounceIn;
}

.ipm-anim-bounce.instant-popup-hide {
	animation-name: ipmBounceOut;
}

/* Flip Animation */
@keyframes ipmFlipIn {
	from {
		opacity: 0;
		transform: perspective(400px) rotateX(-90deg);
	}
	to {
		opacity: 1;
		transform: perspective(400px) rotateX(0deg);
	}
}

@keyframes ipmFlipOut {
	from {
		opacity: 1;
		transform: perspective(400px) rotateX(0deg);
	}
	to {
		opacity: 0;
		transform: perspective(400px) rotateX(90deg);
	}
}

.ipm-anim-flip.instant-popup-show {
	animation-name: ipmFlipIn;
}

.ipm-anim-flip.instant-popup-hide {
	animation-name: ipmFlipOut;
}

/* Overlay Animations */
.instant-popup-overlay {
	animation: ipmOverlayFadeIn 0.3s ease-out;
}

.instant-popup-overlay.instant-popup-hide {
	animation: ipmOverlayFadeOut 0.3s ease-out;
}

@keyframes ipmOverlayFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ipmOverlayFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Smooth Transitions */
.instant-popup-container {
	transition: transform 0.3s var(--ipm-animation-timing),
				opacity 0.3s var(--ipm-animation-timing);
	will-change: transform, opacity;
}

.instant-popup-close {
	transition: all 0.2s ease;
}

.instant-popup-close:hover {
	transform: scale(1.1) rotate(90deg);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
	:root {
		--ipm-animation-duration: 0.2s;
	}

	.instant-popup-container {
		animation-duration: 0.2s;
	}

	/* Optimize for mobile performance */
	.ipm-anim-flip.instant-popup-show,
	.ipm-anim-flip.instant-popup-hide {
		/* Use simpler animation on mobile */
		animation-name: ipmFadeIn;
	}
}

/* Touch Device Enhancements */
.ipm-touch-device .instant-popup-close {
	/* Larger hit area for touch */
	min-width: 44px;
	min-height: 44px;
}

.ipm-touch-device .instant-popup-container {
	/* Prevent overscroll */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Swipe Indicator */
.ipm-swipe-indicator {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ipm-touch-device .ipm-swipe-indicator {
	opacity: 1;
}

/* Loading State */
.instant-popup-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.instant-popup-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #333;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ipmSpinner 0.6s linear infinite;
}

@keyframes ipmSpinner {
	to {
		transform: rotate(360deg);
	}
}

/* Accessibility */
.instant-popup-accessible-content:focus {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.instant-popup-container {
		border: 2px solid currentColor;
	}

	.instant-popup-close {
		background: #000 !important;
		color: #fff !important;
		border: 2px solid #fff;
	}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	.instant-popup-overlay {
		background-color: rgba(0, 0, 0, 0.85);
	}

	.instant-popup-container {
		background-color: #1a1a1a;
		color: #f0f0f0;
	}
}

/* Performance Optimizations */
.instant-popup-container {
	/* Use GPU acceleration */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Backdrop Filter Support */
@supports (backdrop-filter: blur(10px)) {
	.instant-popup-overlay.ipm-blur-backdrop {
		backdrop-filter: blur(10px);
		background-color: rgba(0, 0, 0, 0.5);
	}
}

/* Print Styles */
@media print {
	.instant-popup-overlay,
	.instant-popup-container {
		display: none !important;
	}
}