/**
 * Animaciones de Figma para WordPress y Elementor
 * Efectos de movimiento basados en prototipos de Figma
 * Compatible con Elementor y Gutenberg
 *
 * @package MadridCrece
 */

/* ============================================
   ANIMACIONES BASE - KEYFRAMES
   ============================================ */

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

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

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

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

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

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

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

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

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

@keyframes mcScaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

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

@keyframes mcScaleInTop {
	from {
		opacity: 0;
		transform: scale(0) translateY(-50px);
		transform-origin: top;
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes mcScaleInBottom {
	from {
		opacity: 0;
		transform: scale(0) translateY(50px);
		transform-origin: bottom;
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes mcBlurIn {
	from {
		opacity: 0;
		filter: blur(10px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes mcZoomIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

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

@keyframes mcBounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes mcBounceInUp {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	60% {
		opacity: 1;
		transform: translateY(-10px);
	}
	80% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes mcBounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}
	60% {
		opacity: 1;
		transform: translateY(10px);
	}
	80% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes mcRotateIn {
	from {
		opacity: 0;
		transform: rotate(-180deg) scale(0.8);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

@keyframes mcRotateInClockwise {
	from {
		opacity: 0;
		transform: rotate(-90deg);
	}
	to {
		opacity: 1;
		transform: rotate(0deg);
	}
}

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

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

@keyframes mcElasticIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mcElasticInX {
	0% {
		opacity: 0;
		transform: translateX(-100px) scaleX(0);
	}
	50% {
		transform: translateX(20px) scaleX(1.1);
	}
	70% {
		transform: translateX(-5px) scaleX(0.95);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scaleX(1);
	}
}

@keyframes mcElasticInY {
	0% {
		opacity: 0;
		transform: translateY(-100px) scaleY(0);
	}
	50% {
		transform: translateY(20px) scaleY(1.1);
	}
	70% {
		transform: translateY(-5px) scaleY(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}

@keyframes mcGlowIn {
	from {
		opacity: 0;
		filter: brightness(0.5) drop-shadow(0 0 0 rgba(59, 130, 246, 0));
	}
	to {
		opacity: 1;
		filter: brightness(1) drop-shadow(0 0 20px rgba(59, 130, 246, 0.8));
	}
}

@keyframes mcShimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

/* ============================================
   CLASES DE UTILIDAD PARA ANIMACIONES
   ============================================ */

.mc-figma-animate {
	opacity: 0;
}

.mc-figma-animate.mc-animated {
	opacity: 1;
}

/* Animación fade-in */
.mc-animate-fade-in {
	animation: mcFadeIn 0.6s ease-out forwards;
}

/* Animación fade-in-up */
.mc-animate-fade-in-up {
	animation: mcFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación fade-in-down */
.mc-animate-fade-in-down {
	animation: mcFadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación fade-in-left */
.mc-animate-fade-in-left {
	animation: mcFadeInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación fade-in-right */
.mc-animate-fade-in-right {
	animation: mcFadeInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación slide-in-left */
.mc-animate-slide-in-left {
	animation: mcSlideInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación slide-in-right */
.mc-animate-slide-in-right {
	animation: mcSlideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación slide-in-up */
.mc-animate-slide-in-up {
	animation: mcSlideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación slide-in-down */
.mc-animate-slide-in-down {
	animation: mcSlideInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación scale-in */
.mc-animate-scale-in {
	animation: mcScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación scale-in-center */
.mc-animate-scale-in-center {
	animation: mcScaleInCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación scale-in-top */
.mc-animate-scale-in-top {
	animation: mcScaleInTop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación scale-in-bottom */
.mc-animate-scale-in-bottom {
	animation: mcScaleInBottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación blur-in */
.mc-animate-blur-in {
	animation: mcBlurIn 0.6s ease-out forwards;
}

/* Animación zoom-in */
.mc-animate-zoom-in {
	animation: mcZoomIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación zoom-in-up */
.mc-animate-zoom-in-up {
	animation: mcZoomInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación bounce-in */
.mc-animate-bounce-in {
	animation: mcBounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación bounce-in-up */
.mc-animate-bounce-in-up {
	animation: mcBounceInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación bounce-in-down */
.mc-animate-bounce-in-down {
	animation: mcBounceInDown 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación rotate-in */
.mc-animate-rotate-in {
	animation: mcRotateIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animación rotate-in-clockwise */
.mc-animate-rotate-in-clockwise {
	animation: mcRotateInClockwise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación flip-in-x */
.mc-animate-flip-in-x {
	animation: mcFlipInX 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación flip-in-y */
.mc-animate-flip-in-y {
	animation: mcFlipInY 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación elastic-in */
.mc-animate-elastic-in {
	animation: mcElasticIn 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación elastic-in-x */
.mc-animate-elastic-in-x {
	animation: mcElasticInX 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación elastic-in-y */
.mc-animate-elastic-in-y {
	animation: mcElasticInY 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Animación glow-in */
.mc-animate-glow-in {
	animation: mcGlowIn 0.8s ease-out forwards;
}

/* Efecto shimmer */
.mc-shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 1000px 100%;
	animation: mcShimmer 2s linear infinite;
}

/* Delays */
.mc-animate-delay-100 {
	animation-delay: 100ms;
}

.mc-animate-delay-200 {
	animation-delay: 200ms;
}

.mc-animate-delay-300 {
	animation-delay: 300ms;
}

.mc-animate-delay-500 {
	animation-delay: 500ms;
}

.mc-animate-delay-400 {
	animation-delay: 400ms;
}

.mc-animate-delay-600 {
	animation-delay: 600ms;
}

.mc-animate-delay-800 {
	animation-delay: 800ms;
}

.mc-animate-delay-1000 {
	animation-delay: 1000ms;
}

/* ============================================
   COMPATIBILIDAD CON ELEMENTOR
   ============================================ */

/* Aplicar animaciones a elementos de Elementor */
.elementor-element.mc-figma-animate {
	opacity: 0;
}

.elementor-element.mc-figma-animate.mc-animated {
	opacity: 1;
}

/* Asegurar que las animaciones funcionen en Elementor */
.elementor-widget,
.elementor-column,
.elementor-section {
	will-change: transform, opacity;
}

/* Override de animaciones de Elementor si se usa animación de Figma */
.elementor-element[data-mc-figma-animation] {
	animation-fill-mode: forwards;
}

/* Estados iniciales para scroll animations en Elementor */
.elementor-element.mc-figma-scroll-animate {
	opacity: 0;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.elementor-element.mc-figma-scroll-animate.mc-animated {
	opacity: 1;
}

/* Asegurar que los selectores de Elementor funcionen con animaciones personalizadas */
.elementor-element[class*="mc-animate-"] {
	animation-fill-mode: forwards;
}

/* ============================================
   HOVER EFFECTS SIMILARES A FIGMA
   ============================================ */

.mc-figma-hover-scale {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-figma-hover-scale:hover {
	transform: scale(1.05);
}

.mc-figma-hover-lift {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.mc-figma-hover-lift:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.mc-figma-hover-rotate {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-figma-hover-rotate:hover {
	transform: rotate(5deg);
}

.mc-figma-hover-glow {
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mc-figma-hover-glow:hover {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
	transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE Y ACCESIBILIDAD
   ============================================ */

/* Reducir animaciones en móvil y para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.mc-figma-animate,
	.mc-figma-scroll-animate,
	[class*="mc-animate-"],
	.elementor-element[class*="mc-animate-"] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Optimización para móviles - reducir delays */
@media (max-width: 768px) {
	.mc-animate-delay-300,
	.mc-animate-delay-400,
	.mc-animate-delay-500,
	.mc-animate-delay-600,
	.mc-animate-delay-800,
	.mc-animate-delay-1000 {
		animation-delay: 0ms !important;
	}
	
	/* Reducir duraciones de animación en móvil para mejor rendimiento */
	[class*="mc-animate-"] {
		animation-duration: 0.4s !important;
	}
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */

/* Usar GPU acceleration cuando sea posible */
.mc-animate-fade-in-up,
.mc-animate-slide-in-left,
.mc-animate-slide-in-right,
.mc-animate-zoom-in,
.mc-animate-scale-in {
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Evitar repaints innecesarios */
.elementor-element[class*="mc-animate-"] {
	contain: layout style paint;
}