/**
 * File: assets/css/front-page/motion.css
 * Description: Homepage entrance and subtle motion styles for Magida Creative Co.
 *
 * MAGIDA HOMEPAGE MOTION/MEDIA PASS 7.1:
 * - Adds restrained reveal animations and slow ambient movement.
 * - Keeps reduced-motion users safe and keeps no-JS fallback visible.
 */

.magida-motion-ready .magida-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity 0.72s ease,
		transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--magida-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.magida-motion-ready .magida-reveal--fade {
	transform: none;
}

.magida-motion-ready .magida-reveal--slide-left {
	transform: translate3d(34px, 0, 0);
}

.magida-motion-ready .magida-reveal--visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.magida-motion-ready .magida-process__timeline::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.magida-motion-ready .magida-process__timeline.magida-reveal--visible::before {
	transform: scaleX(1);
}

.magida-home-hero__orb--cyan,
.magida-home-hero__orb--violet {
	animation: magida-home-orb-drift 14s ease-in-out infinite;
}

.magida-home-hero__orb--violet {
	animation-delay: -4s;
}

.magida-final-cta__inner {
	animation: magida-home-cta-breathe 7s ease-in-out infinite;
}

.magida-button,
.magida-link,
.magida-service-panel,
.magida-featured-project__visual,
.magida-price-card,
.magida-faq-item summary {
	transition:
		border-color var(--magida-transition),
		box-shadow var(--magida-transition),
		color var(--magida-transition),
		background var(--magida-transition),
		transform var(--magida-transition);
}

.magida-button:hover,
.magida-button:focus-visible {
	transform: translateY(-2px);
}

@keyframes magida-home-orb-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(18px, -16px, 0) scale(1.08);
	}
}

@keyframes magida-home-cta-breathe {
	0%,
	100% {
		box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
	}

	50% {
		box-shadow:
			0 26px 86px rgba(0, 0, 0, 0.3),
			0 0 46px rgba(5, 223, 254, 0.08);
	}
}

@media (max-width: 768px) {
	.magida-motion-ready .magida-reveal {
		transform: translate3d(0, 16px, 0);
		transition-duration: 0.48s;
	}

	.magida-home-hero__orb--cyan,
	.magida-home-hero__orb--violet,
	.magida-final-cta__inner {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.magida-motion-ready .magida-reveal,
	.magida-motion-ready .magida-process__timeline::before,
	.magida-home-hero__orb--cyan,
	.magida-home-hero__orb--violet,
	.magida-final-cta__inner,
	.magida-button,
	.magida-link,
	.magida-service-panel,
	.magida-featured-project__visual,
	.magida-price-card,
	.magida-faq-item summary {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

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