/* GreenMagic motion layer — supporting styles for site-motion.js.
   Pure interaction polish; loaded after site-modern.css. */

/* ---- Scroll progress bar ---- */
.gm-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--gm-lime, #ddf27c), #9fe870 60%, #57c2c9);
	box-shadow: 0 0 14px rgba(221, 242, 124, 0.55);
	z-index: 99999;
	pointer-events: none;
	will-change: transform;
}

/* ---- 3D tilt cards: give them a perspective context + smooth idle return ---- */
.gm-tilt {
	transform-style: preserve-3d;
	transition: box-shadow 0.4s ease;
	will-change: transform;
}

.gm-tilt .service-image img,
.gm-tilt .product-image img,
.gm-tilt img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gm-tilt:hover {
	box-shadow: var(--gm-shadow-md, 0 24px 70px rgba(14, 18, 29, 0.12));
}

/* Lift the inner media slightly on hover for depth */
.gm-tilt:hover .service-image img,
.gm-tilt:hover .product-image img {
	transform: translateZ(28px) scale(1.04);
}

/* ---- Magnetic buttons ---- */
.gm-magnetic {
	will-change: transform;
}
.gm-magnetic > * {
	display: inline-block;
	will-change: transform;
}

/* ---- Reveal base (for elements not already handled by WOW) ---- */
.gm-reveal {
	opacity: 0;
	transform: translateY(34px);
}
.gm-reveal.gm-in {
	opacity: 1;
	transform: none;
}

/* ---- Respect reduced motion: neutralise everything ---- */
@media (prefers-reduced-motion: reduce) {
	.gm-scroll-progress { display: none; }
	.gm-reveal { opacity: 1 !important; transform: none !important; }
	.gm-tilt { transform: none !important; }
	.gm-tilt:hover .service-image img,
	.gm-tilt:hover .product-image img { transform: none; }
}