/**
 * Elementor Popup Builder Lite — Animation Library
 *
 * 12 CSS animations with enter/exit variants.
 * All animations use CSS transforms for GPU-accelerated rendering.
 * Duration controlled via --epbl-animation-duration custom property.
 *
 * @package EPBL
 * @since   1.0.0
 */

/* ============================================================
   Fade
   ============================================================ */

@keyframes epbl-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes epbl-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.epbl-animate--fade-in {
	animation: epbl-fade-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--fade-out {
	animation: epbl-fade-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Fade Up
   ============================================================ */

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

@keyframes epbl-fade-up-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(30px);
	}
}

.epbl-animate--fade-up-in {
	animation: epbl-fade-up-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--fade-up-out {
	animation: epbl-fade-up-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Fade Down
   ============================================================ */

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

@keyframes epbl-fade-down-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-30px);
	}
}

.epbl-animate--fade-down-in {
	animation: epbl-fade-down-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--fade-down-out {
	animation: epbl-fade-down-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Fade Left
   ============================================================ */

@keyframes epbl-fade-left-in {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes epbl-fade-left-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-30px);
	}
}

.epbl-animate--fade-left-in {
	animation: epbl-fade-left-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--fade-left-out {
	animation: epbl-fade-left-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Fade Right
   ============================================================ */

@keyframes epbl-fade-right-in {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes epbl-fade-right-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(30px);
	}
}

.epbl-animate--fade-right-in {
	animation: epbl-fade-right-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--fade-right-out {
	animation: epbl-fade-right-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Zoom
   ============================================================ */

@keyframes epbl-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes epbl-zoom-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.5);
	}
}

.epbl-animate--zoom-in {
	animation: epbl-zoom-in var(--epbl-animation-duration, 300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.epbl-animate--zoom-out {
	animation: epbl-zoom-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Scale
   ============================================================ */

@keyframes epbl-scale-in {
	from {
		opacity: 0;
		transform: scale(0.85);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes epbl-scale-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.85);
	}
}

.epbl-animate--scale-in {
	animation: epbl-scale-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--scale-out {
	animation: epbl-scale-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Rotate
   ============================================================ */

@keyframes epbl-rotate-in {
	from {
		opacity: 0;
		transform: rotate(-10deg) scale(0.9);
	}
	to {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

@keyframes epbl-rotate-out {
	from {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
	to {
		opacity: 0;
		transform: rotate(10deg) scale(0.9);
	}
}

.epbl-animate--rotate-in {
	animation: epbl-rotate-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--rotate-out {
	animation: epbl-rotate-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Slide Up
   ============================================================ */

@keyframes epbl-slide-up-in {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes epbl-slide-up-out {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}

.epbl-animate--slide-up-in {
	animation: epbl-slide-up-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--slide-up-out {
	animation: epbl-slide-up-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Slide Down
   ============================================================ */

@keyframes epbl-slide-down-in {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes epbl-slide-down-out {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-100%);
	}
}

.epbl-animate--slide-down-in {
	animation: epbl-slide-down-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--slide-down-out {
	animation: epbl-slide-down-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Slide Left
   ============================================================ */

@keyframes epbl-slide-left-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes epbl-slide-left-out {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.epbl-animate--slide-left-in {
	animation: epbl-slide-left-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--slide-left-out {
	animation: epbl-slide-left-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Slide Right
   ============================================================ */

@keyframes epbl-slide-right-in {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes epbl-slide-right-out {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}

.epbl-animate--slide-right-in {
	animation: epbl-slide-right-in var(--epbl-animation-duration, 300ms) ease-out forwards;
}

.epbl-animate--slide-right-out {
	animation: epbl-slide-right-out var(--epbl-animation-duration, 300ms) ease-in forwards;
}

/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.epbl-popup__container,
	[class*="epbl-animate--"] {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}