/**
 * Interaction & polish layer — micro-interactions, focus, hovers (GPU-friendly).
 */

/* --- Accessible focus ------------------------------------------------ */
:root {
	--focus: 3px solid color-mix(in srgb, var(--clr-accent) 65%, transparent);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

:is(a, button, input, textarea, select, summary):focus-visible {
	outline: none;
	box-shadow: 0 0 0 var(--focus);
	border-radius: 4px;
}

.btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55), 0 0 0 5px rgba(37, 99, 235, 0.2);
}

/* --- Prose links: animated underline --------------------------------- */
.entry-content:not(.acf-block-component) .prose a:not(.btn),
.prose:not(.acf-block-component) > p a:not(.btn),
.case-study .prose a:not(.btn) {
	text-decoration: none;
	padding-bottom: 0.06em;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: left 95%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition:
		background-size 0.35s var(--ease-out-expo),
		color 0.25s ease;
}

.entry-content:not(.acf-block-component) .prose a:not(.btn):hover,
.prose:not(.acf-block-component) > p a:not(.btn):hover,
.case-study .prose a:not(.btn):hover {
	opacity: 1;
	background-size: 100% 2px;
}

/* --- Buttons: depth + shine ------------------------------------------ */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 220ms var(--ease-out-expo),
		box-shadow 320ms ease,
		filter 220ms ease;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.btn:active {
	transform: translate3d(0, 1px, 0) scale(0.99);
}

.btn-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255, 255, 255, 0.35) 48%,
		transparent 62%
	);
	transform: translate3d(-120%, 0, 0) skewX(-14deg);
	transition: transform 0.72s var(--ease-out-expo);
	pointer-events: none;
	opacity: 0.55;
	z-index: 2;
	border-radius: inherit;
	mix-blend-mode: overlay;
}

.btn-primary:hover::after {
	transform: translate3d(120%, 0, 0) skewX(-14deg);
}

.btn-primary:hover,
.btn-secondary:hover {
	box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28), 0 6px 16px rgba(15, 23, 42, 0.1);
	transform: translate3d(0, -3px, 0);
}

.btn-ghost:hover,
.btn-ghost-light:hover {
	border-color: color-mix(in srgb, var(--clr-accent) 45%, transparent);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
	transform: translate3d(0, -2px, 0);
}

html[data-theme="dark"] .btn-ghost:hover {
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

.hero__actions--magnetic .btn {
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

/* --- Glass cards & service tiles ------------------------------------ */
.glass-card,
.service-card,
.portfolio-card__link .portfolio-card__body {
	transition:
		transform 0.42s var(--ease-out-expo),
		box-shadow 0.45s ease,
		border-color 0.35s ease,
		background-color 0.35s ease;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.glass-card:hover:not([data-tilt]),
.service-card:hover:not([data-tilt]) {
	transform: translate3d(0, -8px, 0) scale(1.01);
	box-shadow:
		var(--elev-2),
		0 0 0 1px rgba(56, 189, 248, 0.12),
		0 44px 80px rgba(37, 99, 235, 0.12);
	border-color: color-mix(in srgb, var(--clr-accent) 28%, var(--clr-border));
}

.portfolio-card:hover:not([data-tilt]) {
	transform: translate3d(0, -10px, 0);
}

.portfolio-card[data-tilt]:hover,
.glass-card[data-tilt]:hover,
.service-card[data-tilt]:hover {
	border-color: color-mix(in srgb, var(--clr-accent) 28%, var(--clr-border));
	box-shadow:
		var(--elev-2),
		0 0 0 1px rgba(56, 189, 248, 0.12),
		0 44px 80px rgba(37, 99, 235, 0.12);
}

.portfolio-card__link:hover img {
	transform: scale3d(1.05, 1.05, 1);
}

.portfolio-card__link img {
	transition: transform 0.68s var(--ease-out-expo);
}

.service-card:hover .service-card__icon {
	transform: scale(1.15) rotate(-4deg);
	color: var(--clr-secondary);
}

.service-card__icon {
	display: inline-block;
	transition: transform 0.42s var(--ease-out-expo), color 0.3s ease;
}

[data-tilt] {
	transform-style: preserve-3d;
	transition:
		transform 0.12s ease-out,
		box-shadow 0.45s ease,
		border-color 0.35s ease,
		background-color 0.35s ease;
}

/* --- Eyebrows & section rhythm --------------------------------------- */
.eyebrow {
	position: relative;
	padding-inline-start: 0.9rem;
	transition: letter-spacing 0.35s var(--ease-out-expo), color 0.25s ease;
}

.section-head:hover .eyebrow:not(.eyebrow--on-dark),
.aash-reveal:hover .eyebrow:not(.eyebrow--on-dark) {
	letter-spacing: 0.2em;
}

.eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--clr-accent), var(--clr-secondary));
	box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
	animation: eyebrow-dot 2.8s ease-in-out infinite alternate;
}

@keyframes eyebrow-dot {
	from {
		opacity: 0.55;
		box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
	}
	to {
		opacity: 1;
		box-shadow: 0 0 22px rgba(37, 99, 235, 0.55);
	}
}

.eyebrow--on-dark::before {
	background: linear-gradient(135deg, #bae6fd, #60a5fa);
}

@media (prefers-reduced-motion: reduce) {
	.eyebrow::before {
		animation: none;
	}
}

/* --- Primary navigation links --------------------------------------- */
.primary-nav .menu > li > a {
	position: relative;
	padding-block: 0.35rem;
	transition: color 0.28s ease;
}

.primary-nav .menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--clr-accent), var(--clr-secondary));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.42s var(--ease-out-expo), opacity 0.25s ease;
	opacity: 0.85;
}

