/*
 * M-Sistemos motion system.
 * Visual movement only: no animated dimensions, margins or document flow.
 */

:root {
	--msp-motion-ease: cubic-bezier(.22, 1, .36, 1);
	--msp-motion-soft: cubic-bezier(.2, .75, .25, 1);
	--msp-motion-fast: 260ms;
	--msp-motion-base: 760ms;
	--msp-motion-slow: 1100ms;
	--msp-motion-distance: 28px;
}

html {
	scroll-behavior: smooth;
}

html.msp-motion-enhanced .msp-reveal {
	opacity: 0;
	filter: blur(3px);
	transform: translate3d(0, var(--msp-motion-distance), 0);
	transition:
		opacity var(--msp-motion-base) var(--msp-motion-ease),
		transform var(--msp-motion-slow) var(--msp-motion-ease),
		filter var(--msp-motion-base) ease;
	transition-delay: var(--msp-delay, 0ms);
	will-change: opacity, transform, filter;
}

html.msp-motion-enhanced .msp-reveal[data-msp-direction="left"] {
	transform: translate3d(calc(var(--msp-motion-distance) * -1), 0, 0);
}

html.msp-motion-enhanced .msp-reveal[data-msp-direction="right"] {
	transform: translate3d(var(--msp-motion-distance), 0, 0);
}

html.msp-motion-enhanced .msp-reveal[data-msp-direction="scale"] {
	transform: scale(.965);
}

html.msp-motion-enhanced .msp-reveal.is-visible {
	opacity: 1;
	filter: none;
	transform: translate3d(0, 0, 0) scale(1);
	will-change: auto;
}

html.msp-motion-enhanced .msp-motion-intro {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity 820ms var(--msp-motion-ease),
		transform 1050ms var(--msp-motion-ease);
	transition-delay: var(--msp-delay, 0ms);
}

html.msp-motion-enhanced.msp-motion-ready .msp-motion-intro {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Home hero: a short, replayable “arriving home” scene adds one clear hook. */
html.msp-motion-enhanced .ms-hero--v2 > .wp-block-cover__image-background {
	filter: brightness(.43) saturate(.64);
	transform: scale(1.04);
	transition:
		filter 1350ms var(--msp-motion-soft),
		transform 1700ms var(--msp-motion-ease) !important;
}

html.msp-motion-enhanced .ms-hero--v2.is-scene-active > .wp-block-cover__image-background {
	filter: brightness(1) saturate(1.02);
	transform: scale(1);
	transition-duration: 850ms, 1350ms !important;
}

.wp-site-blocks .ms-page .ms-hero--v2.wp-block-cover::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	pointer-events: none !important;
	background-image: url("../images/hero-home-off-v1.webp") !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	opacity: 1;
	transform: scale(1.002);
	transition:
		opacity 920ms var(--msp-motion-soft),
		transform 1450ms var(--msp-motion-ease) !important;
	will-change: opacity;
}

.wp-site-blocks .ms-page .ms-hero--v2.wp-block-cover.is-scene-active::after {
	opacity: 0;
	transform: scale(1.012);
}

.ms-hero--v2 .ms-hero-vignette::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 67% 31%, rgba(255, 216, 143, .2), transparent 19%),
		radial-gradient(circle at 80% 52%, rgba(255, 188, 91, .13), transparent 25%);
	opacity: 0;
	transform: scale(.98);
	transition: opacity 1100ms ease 260ms, transform 1600ms var(--msp-motion-ease) 180ms;
}

.ms-hero--v2.is-scene-active .ms-hero-vignette::before {
	opacity: 1;
	transform: scale(1);
}

.ms-hero--v2:not(.is-scene-active) .ms-hero-scene {
	border-color: rgba(232, 200, 120, .24);
}

.ms-hero-scene {
	position: absolute;
	top: clamp(30px, 5vh, 62px);
	right: clamp(24px, 4vw, 72px);
	z-index: 5;
	min-width: 218px;
	padding: 15px 18px 14px;
	text-align: left;
	color: rgba(255, 255, 255, .92);
	background: rgba(7, 10, 12, .48);
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 2px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(16px) saturate(115%);
	backdrop-filter: blur(16px) saturate(115%);
	cursor: pointer;
	transition: transform 420ms var(--msp-motion-ease), background-color 280ms ease, border-color 280ms ease;
}

.ms-hero-scene:hover {
	transform: translateY(-3px);
	background: rgba(7, 10, 12, .62);
	border-color: rgba(232, 200, 120, .4);
}

.ms-hero-scene:focus-visible {
	outline: 2px solid #e8c878;
	outline-offset: 4px;
}

.ms-hero-scene__eyebrow,
.ms-hero-scene > span:last-child {
	display: block;
	font-family: "Jura", "Bai Jamjuree", Arial, sans-serif;
	font-size: 9px;
	line-height: 1.35;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.ms-hero-scene__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 7px;
}

