/**
 * MN Eletricks - Motion Effects Styles
 * 
 * Enhanced motion effects and entrance animation controls
 */

/* Motion Effects Base */
.mn-motion-effects {
	position: relative;
	overflow: hidden;
}

/* Entrance Animation Triggers */
.mn-entrance-trigger {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mn-entrance-trigger.mn-triggered {
	opacity: 1;
	visibility: visible;
}

/* Viewport Animation Observer */
.mn-viewport-animation {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mn-viewport-animation.mn-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Enhanced Animation Controls */
.mn-animation-container {
	position: relative;
	transform-style: preserve-3d;
}

.mn-animation-container.mn-perspective {
	perspective: 1000px;
}

/* Animation Delay Classes */
.mn-delay-100 { animation-delay: 0.1s; }
.mn-delay-200 { animation-delay: 0.2s; }
.mn-delay-300 { animation-delay: 0.3s; }
.mn-delay-400 { animation-delay: 0.4s; }
.mn-delay-500 { animation-delay: 0.5s; }
.mn-delay-600 { animation-delay: 0.6s; }
.mn-delay-700 { animation-delay: 0.7s; }
.mn-delay-800 { animation-delay: 0.8s; }
.mn-delay-900 { animation-delay: 0.9s; }
.mn-delay-1000 { animation-delay: 1s; }

/* Animation Duration Classes */
.mn-duration-fast { animation-duration: 0.5s; }
.mn-duration-normal { animation-duration: 1s; }
.mn-duration-slow { animation-duration: 2s; }
.mn-duration-slower { animation-duration: 3s; }

/* Transform Origin Classes */
.mn-origin-center { transform-origin: center center; }
.mn-origin-top { transform-origin: top center; }
.mn-origin-bottom { transform-origin: bottom center; }
.mn-origin-left { transform-origin: left center; }
.mn-origin-right { transform-origin: right center; }
.mn-origin-top-left { transform-origin: top left; }
.mn-origin-top-right { transform-origin: top right; }
.mn-origin-bottom-left { transform-origin: bottom left; }
.mn-origin-bottom-right { transform-origin: bottom right; }

/* Hover Effects */
.mn-hover-animation:hover {
	animation-play-state: running;
}

.mn-hover-animation {
	animation-play-state: paused;
}

/* Click Effects */
.mn-click-animation {
	cursor: pointer;
	animation-play-state: paused;
}

.mn-click-animation.mn-clicked {
	animation-play-state: running;
}

/* Scroll-triggered Animations */
.mn-scroll-animation {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease-out;
}

.mn-scroll-animation.mn-animate {
	opacity: 1;
	transform: translateY(0);
}

/* Performance Optimizations */
.mn-will-change {
	will-change: transform, opacity;
}

.mn-gpu-acceleration {
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Responsive Behavior */
@media (max-width: 1024px) {
	.mn-viewport-animation {
		transform: translateY(30px);
	}
}

@media (max-width: 768px) {
	.mn-viewport-animation {
		transform: translateY(20px);
		transition-duration: 0.6s;
	}
	
	.mn-duration-slow {
		animation-duration: 1.5s;
	}
	
	.mn-duration-slower {
		animation-duration: 2s;
	}
}

@media (max-width: 480px) {
	.mn-viewport-animation {
		transform: translateY(15px);
		transition-duration: 0.5s;
	}
}

/* Hide Overflow Feature */
.mn-hide-overflow {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

.mn-hide-overflow-parent {
	overflow-x: hidden !important;
}

.mn-hide-overflow-body body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

/* Ensure child elements respect overflow */
.mn-hide-overflow > * {
	max-width: 100%;
}

/* Prevent motion effects from causing overflow */
.mn-hide-overflow .elementor-motion-effects-element,
.mn-hide-overflow [data-settings*="motion_fx"],
.mn-hide-overflow .mn-scroll-effect,
.mn-hide-overflow .mn-parallax-effect,
.mn-hide-overflow .mn-mouse-effect {
	max-width: 100% !important;
}

/* Additional overflow prevention for animations */
.mn-hide-overflow.elementor-section,
.mn-hide-overflow.elementor-container,
.mn-hide-overflow.elementor-column {
	overflow-x: hidden !important;
}

/* Accessibility - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
	.mn-viewport-animation,
	.mn-scroll-animation,
	.mn-entrance-trigger {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}