/**
 * Animaciones de entrada y de hover.
 */

.mango-invisible {
	visibility: hidden;
}

[data-mango-animation].mango-animated {
	visibility: visible;
	animation-duration: 1s;
	animation-fill-mode: both;
}

[data-mango-animation].mango-animated.slow {
	animation-duration: 2s;
}

[data-mango-animation].mango-animated.fast {
	animation-duration: 0.5s;
}

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

@keyframes mangoFadeInUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoFadeInDown {
	from { opacity: 0; transform: translateY(-40px); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoFadeInLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoFadeInRight {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoZoomIn {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoZoomOut {
	from { opacity: 0; transform: scale(1.15); }
	to { opacity: 1; transform: none; }
}

@keyframes mangoSlideInUp {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes mangoSlideInDown {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

@keyframes mangoSlideInLeft {
	from { transform: translateX(-100%); }
	to { transform: none; }
}

@keyframes mangoSlideInRight {
	from { transform: translateX(100%); }
	to { transform: none; }
}

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

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

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

@keyframes mangoRotateIn {
	from { opacity: 0; transform: rotate(-180deg); }
	to { opacity: 1; transform: none; }
}

.mango-animated[data-mango-animation="fadeIn"] { animation-name: mangoFadeIn; }
.mango-animated[data-mango-animation="fadeInUp"] { animation-name: mangoFadeInUp; }
.mango-animated[data-mango-animation="fadeInDown"] { animation-name: mangoFadeInDown; }
.mango-animated[data-mango-animation="fadeInLeft"] { animation-name: mangoFadeInLeft; }
.mango-animated[data-mango-animation="fadeInRight"] { animation-name: mangoFadeInRight; }
.mango-animated[data-mango-animation="zoomIn"] { animation-name: mangoZoomIn; }
.mango-animated[data-mango-animation="zoomOut"] { animation-name: mangoZoomOut; }
.mango-animated[data-mango-animation="slideInUp"] { animation-name: mangoSlideInUp; }
.mango-animated[data-mango-animation="slideInDown"] { animation-name: mangoSlideInDown; }
.mango-animated[data-mango-animation="slideInLeft"] { animation-name: mangoSlideInLeft; }
.mango-animated[data-mango-animation="slideInRight"] { animation-name: mangoSlideInRight; }
.mango-animated[data-mango-animation="bounceIn"] { animation-name: mangoBounceIn; }
.mango-animated[data-mango-animation="flipInX"] { animation-name: mangoFlipInX; }
.mango-animated[data-mango-animation="flipInY"] { animation-name: mangoFlipInY; }
.mango-animated[data-mango-animation="rotateIn"] { animation-name: mangoRotateIn; }

/* Hover */

.mango-animation-grow { transition: transform 0.3s; }
.mango-animation-grow:hover { transform: scale(1.06); }

.mango-animation-shrink { transition: transform 0.3s; }
.mango-animation-shrink:hover { transform: scale(0.94); }

.mango-animation-float { transition: transform 0.3s; }
.mango-animation-float:hover { transform: translateY(-8px); }

.mango-animation-sink { transition: transform 0.3s; }
.mango-animation-sink:hover { transform: translateY(8px); }

.mango-animation-rotate { transition: transform 0.3s; }
.mango-animation-rotate:hover { transform: rotate(4deg); }

@keyframes mangoBob {
	0%, 100% { transform: translateY(-6px); }
	50% { transform: translateY(0); }
}

.mango-animation-bob:hover { animation: mangoBob 1.2s ease-in-out infinite; }

@keyframes mangoBuzz {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px) rotate(-1deg); }
	75% { transform: translateX(3px) rotate(1deg); }
}

.mango-animation-buzz:hover { animation: mangoBuzz 0.3s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.mango-animated,
	[class*="mango-animation-"] {
		animation: none !important;
		transition: none !important;
	}

	.mango-invisible {
		visibility: visible;
	}
}