/* ============================================
   Modern animations & interactive elements
   ============================================ */

/* Smooth scroll (optional; many themes already set this) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---- Hero & CTA ---- */
.home__main h1 {
	animation: heroFadeIn 0.8s ease-out both;
}

.home__main > div,
.home__main .cta-btn {
	animation: heroFadeIn 0.8s ease-out 0.2s both;
}

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

/* CTA button: glow and lift on hover */
.cta-btn {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(135deg, #00b8ff 0%, #2ea01a 100%);
	border-radius: inherit;
	opacity: 0;
	filter: blur(12px);
	z-index: -1;
	transition: opacity 0.3s ease;
}

.cta-btn:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 184, 255, 0.35), 0 8px 24px rgba(46, 160, 26, 0.25);
}

.cta-btn:hover::before {
	opacity: 0.6;
}

.cta-btn:active {
	transform: scale(1.02);
}

/* ---- Service cards: lift and shadow on hover ---- */
.service__card {
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.35s ease,
		border-radius 0.35s ease;
}

.service__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 184, 255, 0.08);
	border-radius: 12px;
}

.service__card.active {
	transform: translateY(-4px);
	border-radius: 12px;
}

/* Service card icon subtle pulse when in view */
.service__icon svg {
	transition: transform 0.4s ease;
}

.service__card:hover .service__icon svg,
.service__card.active .service__icon svg {
	transform: scale(1.08);
}

/* ---- Badges (Why Us): stagger and hover ---- */
.badges .badge {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.badges .badge:hover {
	transform: translateY(-4px) scale(1.02);
}

.badges .badge__icon {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease;
}

.badges .badge:hover .badge__icon {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ---- Section titles: underline grow ---- */
.title {
	overflow: hidden;
}

.title::before {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-inview .title::before,
.title.animate-in::before {
	transform: scaleX(1);
}

/* ---- Client logos: hover scale and color ---- */
.single-partner-item {
	transition: transform 0.35s ease, filter 0.35s ease;
}

.single-partner-item:hover {
	transform: scale(1.08);
	filter: grayscale(0%);
}

/* ---- Header nav links: smoother underline ---- */
.header__links a,
.header__menu a {
	transition: color 0.25s ease;
}

.header__links a::before {
	transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

/* ---- Back to top: bounce on hover ---- */
.back-to-top {
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease, background 0.3s ease;
}

.back-to-top:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 8px 24px rgba(0, 184, 255, 0.4);
}

.back-to-top:active {
	transform: translateY(-2px) scale(1.02);
}

/* ---- Contact modal: scale-in ---- */
.contact.open .contact__form {
	animation: modalScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modalScaleIn {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ---- Footer icons: lift and rotate on hover ---- */
.footer__icons a {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer__icons a:hover {
	transform: scale(1.2) translateY(-3px);
}

/* ---- About section: subtle fade-up for paragraphs ---- */
.about p {
	opacity: 0.96;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.about p:hover {
	opacity: 1;
}

/* ---- Button (generic .btn): press effect ---- */
.btn {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:active {
	transform: scale(0.98);
}

/* ---- Focus visible for accessibility ---- */
.cta-btn:focus-visible,
.service__card:focus-within,
.back-to-top:focus-visible,
.header__links a:focus-visible,
.footer__icons a:focus-visible {
	outline: 2px solid rgba(0, 184, 255, 0.8);
	outline-offset: 3px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.cta-btn::before,
	.service__card,
	.badges .badge,
	.badges .badge__icon,
	.single-partner-item,
	.back-to-top,
	.contact.open .contact__form {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
	.service__card:hover,
	.service__card.active {
		transform: none;
	}
	.badges .badge:hover {
		transform: none;
	}
	.badges .badge:hover .badge__icon {
		transform: none;
	}
	.single-partner-item:hover {
		transform: none;
	}
	.back-to-top:hover {
		transform: translateY(0);
	}
	.service__card:hover .service__icon svg,
	.service__card.active .service__icon svg {
		transform: scale(1);
	}
}