/**
 * File: assets/css/pages/services/motion.css
 * Description: Entrance and micro-motion styling for the Services page.
 *
 * MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1:
 * - Adds reveal motion, ambient movement, and hover polish for the Services page only.
 * - Respects prefers-reduced-motion so the page remains accessible.
 */

.magida-services-motion-ready .magida-services-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.72s ease,
		transform 0.72s ease;
	transition-delay: var(--magida-reveal-delay, 0ms);
}

.magida-services-motion-ready .magida-services-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.magida-services-visual-card--main,
.magida-services-visual-window,
.magida-service-detail__graphic,
.magida-capability-card__icon {
	animation: magidaServicesFloat 7s ease-in-out infinite;
}

.magida-services-visual-card--floating,
.magida-services-visual-map,
.magida-services-hero__orb {
	animation: magidaServicesFloatAlt 8s ease-in-out infinite;
}

.magida-services-visual-card--floating,
.magida-services-hero__orb--violet {
	animation-delay: -2s;
}

.magida-services-visual-card__lines span,
.magida-services-visual-window__copy span,
.magida-service-detail__visual i,
.magida-service-detail__graphic b,
.magida-service-detail__graphic small {
	background-size: 180% 100%;
	animation: magidaServicesLinePulse 4.5s ease-in-out infinite;
}

.magida-service-detail__graphic small:nth-of-type(2),
.magida-services-visual-window__copy span:nth-child(2) {
	animation-delay: -1.2s;
}

.magida-service-detail__graphic small:nth-of-type(3),
.magida-services-visual-window__copy span:nth-child(3) {
	animation-delay: -2.4s;
}

.magida-service-detail,
.magida-capability-card,
.magida-process-step,
.magida-services-approach__cards article,
.magida-services-faq__item,
.magida-services-quote-direction__cards article {
	transition:
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		transform 0.28s ease,
		background 0.28s ease;
}

.magida-service-detail:hover,
.magida-capability-card:hover,
.magida-process-step:hover,
.magida-services-approach__cards article:hover,
.magida-services-faq__item:hover,
.magida-services-quote-direction__cards article:hover {
	border-color: rgba(5, 223, 254, 0.24);
	box-shadow:
		0 24px 76px rgba(0, 0, 0, 0.22),
		0 0 34px rgba(5, 223, 254, 0.07);
	transform: translateY(-3px);
}

.magida-process-step span {
	position: relative;
	z-index: 2;
}

.magida-process-step span::after {
	content: "";
	position: absolute;
	inset: -7px;
	z-index: -1;
	border-radius: 50%;
	border: 1px solid rgba(5, 223, 254, 0.12);
	animation: magidaServicesRingPulse 3.8s ease-in-out infinite;
}

@keyframes magidaServicesFloat {
	0%,
	100% {
		transform: translate3d(0, 0, 32px);
	}

	50% {
		transform: translate3d(0, -10px, 32px);
	}
}

@keyframes magidaServicesFloatAlt {
	0%,
	100% {
		transform: translate3d(0, 0, 44px);
	}

	50% {
		transform: translate3d(0, 9px, 44px);
	}
}

@keyframes magidaServicesLinePulse {
	0%,
	100% {
		background-position: 0% 50%;
		opacity: 0.75;
	}

	50% {
		background-position: 100% 50%;
		opacity: 1;
	}
}

@keyframes magidaServicesRingPulse {
	0%,
	100% {
		opacity: 0.25;
		transform: scale(0.92);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.magida-services-motion-ready .magida-services-reveal,
	.magida-services-visual-card--main,
	.magida-services-visual-card--floating,
	.magida-services-visual-window,
	.magida-services-visual-map,
	.magida-services-hero__orb,
	.magida-service-detail__graphic,
	.magida-capability-card__icon,
	.magida-services-visual-card__lines span,
	.magida-services-visual-window__copy span,
	.magida-service-detail__visual i,
	.magida-service-detail__graphic b,
	.magida-service-detail__graphic small,
	.magida-process-step span::after {
		animation: none;
		transition: none;
	}

	.magida-services-motion-ready .magida-services-reveal {
		opacity: 1;
		transform: none;
	}
}