/**
 * MN Eletricks - Single Animation
 * Elegant entrance animations for sections, containers, and widgets
 */

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

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

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

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

.mn-single-fadeInUp {
	animation-name: mnSingleFadeInUp;
}

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

.mn-single-fadeInDown {
	animation-name: mnSingleFadeInDown;
}

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

.mn-single-fadeInLeft {
	animation-name: mnSingleFadeInLeft;
}

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

.mn-single-fadeInRight {
	animation-name: mnSingleFadeInRight;
}

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

.mn-single-fadeIn {
	animation-name: mnSingleFadeIn;
}

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

.mn-single-slideInUp {
	animation-name: mnSingleSlideInUp;
}

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

.mn-single-slideInDown {
	animation-name: mnSingleSlideInDown;
}

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

.mn-single-slideInLeft {
	animation-name: mnSingleSlideInLeft;
}

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

.mn-single-slideInRight {
	animation-name: mnSingleSlideInRight;
}

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

.mn-single-zoomIn {
	animation-name: mnSingleZoomIn;
}

/* Zoom In Up */
@keyframes mnSingleZoomInUp {
	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-single-zoomInUp {
	animation-name: mnSingleZoomInUp;
}

/* Zoom In Down */
@keyframes mnSingleZoomInDown {
	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-single-zoomInDown {
	animation-name: mnSingleZoomInDown;
}

/* Bounce In */
@keyframes mnSingleBounceIn {
	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-single-bounceIn {
	animation-name: mnSingleBounceIn;
}

/* Bounce In Up */
@keyframes mnSingleBounceInUp {
	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-single-bounceInUp {
	animation-name: mnSingleBounceInUp;
}

/* Flip In X */
@keyframes mnSingleFlipInX {
	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-single-flipInX {
	backface-visibility: visible !important;
	animation-name: mnSingleFlipInX;
}

/* Flip In Y */
@keyframes mnSingleFlipInY {
	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-single-flipInY {
	backface-visibility: visible !important;
	animation-name: mnSingleFlipInY;
}

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

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

/* Back In Up */
@keyframes mnSingleBackInUp {
	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-single-backInUp {
	animation-name: mnSingleBackInUp;
}

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

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