/**
 * MN Eletricks - Listing Animations
 * Elegant animations for listing widgets
 */

/* Base styles for animated items */
[data-mn-listing-animation="enabled"] .mn-listing-item {
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}

[data-mn-listing-animation="enabled"] .mn-listing-item.mn-animated {
	opacity: 1;
	visibility: visible;
	animation-fill-mode: both;
}

/* CRITICAL: Slick cloned slides should always be visible (for infinity loop) */
[data-mn-listing-animation="enabled"] .slick-cloned.mn-listing-item,
[data-mn-listing-animation="enabled"] .slick-cloned .mn-listing-item {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	will-change: auto;
}

/* Ensure cloned slides don't get animation classes */
.slick-cloned.mn-animated,
.slick-cloned .mn-animated {
	animation: none !important;
}

/* Animation Speed Classes */
.mn-animation-slow {
	animation-duration: 1s !important;
}

.mn-animation-normal {
	animation-duration: 0.6s !important;
}

.mn-animation-fast {
	animation-duration: 0.3s !important;
}

/* Fade In Up */
@keyframes mnFadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.mn-fadeInUp {
	animation-name: mnFadeInUp;
}

/* Fade In Down */
@keyframes mnFadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.mn-fadeInDown {
	animation-name: mnFadeInDown;
}

/* Fade In Left */
@keyframes mnFadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.mn-fadeInLeft {
	animation-name: mnFadeInLeft;
}

/* Fade In Right */
@keyframes mnFadeInRight {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.mn-fadeInRight {
	animation-name: mnFadeInRight;
}

/* Fade In */
@keyframes mnFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.mn-fadeIn {
	animation-name: mnFadeIn;
}

/* Slide In Up */
@keyframes mnSlideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.mn-slideInUp {
	animation-name: mnSlideInUp;
}

/* Slide In Down */
@keyframes mnSlideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.mn-slideInDown {
	animation-name: mnSlideInDown;
}

/* Slide In Left */
@keyframes mnSlideInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.mn-slideInLeft {
	animation-name: mnSlideInLeft;
}

/* Slide In Right */
@keyframes mnSlideInRight {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.mn-slideInRight {
	animation-name: mnSlideInRight;
}

/* Zoom In */
@keyframes mnZoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	50% {
		opacity: 1;
	}
}

.mn-zoomIn {
	animation-name: mnZoomIn;
}

/* Zoom In Up */
@keyframes mnZoomInUp {
	from {
		opacity: 0;
		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	60% {
		opacity: 1;
		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}

.mn-zoomInUp {
	animation-name: mnZoomInUp;
}

/* Zoom In Down */
@keyframes mnZoomInDown {
	from {
		opacity: 0;
		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	60% {
		opacity: 1;
		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}

.mn-zoomInDown {
	animation-name: mnZoomInDown;
}

/* Bounce In */
@keyframes mnBounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.mn-bounceIn {
	animation-name: mnBounceIn;
}

/* Bounce In Up */
@keyframes mnBounceInUp {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	from {
		opacity: 0;
		transform: translate3d(0, 3000px, 0) scaleY(5);
	}
	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0) scaleY(0.9);
	}
	75% {
		transform: translate3d(0, 10px, 0) scaleY(0.95);
	}
	90% {
		transform: translate3d(0, -5px, 0) scaleY(0.985);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

.mn-bounceInUp {
	animation-name: mnBounceInUp;
}

/* Flip In X */
@keyframes mnFlipInX {
	from {
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		transform: perspective(400px);
	}
}

.mn-flipInX {
	backface-visibility: visible !important;
	animation-name: mnFlipInX;
}

/* Flip In Y */
@keyframes mnFlipInY {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}
	to {
		transform: perspective(400px);
	}
}

.mn-flipInY {
	backface-visibility: visible !important;
	animation-name: mnFlipInY;
}

/* Rotate In */
@keyframes mnRotateIn {
	from {
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.mn-rotateIn {
	animation-name: mnRotateIn;
	transform-origin: center;
}

/* Back In Up */
@keyframes mnBackInUp {
	0% {
		transform: translateY(1200px) scale(0.7);
		opacity: 0.7;
	}
	80% {
		transform: translateY(0px) scale(0.7);
		opacity: 0.7;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.mn-backInUp {
	animation-name: mnBackInUp;
}

/* Disable animations on mobile when setting is enabled */
@media (max-width: 768px) {
	[data-mn-listing-animation="enabled"][data-mn-disable-mobile="yes"] .mn-listing-item {
		animation: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		will-change: auto !important;
	}
	
	[data-mn-listing-animation="enabled"][data-mn-disable-mobile="yes"] .mn-listing-item.mn-animated {
		animation: none !important;
	}
}

/* Responsive adjustments for enabled animations */
@media (max-width: 768px) {
	[data-mn-listing-animation="enabled"][data-mn-disable-mobile="no"] .mn-listing-item {
		animation-duration: 0.4s !important;
	}
	
	[data-mn-listing-animation="enabled"][data-mn-disable-mobile="no"] .mn-animation-slow {
		animation-duration: 0.6s !important;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	[data-mn-listing-animation="enabled"] .mn-listing-item {
		animation: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}