/**
 * V9.00 RC12 — Motion & Visual Engagement
 * Motion is progressive enhancement and never required to access content.
 */

/* ----------------------------------------------------------
   Scroll / entrance choreography
---------------------------------------------------------- */
.cy-motion-enhanced .cy-motion-item {
	--cy-motion-x: 0px;
	--cy-motion-y: 24px;
	opacity: 0;
	transform: translate3d(var(--cy-motion-x), var(--cy-motion-y), 0);
	transition:
		opacity 520ms cubic-bezier(.22, 1, .36, 1),
		transform 680ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--cy-motion-order, 0) * 70ms);
	will-change: opacity, transform;
}

.cy-motion-enhanced .cy-motion-item[data-motion-direction="left"] {
	--cy-motion-x: -22px;
	--cy-motion-y: 0px;
}

.cy-motion-enhanced .cy-motion-item[data-motion-direction="right"] {
	--cy-motion-x: 22px;
	--cy-motion-y: 0px;
}

.cy-motion-enhanced .cy-motion-item.is-motion-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------------------
   Home: technical signal should feel alive, not decorative.
---------------------------------------------------------- */
.cy-industrial-evidence__node i,
.cy-hero__system [class*="node"] {
	transition: transform 420ms ease, box-shadow 420ms ease, background-color 420ms ease;
}

.cy-industrial-evidence.is-motion-active .cy-industrial-evidence__grid > li:nth-child(1) .cy-industrial-evidence__node i { animation-delay: 80ms; }
.cy-industrial-evidence.is-motion-active .cy-industrial-evidence__grid > li:nth-child(2) .cy-industrial-evidence__node i { animation-delay: 260ms; }
.cy-industrial-evidence.is-motion-active .cy-industrial-evidence__grid > li:nth-child(3) .cy-industrial-evidence__node i { animation-delay: 440ms; }
.cy-industrial-evidence.is-motion-active .cy-industrial-evidence__grid > li:nth-child(4) .cy-industrial-evidence__node i { animation-delay: 620ms; }

.cy-industrial-evidence.is-motion-active .cy-industrial-evidence__node i {
	animation: cy-signal-node 720ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cy-signal-node {
	0% { transform: scale(.62); box-shadow: 0 0 0 0 rgba(255, 198, 0, .34); }
	55% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(255, 198, 0, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 198, 0, 0); }
}

/* ----------------------------------------------------------
   Services: stronger interaction and visual rhythm.
---------------------------------------------------------- */
.cy-services-page-services__list > * {
	position: relative;
	isolation: isolate;
	transform: translate3d(var(--cy-card-x, 0), var(--cy-card-y, 0), 0);
	transition: transform 240ms ease, box-shadow 280ms ease, border-color 280ms ease;
	overflow: hidden;
}

.cy-services-page-services__list > *::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--cypros-yellow, #ffc600);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
	z-index: 3;
}

.cy-services-page-services__list > *:hover::after,
.cy-services-page-services__list > *:focus-within::after {
	transform: scaleX(1);
}

.cy-services-page-services__list > *:hover {
	box-shadow: 0 20px 48px rgba(16, 18, 20, .09);
}

.cy-services-page-services__list > * h2,
.cy-services-page-services__list > * h3 {
	transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.cy-services-page-services__list > *:hover h2,
.cy-services-page-services__list > *:hover h3 {
	transform: translateX(6px);
}

/* ----------------------------------------------------------
   Catalog: product cards arrive with product-led motion.
---------------------------------------------------------- */
.cy-equipment-card__media img,
.cy-equipment__visual img,
.cy-industries__visual {
	transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
}

.cy-equipment-card:hover .cy-equipment-card__media img {
	transform: scale(1.035) translateY(-3px);
}

/* ----------------------------------------------------------
   Contact: conversion content stays dense above the fold.
---------------------------------------------------------- */
@media (min-width: 64rem) {
	.cy-contact-page main,
	.cy-contact-page .site-main {
		min-height: auto;
	}

	.cy-contact-page .cy-contact-layout,
	.cy-contact-page [class*="contact"]__grid {
		align-items: start;
	}

	.cy-contact-page input,
	.cy-contact-page select,
	.cy-contact-page textarea {
		transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
	}

	.cy-contact-page input:focus,
	.cy-contact-page select:focus,
	.cy-contact-page textarea:focus {
		box-shadow: 0 2px 0 var(--cypros-yellow, #ffc600);
	}
}

/* ----------------------------------------------------------
   Mobile: motion becomes shorter and never changes layout.
---------------------------------------------------------- */
@media (max-width: 48rem) {
	.cy-motion-enhanced .cy-motion-item {
		--cy-motion-x: 0px !important;
		--cy-motion-y: 14px !important;
		transition-duration: 420ms, 520ms;
		transition-delay: calc(var(--cy-motion-order, 0) * 35ms);
	}

	.cy-services-page-services__list > * {
		transform: none !important;
	}

	.cy-services-page-services__list > *:hover h2,
	.cy-services-page-services__list > *:hover h3 {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cy-motion-item,
	.cy-industrial-evidence__node i,
	.cy-equipment-card__media img,
	.cy-equipment__visual img,
	.cy-industries__visual,
	.cy-services-page-services__list > *,
	.cy-services-page-services__list > *::after,
	.cy-services-page-services__list > * h2,
	.cy-services-page-services__list > * h3 {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}