.ms-hero-scene__eyebrow i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d2b35f;
	box-shadow: 0 0 0 0 rgba(210, 179, 95, .35);
}

.ms-hero--v2.is-scene-active .ms-hero-scene__eyebrow i {
	background: #54d69a;
	animation: msp-scene-pulse 2.7s ease-out infinite;
}

.ms-hero-scene strong {
	display: block;
	margin-bottom: 4px;
	font-family: "Bai Jamjuree", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
}

@keyframes msp-scene-pulse {
	0% { box-shadow: 0 0 0 0 rgba(84, 214, 154, .34); }
	65%, 100% { box-shadow: 0 0 0 8px rgba(84, 214, 154, 0); }
}

/* Header gains definition only after the first scroll movement. */
.wp-site-blocks .ms-page .ms-header {
	transition:
		background-color var(--msp-motion-fast) ease,
		box-shadow var(--msp-motion-fast) ease,
		border-color var(--msp-motion-fast) ease !important;
}

.wp-site-blocks .ms-page .ms-header.is-scrolled {
	background-color: rgba(255, 255, 255, .94) !important;
	box-shadow: 0 14px 34px rgba(20, 15, 12, .08) !important;
	-webkit-backdrop-filter: blur(14px) saturate(125%);
	backdrop-filter: blur(14px) saturate(125%);
}

@media (min-width: 1101px) {
	.wp-site-blocks .ms-page .ms-header-inner {
		height: 82px !important;
	}

	.wp-site-blocks .ms-page .ms-header-actions > a.ms-header-btn {
		min-height: 44px !important;
		padding-inline: 22px !important;
	}
}

/* Hero depth reacts to the pointer on large screens, without changing flow. */
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
	.ms-hero > .wp-block-cover__image-background,
	.ms-about-hero > .wp-block-cover__image-background,
	.ms-alpr-sub-hero > .wp-block-cover__image-background {
		transition: transform 900ms var(--msp-motion-soft);
		transform-origin: center;
	}

	.msp-hero-active > .wp-block-cover__image-background {
		transform: scale(1.018) translate3d(var(--msp-pointer-x, 0), var(--msp-pointer-y, 0), 0);
	}

	html.msp-motion-enhanced .ms-hero--v2.is-scene-active.msp-hero-active > .wp-block-cover__image-background {
		transform: scale(1.018) translate3d(var(--msp-pointer-x, 0), var(--msp-pointer-y, 0), 0);
	}
}

/* Premium card feedback: shallow lift, controlled image movement and sheen. */
.ms-service-card,
.ms-why-card,
.ms-work-card,
.msp-service-card,
.msp-process-step,
.msp-service-capabilities__grid > article,
.msp-service-process__grid > article,
.ms-about-team-card,
.ms-about-stat,
.ms-kontaktai-v2-step,
.ms-footer-card {
	transition:
		transform 520ms var(--msp-motion-ease),
		box-shadow 520ms var(--msp-motion-ease),
		border-color 320ms ease,
		background-color 320ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
	.ms-service-card:hover,
	.ms-why-card:hover,
	.ms-work-card:hover,
	.msp-service-card:hover,
	.msp-process-step:hover,
	.msp-service-capabilities__grid > article:hover,
	.msp-service-process__grid > article:hover,
	.ms-about-team-card:hover,
	.ms-about-stat:hover,
	.ms-kontaktai-v2-step:hover,
	.ms-footer-card:not(.ms-footer-card-static):hover {
		transform: translate3d(0, -5px, 0);
	}

	.ms-feature-icon img,
	.ms-service-icon img,
	.msp-service-icon img,
	.ms-why-icon svg,
	.ms-kontaktai-v2-step__ico svg {
		transition: transform 620ms var(--msp-motion-ease), filter 320ms ease;
	}

	.ms-hero-feature:hover .ms-feature-icon img,
	.ms-service-card:hover .ms-service-icon img,
	.msp-service-card:hover .msp-service-icon img,
	.ms-why-card:hover .ms-why-icon svg,
	.ms-kontaktai-v2-step:hover .ms-kontaktai-v2-step__ico svg {
		transform: translate3d(0, -2px, 0) scale(1.07) rotate(-2deg);
	}

	.ms-work-card-photo img,
	.ms-alpr-visual img,
	.msp-product-visual img,
	.msp-service-outcomes__visual img,
	.ms-about-team-card__portrait img {
		transition: transform 950ms var(--msp-motion-ease), filter 550ms ease;
	}

	.ms-work-card:hover .ms-work-card-photo img,
	.ms-alpr-visual:hover img,
	.msp-product-visual:hover img,
	.msp-service-outcomes__visual:hover img,
	.ms-about-team-card:hover .ms-about-team-card__portrait img {
		transform: scale(1.035);
	}
}

