/**
 * Subtle interaction layer.
 * Active only when html.mgc-motion is set, so reduced-motion and no-JS stay still.
 */

html.mgc-motion .site-header {
	transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

html.mgc-motion .site-header-inner {
	transition: min-height 0.22s ease;
}

html.mgc-motion .site-header .custom-logo {
	transition: height 0.22s ease, max-height 0.22s ease;
}

html.is-header-compact {
	--mgc-header-height: 4.25rem;
}

html.mgc-motion.is-header-compact .site-header {
	background-color: color-mix(in srgb, var(--mgc-color-background) 94%, #ffffff);
	box-shadow: 0 1px 2px rgba(21, 49, 96, 0.08);
}

html.mgc-motion.is-header-compact .site-header .custom-logo {
	height: 3.25rem;
	max-height: 3.25rem;
}

@media (min-width: 1024px) {
	html.mgc-motion .primary-navigation .menu > li > a {
		transition: min-height 0.22s ease;
	}
}

html.mgc-motion .home-service-card {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html.mgc-motion .home-review-card,
html.mgc-motion .fx-works-step {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html.mgc-motion .home-why-item .home-why-icon img,
html.mgc-motion .fx-why-item .fx-why-icon img,
html.mgc-motion .home-service-card .home-journey-service a::after,
html.mgc-motion .home-journey-stage .home-journey-service a::after {
	transition: transform 0.2s ease;
}

html.mgc-motion .home-service-card .home-journey-service a::after,
html.mgc-motion .home-journey-stage .home-journey-service a::after {
	display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
	html.mgc-motion .home-service-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 28px rgba(21, 49, 96, 0.08);
	}

	html.mgc-motion .home-service-card:hover .home-journey-service a::after,
	html.mgc-motion .home-journey-stage .home-journey-service a:hover::after {
		transform: translateX(4px);
	}

	html.mgc-motion .home-review-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 28px rgba(21, 49, 96, 0.08);
	}

	html.mgc-motion .home-why-item:hover .home-why-icon img,
	html.mgc-motion .fx-why-item:hover .fx-why-icon img {
		transform: scale(1.06);
	}

	html.mgc-motion .fx-works-step:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 28px rgba(21, 49, 96, 0.12);
	}
}

html.mgc-motion .home-service-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(21, 49, 96, 0.08);
}

html.mgc-motion .home-service-card:focus-within .home-journey-service a::after,
html.mgc-motion .home-journey-stage .home-journey-service a:focus-visible::after {
	transform: translateX(4px);
}

html.mgc-motion .button,
html.mgc-motion .header-cta a,
html.mgc-motion .wp-element-button,
html.mgc-motion .wp-block-button__link,
html.mgc-motion input[type="submit"],
html.mgc-motion input[type="button"],
html.mgc-motion input[type="reset"] {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

html.mgc-motion .button:active:not(:disabled),
html.mgc-motion .header-cta a:active,
html.mgc-motion .wp-element-button:active:not(:disabled),
html.mgc-motion .wp-block-button__link:active:not(:disabled),
html.mgc-motion input[type="submit"]:active:not(:disabled),
html.mgc-motion input[type="button"]:active:not(:disabled),
html.mgc-motion input[type="reset"]:active:not(:disabled) {
	transform: translateY(1px);
}

html.mgc-motion .mgc-faq-page .faq-category-nav-list a {
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

html.mgc-motion .mgc-faq-page .faq-section .wp-block-details summary::after {
	transition: transform 0.28s ease;
}

html.mgc-motion .fx-faq:not(.pc-disclosure) .wp-block-details summary::after {
	transition: transform 0.2s ease;
}

html.mgc-motion .mgc-faq-page .faq-section .wp-block-details[open] summary::after {
	content: "+";
	transform: translateY(-50%) rotate(45deg);
}

html.mgc-motion .faq-section .wp-block-details.is-animating:not([open]) > *:not(summary),
html.mgc-motion .fx-faq .wp-block-details.is-animating:not([open]) > *:not(summary) {
	display: block;
}

html.mgc-motion .home-journey:not(.is-drawn) .home-journey-arrow {
	clip-path: inset(0 100% 0 0);
}

html.mgc-motion .home-journey.is-drawn .home-journey-arrow {
	clip-path: inset(0);
	transition: clip-path 0.6s ease;
}

html.mgc-motion .home-journey.is-drawn .home-journey-track > .home-journey-connector:nth-child(4) .home-journey-arrow {
	transition-delay: 0.12s;
}

html.mgc-motion .home-journey.is-drawn .home-journey-track > .home-journey-connector:nth-child(6) .home-journey-arrow {
	transition-delay: 0.24s;
}

html.mgc-motion .fx-works:not(.is-drawn) .fx-works-diagram::before,
html.mgc-motion .fx-works:not(.is-drawn) .fx-works-diagram::after {
	transform: scaleY(0);
	transform-origin: top center;
}

html.mgc-motion .fx-works.is-drawn .fx-works-diagram::before,
html.mgc-motion .fx-works.is-drawn .fx-works-diagram::after {
	transform: scaleY(1);
	transform-origin: top center;
	transition: transform 0.6s ease;
}

html.mgc-motion .fx-works.is-drawn .fx-works-diagram::after {
	transition-delay: 0.16s;
}

@media (min-width: 900px) {
	html.mgc-motion .fx-works:not(.is-drawn) .fx-works-diagram::before,
	html.mgc-motion .fx-works:not(.is-drawn) .fx-works-diagram::after {
		transform: scaleX(0);
		transform-origin: left center;
	}

	html.mgc-motion .fx-works.is-drawn .fx-works-diagram::before,
	html.mgc-motion .fx-works.is-drawn .fx-works-diagram::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

html.mgc-motion input[type="text"],
html.mgc-motion input[type="email"],
html.mgc-motion input[type="url"],
html.mgc-motion input[type="password"],
html.mgc-motion input[type="search"],
html.mgc-motion input[type="tel"],
html.mgc-motion input[type="number"],
html.mgc-motion input[type="date"],
html.mgc-motion input[type="datetime-local"],
html.mgc-motion select,
html.mgc-motion textarea {
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

html.mgc-motion input[type="text"]:focus-visible,
html.mgc-motion input[type="email"]:focus-visible,
html.mgc-motion input[type="url"]:focus-visible,
html.mgc-motion input[type="password"]:focus-visible,
html.mgc-motion input[type="search"]:focus-visible,
html.mgc-motion input[type="tel"]:focus-visible,
html.mgc-motion input[type="number"]:focus-visible,
html.mgc-motion input[type="date"]:focus-visible,
html.mgc-motion input[type="datetime-local"]:focus-visible,
html.mgc-motion select:focus-visible,
html.mgc-motion textarea:focus-visible {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mgc-color-primary) 14%, transparent);
}