/* Professional UI motion — mixed reveals, hero, hovers, smooth scroll */

html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: calc(var(--esteem-header-nav-h, 72px) + 20px);
}

body.header-scrolled [id] {
	scroll-margin-top: calc(var(--esteem-header-nav-h, 72px) + 16px);
}

.esteem-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

.esteem-reveal--up {
	transform: translateY(28px);
}

.esteem-reveal--left {
	transform: translateX(-32px);
}

.esteem-reveal--right {
	transform: translateX(32px);
}

.esteem-reveal--scale {
	transform: scale(.96);
}

.esteem-reveal--fade {
	transform: none;
}

.esteem-reveal.is-inview {
	opacity: 1;
	transform: none;
}

.esteem-reveal.is-inview h2:after {
	transform: scaleX(1);
}

.esteem-reveal.is-inview .app-kicker {
	animation: esteemKicker .55s cubic-bezier(.22, 1, .36, 1) both;
}

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

.section-top h2:after,
.welcome-text h2:after {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1) .12s;
}

.banner-area h1 {
	animation: esteemHeroIn .8s cubic-bezier(.22, 1, .36, 1) both;
}

.banner-area .lead,
.banner-area .app-hero-lead {
	animation: esteemHeroFade .75s cubic-bezier(.22, 1, .36, 1) .12s both;
}

.banner-area .esteem-breadcrumb {
	animation: esteemHeroFade .6s cubic-bezier(.22, 1, .36, 1) .28s both;
}

.banner-area .app-hero-actions .app-hero-btn:nth-child(1) {
	animation: esteemHeroLeft .7s cubic-bezier(.22, 1, .36, 1) .2s both;
}

.banner-area .app-hero-actions .app-hero-btn:nth-child(2) {
	animation: esteemHeroRight .7s cubic-bezier(.22, 1, .36, 1) .3s both;
}

.banner-area .app-hero-actions .app-hero-btn:nth-child(3) {
	animation: esteemHeroIn .7s cubic-bezier(.22, 1, .36, 1) .4s both;
}

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

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

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

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

.single-feature {
	background: #fff;
	border-radius: 4px;
	transition: transform .35s ease, box-shadow .35s ease;
}

.single-feature:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(14, 118, 187, .12);
}

.single-gallery-image {
	overflow: hidden;
	transition: transform .4s ease, box-shadow .4s ease;
	background-size: cover !important;
	background-position: center !important;
}

.specialist-area .single-gallery-image {
	transition: transform .45s ease, box-shadow .45s ease, background-size .7s ease;
}

.specialist-area a:hover .single-gallery-image,
.gallery-item a:hover .single-gallery-image {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(16, 24, 40, .18);
	background-size: 108% !important;
}

.single-gallery-image h3 {
	transition: color .25s ease, letter-spacing .25s ease;
}

.specialist-area a:hover .single-gallery-image h3,
.gallery-item a:hover .single-gallery-image h3 {
	color: #0e76bb;
}

.slide-img {
	overflow: hidden;
}

.slide-img img {
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.single-slide:hover .slide-img img,
.department-slider a:hover .slide-img img {
	transform: scale(1.07);
}

.hover-state {
	transition: opacity .3s ease, background .3s ease;
}

.single-department h3 {
	transition: color .25s ease;
}

.department-slider a:hover .single-department h3 {
	color: #0e76bb;
}

.faq-accordion-arrow {
	transition: transform .3s ease;
}

.single-widget-home a {
	transition: color .2s ease, padding-left .2s ease;
}

.footer-area a:hover {
	color: #fff;
}

.app-hero-btn,
.app-card,
.app-related-card,
.app-hub,
.app-highlight,
.news-card,
.blog_item {
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .2s ease, color .2s ease;
}

.app-card-media img {
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

a.app-card:hover .app-card-media img,
a.app-card:focus .app-card-media img {
	transform: scale(1.06);
}

.app-step-num {
	display: inline-block;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.esteem-reveal.is-inview .app-icon:not(.app-icon--plain):not(.app-icon--btn) {
	animation: esteemIconIn .55s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes esteemIconIn {
	from {
		opacity: 0;
		transform: scale(.82) translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.app-highlight:hover,
.app-step:hover,
.sus-pillar:hover {
	transform: translateY(-4px);
}

.esteem-float-btn .app-icon svg {
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.esteem-search-trigger-fixed:hover .app-icon svg {
	transform: scale(1.08);
}

.esteem-back-top:hover .app-icon svg {
	transform: translateY(-2px);
}

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

.app-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap .25s ease, color .2s ease;
}

.app-card-cta:after {
	content: '→';
	transition: transform .25s ease;
}

a:hover .app-card-cta,
a:focus .app-card-cta {
	gap: 10px;
}

a:hover .app-card-cta:after,
a:focus .app-card-cta:after {
	transform: translateX(3px);
}

.app-page a,
.app-section a,
.app-prose a,
#article-body a {
	transition: color .2s ease;
}

.esteem-search-trigger-fixed,
.esteem-float-btn {
	transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.esteem-search-trigger-fixed:hover,
.esteem-float-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(14, 118, 187, .28);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.esteem-reveal,
	.esteem-reveal.is-inview,
	.single-feature,
	.single-gallery-image,
	.slide-img img,
	.banner-area h1,
	.banner-area .lead,
	.banner-area .app-hero-lead,
	.banner-area .app-hero-actions,
	.banner-area .app-hero-actions .app-hero-btn,
	.banner-area .esteem-breadcrumb,
	.app-hero-btn,
	.app-card,
	.app-related-card,
	.app-hub,
	.app-card-media img,
	.app-step-num,
	.app-icon {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.section-top h2:after,
	.welcome-text h2:after {
		transform: none !important;
	}

	.app-card-cta:after {
		transform: none !important;
	}
}