.primary-nav .menu > li > a:hover::after,
.primary-nav .menu > li.current-menu-item > a::after,
.primary-nav .menu > li.current_page_item > a::after {
	transform: scaleX(1);
}

@media (max-width: 768px) {
	.primary-nav .menu > li > a::after {
		display: none;
	}

	.primary-nav .menu > li > a:active {
		color: var(--clr-secondary);
		padding-inline-start: 6px;
	}
}

/* Softer keyboard focus ring (global :focus-visible can read as chunky on nav links). */
.primary-nav .menu > li > a:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
	border-radius: 999px;
}

.primary-nav .menu > li > a[class*="btn"]:not(.btn-header):focus-visible {
	box-shadow:
		0 0 0 2px rgba(56, 189, 248, 0.45),
		0 0 22px rgba(37, 99, 235, 0.2) !important;
}

/* --- Filter chips ---------------------------------------------------- */
.filter-btn {
	transition:
		transform 0.26s var(--ease-out-expo),
		box-shadow 0.3s ease,
		border-color 0.25s ease,
		background 0.25s ease;
}

.filter-btn:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 14px 24px rgba(37, 99, 235, 0.12);
	border-color: color-mix(in srgb, var(--clr-secondary) 35%, var(--clr-border));
}

.filter-btn.is-active {
	transform: translate3d(0, -2px, 0);
	box-shadow: 0 14px 32px rgba(37, 99, 235, 0.32);
}

/* --- Testimonials: smooth crossfade --------------------------------- */
.testimonials .testimonial-slide {
	display: block;
}

.testimonial-slide {
	transition:
		opacity 0.55s ease,
		transform 0.55s var(--ease-out-expo),
		filter 0.55s ease;
	transform: translate3d(14px, 0, 0);
	filter: blur(4px);
}

.testimonial-slide.is-active {
	position: relative;
	z-index: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
	opacity: 1 !important;
}

.testimonial-slide:not(.is-active) {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.testimonials .testimonials__track {
	position: relative;
	min-height: clamp(200px, 22vw, 320px);
}

.t-nav:hover,
.t-dot:hover {
	transform: scale(1.06);
	transition: transform 0.22s ease;
}

/* --- Floating inquiry: calm premium shadow (no endless pulse) ------ */
.aash-float-inquiry:not(.aash-float-inquiry--premium) {
	box-shadow:
		0 4px 14px rgba(37, 99, 235, 0.22),
		0 0 0 1px rgba(56, 189, 248, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-card:hover,
	.service-card:hover,
	.glass-card:hover {
		transform: none;
		box-shadow: var(--elev-2);
	}
}

/* --- Mobile nav backdrop -------------------------------------------- */
.aash-nav-backdrop {
	position: fixed;
	inset: 0;
	top: var(--hdr-h, 72px);
	cursor: pointer;
	background: radial-gradient(circle at 50% -20%, rgba(37, 99, 235, 0.15), transparent 55%),
		rgba(15, 23, 42, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.42s ease, backdrop-filter 0.42s ease;
	z-index: 92;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.aash-nav-open .aash-nav-backdrop {
	opacity: 1;
	pointer-events: auto;
}

html[data-theme="dark"] .aash-nav-backdrop {
	background: rgba(2, 6, 23, 0.72);
}

/* --- Detail / accordion polish --------------------------------------- */
details.aash-details summary {
	cursor: pointer;
	position: relative;
	padding-inline-start: 1.5rem;
	font-weight: 600;
	list-style: none;
	transition: color 0.25s ease;
}

details.aash-details summary::-webkit-details-marker {
	display: none;
}

details.aash-details summary::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0;
	inline-size: 1.35rem;
	text-align: center;
	font-family: monospace;
	font-weight: 700;
	transition: transform 0.42s var(--ease-out-expo), color 0.25s ease;
	color: var(--clr-secondary);
}

details.aash-details[open] summary::before {
	transform: rotate(135deg);
}

details.aash-details[open] {
	border-color: color-mix(in srgb, var(--clr-accent) 32%, transparent) !important;
}

/* --- Stat blocks in hero -------------------------------------------- */
.hero__stats > li {
	padding: 0.65rem 0.72rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

.hero-home .hero__stats > li:hover {
	border-color: color-mix(in srgb, var(--clr-accent) 25%, transparent);
	background: rgba(37, 99, 235, 0.04);
	transform: translateY(-4px);
}

html[data-theme="dark"] .hero-home .hero__stats > li:hover {
	background: rgba(148, 163, 184, 0.08);
}

.hero__stats strong {
	transition:
		color 0.3s ease,
		transform 0.42s var(--ease-out-expo),
		filter 0.35s ease;
	display: inline-block;
}

.hero__stats > li:hover strong {
	transform: scale(1.06);
	filter: saturate(140%);
	background: linear-gradient(120deg, var(--clr-secondary), var(--clr-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

html[data-theme="dark"] .hero__stats > li:hover strong {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: var(--clr-secondary);
	filter: saturate(115%);
}

/* --- Logo / branding hover ------------------------------------------- */
.site-title,
.custom-logo-link {
	transition:
		opacity 0.28s ease,
		transform 0.35s var(--ease-out-expo),
		filter 0.35s ease;
	display: inline-block;
}

.site-header:not(.is-scrolled) .custom-logo-link:hover,
.site-branding:hover .site-title {
	transform: translateY(-1px);
	opacity: 0.92;
}

.site-header.is-scrolled .site-title:hover {
	color: #38bdf8;
}