/**
 * File: assets/css/pages/about/graphics.css
 * Description: Coded graphics and visual polish for the About page.
 *
 * MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1:
 * - Adds asset-free coded signal lines, glow dots, satellite labels, and pointer tilt.
 * - Keeps graphic styling separate from About base/section layout for easier debugging.
 */

[data-magida-about-tilt] {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Shared desktop tilt variables controlled by page-specific JS. */
	--magida-tilt-x: 0deg;
	--magida-tilt-y: 0deg;
	--magida-tilt-glow-x: 50%;
	--magida-tilt-glow-y: 50%;
	--magida-about-hover-y: 0px;
	position: relative;
	transform: translateY(var(--magida-about-hover-y)) perspective(960px)
		rotateX(var(--magida-tilt-x)) rotateY(var(--magida-tilt-y));
	transform-style: preserve-3d;
}

.magida-about-tilt-glow {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Pointer-follow light layer used only by elements that opt in. */
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at var(--magida-tilt-glow-x) var(--magida-tilt-glow-y),
		rgba(5, 223, 254, 0.18),
		transparent 35%
	);
	opacity: 0;
	transition: opacity 0.28s ease;
}

[data-magida-about-tilt]:hover > .magida-about-tilt-glow,
.magida-about-hero__visual:hover > .magida-about-tilt-glow,
.magida-about-brand__visual:hover > .magida-about-tilt-glow,
.magida-about-final-cta__inner:hover > .magida-about-tilt-glow {
	opacity: 1;
}

.magida-about-brand__satellites,
.magida-about-brand__mark,
.magida-about-final-cta__inner > :not(.magida-about-tilt-glow) {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Keeps readable content above decorative glow layers without changing their positioning model. */
	z-index: 1;
}

.magida-about-final-cta__inner > :not(.magida-about-tilt-glow) {
	position: relative;
}

.magida-about-hero__visual::before,
.magida-about-hero__visual::after,
.magida-about-brand__visual::before {
	z-index: 0;
}

.magida-about-visual-line,
.magida-about-visual-dot {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Coded connection details around the About hero mockup. */
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.magida-about-visual-line {
	height: 1px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(5, 223, 254, 0.34),
		rgba(124, 106, 251, 0.26),
		transparent
	);
	box-shadow: 0 0 22px rgba(5, 223, 254, 0.12);
	transform: translateZ(18px) rotate(-8deg);
}

.magida-about-visual-line--one {
	left: 48px;
	top: 124px;
	width: 46%;
}

.magida-about-visual-line--two {
	right: 52px;
	bottom: 138px;
	width: 38%;
	transform: translateZ(18px) rotate(12deg);
}

.magida-about-visual-dot {
	width: 11px;
	height: 11px;
	border: 1px solid rgba(5, 223, 254, 0.38);
	border-radius: 50%;
	background: rgba(5, 223, 254, 0.16);
	box-shadow: 0 0 24px rgba(5, 223, 254, 0.22);
	transform: translateZ(42px);
}

.magida-about-visual-dot--one {
	left: 21%;
	top: 26%;
}

.magida-about-visual-dot--two {
	right: 23%;
	top: 42%;
	border-color: rgba(124, 106, 251, 0.42);
	background: rgba(124, 106, 251, 0.16);
	box-shadow: 0 0 24px rgba(124, 106, 251, 0.22);
}

.magida-about-visual-dot--three {
	right: 14%;
	bottom: 22%;
}

.magida-about-studio-mark,
.magida-about-visual-card,
.magida-about-brand__mark,
.magida-about-brand__satellites span {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Push coded hero/brand layers forward during tilt. */
	transform-style: preserve-3d;
}

.magida-about-studio-mark {
	transform: translateX(-50%) translateZ(40px) rotate(-5deg);
}

.magida-about-brand__mark {
	transform: translateZ(40px) rotate(-6deg);
}

.magida-about-visual-card--studio {
	transform: translateZ(54px);
}

.magida-about-visual-card--stack {
	transform: translateZ(64px);
}

.magida-about-brand__satellites {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Small service words orbit the mark without needing image assets. */
	position: absolute;
	inset: 36px;
	z-index: 2;
	pointer-events: none;
}

.magida-about-brand__satellites span {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	min-height: 34px;
	padding: 7px 12px;
	border: 1px solid rgba(190, 189, 229, 0.13);
	border-radius: var(--magida-radius-full);
	background: rgba(4, 7, 15, 0.7);
	color: var(--magida-text-bright);
	font-family: var(--magida-font-heading);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.magida-about-brand__satellites span:nth-child(1) {
	left: 6%;
	top: 14%;
}

.magida-about-brand__satellites span:nth-child(2) {
	right: 4%;
	top: 48%;
	color: var(--magida-cyan);
}

.magida-about-brand__satellites span:nth-child(3) {
	left: 16%;
	bottom: 9%;
	color: var(--magida-violet-soft);
}

.magida-about-mission-card,
.magida-about-belief-item,
.magida-about-trust-card,
.magida-about-stat,
.magida-about-proof__card,
.magida-about-final-cta__inner {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Shared hover polish for the About story cards. */
	transition:
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		background 0.28s ease,
		transform 0.28s ease;
}

.magida-about-mission-card:hover,
.magida-about-belief-item:hover,
.magida-about-trust-card:hover,
.magida-about-stat:hover,
.magida-about-proof__card:hover,
.magida-about-final-cta__inner:hover {
	--magida-about-hover-y: -3px;
	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);
}

.magida-about-stat {
	overflow: hidden;
}

.magida-about-stat::after {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Adds a quiet metric glow line without changing stat markup. */
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	height: 2px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.54),
		rgba(124, 106, 251, 0.28),
		transparent
	);
	opacity: 0.56;
}

.magida-about-proof__card {
	overflow: hidden;
}

.magida-about-proof__card::after {
	/* MAGIDA ABOUT MOTION/GRAPHICS PASS 9.1: Creates a soft project-proof lens inside the proof card. */
	content: "";
	position: absolute;
	right: -46px;
	bottom: -58px;
	width: 152px;
	height: 152px;
	border: 1px solid rgba(5, 223, 254, 0.15);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(5, 223, 254, 0.11),
		transparent 65%
	);
	pointer-events: none;
}

.magida-about-proof__card > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 880px) {
	[data-magida-about-tilt] {
		transform: none;
	}

	.magida-about-visual-line,
	.magida-about-visual-dot,
	.magida-about-brand__satellites {
		display: none;
	}
}