@keyframes emoUp {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@keyframes emoDown {
	from { opacity: 0; transform: translateY(-16px); }
	to { opacity: 1; transform: none; }
}
@keyframes emoLeft {
	from { opacity: 0; transform: translateX(-32px); }
	to { opacity: 1; transform: none; }
}
@keyframes emoRight {
	from { opacity: 0; transform: translateX(32px); }
	to { opacity: 1; transform: none; }
}
@keyframes emoZoom {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: none; }
}
@keyframes emoPop {
	0% { opacity: 0; transform: scale(0.82); }
	70% { opacity: 1; transform: scale(1.04); }
	100% { opacity: 1; transform: none; }
}
@keyframes emoKen {
	from { background-position: center 22%; background-size: 100% auto; }
	to { background-position: center 40%; background-size: 108% auto; }
}

.emo-play,
.emo-await.emo-go {
	animation-duration: 0.75s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 0.7, 0.25, 1);
}
.emo-up { animation-name: emoUp; }
.emo-down { animation-name: emoDown; }
.emo-left { animation-name: emoLeft; }
.emo-right { animation-name: emoRight; }
.emo-zoom { animation-name: emoZoom; }
.emo-pop { animation-name: emoPop; }

.emo-await {
	opacity: 0;
}
.emo-await.emo-go {
	opacity: 1;
}

.menu-wrap {
	animation: emoDown 0.65s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.navigation > li {
	animation: emoDown 0.55s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.navigation > li:nth-child(1) { animation-delay: 0.05s; }
.navigation > li:nth-child(2) { animation-delay: 0.1s; }
.navigation > li:nth-child(3) { animation-delay: 0.15s; }
.navigation > li:nth-child(4) { animation-delay: 0.2s; }
.navigation > li:nth-child(5) { animation-delay: 0.25s; }
.navigation > li:nth-child(6) { animation-delay: 0.3s; }
.navigation > li:nth-child(7) { animation-delay: 0.35s; }
.header-btn {
	animation: emoZoom 0.6s 0.4s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

.navigation > li > a {
	position: relative;
}
.navigation > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	height: 2px;
	background: #E31B23;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}
.navigation > li > a:hover::after,
.navigation > li > a:focus::after {
	transform: scaleX(1);
}

.btn:hover {
	transform: translateY(-2px);
}

.fetures-item-three,
.services-item,
.services-item-three,
.project-item-four,
.project-item-two,
.team-item,
.team-item-three,
.blog-post-item,
.why-card,
.counter-item {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.fetures-item-three:hover,
.services-item:hover,
.project-item-four:hover,
.project-item-two:hover,
.team-item:hover,
.team-item-three:hover,
.blog-post-item:hover,
.why-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(16, 24, 40, 0.1);
}

.fetures-thumb-three img,
.services-thumb-three img,
.project-thumb-four img,
.team-thumb img,
.team-thumb-three img,
.blog-post-thumb img,
.about-img-wrap > img {
	transition: transform 0.6s ease;
}
.fetures-item-three:hover .fetures-thumb-three img,
.services-item-three:hover .services-thumb-three img,
.project-item-four:hover .project-thumb-four img,
.team-item:hover .team-thumb img,
.team-item-three:hover .team-thumb-three img,
.blog-post-item:hover .blog-post-thumb img {
	transform: scale(1.06);
}

.footer-link .list-wrap li a {
	transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-link .list-wrap li a:hover {
	padding-left: 4px;
}

.scroll-top {
	transition: transform 0.3s ease, background 0.3s ease;
}
.scroll-top:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.emo-play,
	.emo-await,
	.emo-await.emo-go,
	.menu-wrap,
	.navigation > li,
	.header-btn,
	.page-home .banner-area-three.banner-two {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.fetures-item-three:hover,
	.services-item:hover,
	.project-item-four:hover,
	.project-item-two:hover,
	.team-item:hover,
	.team-item-three:hover,
	.blog-post-item:hover,
	.why-card:hover,
	.btn:hover,
	.scroll-top:hover {
		transform: none;
	}
}