/* Links and buttons use consistent arrow/line motion. */
.ms-alpr-cta span,
.ms-contact-strip-cta-arrow,
.ms-about-team-card__arrow,
.ms-about-cta-button__arrow,
.msp-service-link::after,
.msp-product-card__copy i {
	transition: transform 420ms var(--msp-motion-ease) !important;
}

.ms-alpr-cta:hover span,
.ms-contact-strip-cta:hover .ms-contact-strip-cta-arrow,
.ms-about-team-card__link:hover .ms-about-team-card__arrow,
.ms-about-cta-button:hover .ms-about-cta-button__arrow,
.msp-service-link:hover::after,
.msp-product-card:hover .msp-product-card__copy i {
	transform: translate3d(6px, 0, 0) !important;
}

.msp-products__panel {
	transform-origin: 50% 0;
}

.msp-product-card__visual {
	transition: transform 650ms var(--msp-motion-ease), opacity 320ms ease !important;
}

.msp-product-card:hover .msp-product-card__visual {
	transform: translate3d(0, -3px, 0) scale(1.035);
}

.msp-project-card__media::before,
.msp-project-related__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(108deg, transparent 34%, rgba(255, 255, 255, .17) 50%, transparent 66%);
	transform: translate3d(-125%, 0, 0);
	transition: transform 900ms var(--msp-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	.msp-project-card:hover .msp-project-card__media::before,
	.msp-project-related__card:hover .msp-project-related__media::before {
		transform: translate3d(125%, 0, 0);
	}
}

/* Decorative continuous movement is deliberately quiet. */
@keyframes msp-pulse-ring {
	0%, 100% { opacity: .35; transform: scale(.97); }
	50% { opacity: .72; transform: scale(1.025); }
}

@keyframes msp-status-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(73, 201, 144, 0); }
	45% { box-shadow: 0 0 0 6px rgba(73, 201, 144, .11); }
}

.ms-about-hero-orbit,
.ms-kontaktai-v2-ambient__orbit {
	animation: msp-pulse-ring 7s ease-in-out infinite;
}

.ms-alpr-hero-status__pill--ok,
.msp-status--ok {
	animation: msp-status-pulse 3.4s ease-in-out infinite;
}

.msp-counting {
	font-variant-numeric: tabular-nums;
}

/* Loaded media resolves softly instead of flashing into place. */
html.msp-motion-enhanced img[data-msp-motion-image] {
	opacity: .001;
	transition: opacity 520ms ease;
}

html.msp-motion-enhanced img[data-msp-motion-image].is-loaded {
	opacity: 1;
}

@media (max-width: 780px) {
	:root {
		--msp-motion-distance: 18px;
		--msp-motion-base: 620ms;
		--msp-motion-slow: 820ms;
	}

	html.msp-motion-enhanced .msp-reveal {
		filter: none;
	}

	.ms-hero-scene {
		top: 22px;
		right: 18px;
		min-width: 0;
		width: min(194px, calc(100% - 36px));
		padding: 11px 13px 10px;
	}

	.ms-hero-scene strong {
		font-size: 13px;
	}

	.ms-hero-scene__eyebrow,
	.ms-hero-scene > span:last-child {
		font-size: 8px;
	}
}

@media (max-width: 600px) {
	/* The services repeat immediately below; hiding the four hero cards puts both CTAs above the fold. */
	.wp-site-blocks .ms-page .ms-hero.ms-hero--v2 .ms-hero-features.wp-block-group {
		display: none !important;
	}

	.wp-site-blocks .ms-page .ms-hero--v2 .ms-hero-buttons {
		margin-top: 22px !important;
	}

	.wp-site-blocks .ms-page .ms-hero.ms-hero--v2 {
		min-height: min(780px, calc(100svh - 64px)) !important;
	}
}

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

	.msp-reveal,
	.msp-motion-intro,
	[data-msp-motion-image] {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}

	.ms-about-hero-orbit,
	.ms-kontaktai-v2-ambient__orbit,
	.ms-alpr-hero-status__pill--ok,
	.msp-status--ok,
	.ms-hero-scroll * {
		animation: none !important;
	}

	html.msp-motion-enhanced .ms-hero--v2 > .wp-block-cover__image-background,
	html.msp-motion-enhanced .ms-hero--v2.is-scene-active > .wp-block-cover__image-background {
		filter: brightness(1) saturate(1) !important;
		transform: none !important;
	}

	.ms-hero--v2 .ms-hero-vignette::before {
		opacity: .72 !important;
		transform: none !important;
		transition: none !important;
	}

	.wp-site-blocks .ms-page .ms-hero--v2.wp-block-cover::after {
		opacity: 0 !important;
		transform: none !important;
		transition: none !important;
	}
}