/* Hero Banner Zoom Out Effect - Similar to 1000daysfund.org */
@keyframes zoomOutHero {
	from {
		transform: scale(1.2);
		opacity: 0.8;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.zoomOutHero {
	animation-name: zoomOutHero;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: both;
	transform-origin: center center;
}

.animated.zoomOutHero {
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: both;
}

.animated.slow.zoomOutHero {
	animation-duration: 4s;
}

.animated.fast.zoomOutHero {
	animation-duration: 1s;
}

/* Parallax Zoom Out Effect for Hero Sections */
@keyframes parallaxZoomOut {
	0% {
		transform: scale(1.3) translateZ(0);
		opacity: 0;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		transform: scale(1) translateZ(0);
		opacity: 1;
	}
}

.parallaxZoomOut {
	animation-name: parallaxZoomOut;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-fill-mode: both;
	transform-origin: center center;
	will-change: transform, opacity;
}

/* Continuous Zoom Out Effect */
@keyframes continuousZoomOut {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.continuousZoomOut {
	animation-name: continuousZoomOut;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	transform-origin: center center;
}

/* Hero Background Zoom Effect */
.mn-hero-zoom-container {
	overflow: hidden;
	position: relative;
}

.mn-hero-zoom-bg {
	transform: scale(1.2);
	transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.mn-hero-zoom-container.mn-zoomed .mn-hero-zoom-bg {
	transform: scale(1);
}

/* Scroll-triggered Zoom Out */
.mn-scroll-zoom-out {
	transform: scale(1.15);
	opacity: 0.8;
	transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mn-scroll-zoom-out.mn-in-viewport {
	transform: scale(1);
	opacity: 1;
}