/**
 * File: assets/css/pages/about/motion.css
 * Description: Entrance and micro-motion styling for the About page.
 *
 * MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1:
 * - Adds reveal motion, ambient float, and small signal animations for the About page only.
 * - Respects prefers-reduced-motion so the page remains accessible.
 */

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

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

.magida-about-studio-mark {
	animation: magidaAboutStudioMarkFloat 7.5s ease-in-out infinite;
}

.magida-about-brand__mark {
	animation: magidaAboutBrandMarkFloat 7.5s ease-in-out infinite;
}

.magida-about-visual-card--studio {
	animation: magidaAboutCardFloat 7.5s ease-in-out infinite;
}

.magida-about-visual-card--stack,
.magida-about-hero__orb,
.magida-about-brand__satellites span {
	animation: magidaAboutFloatAlt 8.5s ease-in-out infinite;
}

.magida-about-visual-card--stack,
.magida-about-hero__orb--violet,
.magida-about-brand__satellites span:nth-child(2) {
	animation-delay: -2s;
}

.magida-about-brand__satellites span:nth-child(3) {
	animation-delay: -3.2s;
}

.magida-about-visual-line {
	background-size: 190% 100%;
	animation: magidaAboutSignalSweep 4.6s ease-in-out infinite;
}

.magida-about-visual-line--two {
	animation-delay: -1.4s;
}

.magida-about-visual-dot,
.magida-about-mission-card::before,
.magida-about-trust-card::before,
.magida-about-stat::after,
.magida-about-proof__card::after {
	animation: magidaAboutPulse 4.8s ease-in-out infinite;
}

.magida-about-visual-dot--two,
.magida-about-trust-card::before,
.magida-about-proof__card::after {
	animation-delay: -1.6s;
}

.magida-about-visual-dot--three,
.magida-about-stat::after {
	animation-delay: -2.8s;
}

.magida-about-belief-item > span {
	position: relative;
	z-index: 1;
}

.magida-about-belief-item > span::after {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Adds a gentle ring pulse to belief numbers. */
	content: "";
	position: absolute;
	inset: -7px;
	z-index: -1;
	border: 1px solid rgba(5, 223, 254, 0.14);
	border-radius: 50%;
	animation: magidaAboutRingPulse 3.9s ease-in-out infinite;
}

@keyframes magidaAboutStudioMarkFloat {
	0%,
	100% {
		transform: translate3d(-50%, 0, 40px) rotate(-5deg);
	}

	50% {
		transform: translate3d(-50%, -10px, 40px) rotate(-5deg);
	}
}

@keyframes magidaAboutBrandMarkFloat {
	0%,
	100% {
		transform: translate3d(0, 0, 40px) rotate(-6deg);
	}

	50% {
		transform: translate3d(0, -10px, 40px) rotate(-6deg);
	}
}

@keyframes magidaAboutCardFloat {
	0%,
	100% {
		transform: translate3d(0, 0, 54px);
	}

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

@keyframes magidaAboutFloatAlt {
	0%,
	100% {
		transform: translate3d(0, 0, 52px);
	}

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

@keyframes magidaAboutSignalSweep {
	0%,
	100% {
		background-position: 0% 50%;
		opacity: 0.64;
	}

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

@keyframes magidaAboutPulse {
	0%,
	100% {
		opacity: 0.54;
	}

	50% {
		opacity: 1;
	}
}

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

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

@media (prefers-reduced-motion: reduce) {
	.magida-about-motion-ready .magida-about-reveal,
	.magida-about-studio-mark,
	.magida-about-visual-card--studio,
	.magida-about-visual-card--stack,
	.magida-about-hero__orb,
	.magida-about-brand__mark,
	.magida-about-brand__satellites span,
	.magida-about-visual-line,
	.magida-about-visual-dot,
	.magida-about-mission-card::before,
	.magida-about-trust-card::before,
	.magida-about-stat::after,
	.magida-about-proof__card::after,
	.magida-about-belief-item > span::after {
		animation: none;
		transition: none;
	}

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