/**
 * File: assets/css/pages/services/graphics.css
 * Description: Coded graphics and visual polish for the Services page.
 *
 * MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1:
 * - Adds asset-free visual mockups, icons, glows, and coded graphics.
 * - Keeps graphic styling separate from base Services layout for easier debugging.
 */

.magida-services-hero__visual,
.magida-service-detail__visual,
.magida-capability-card,
.magida-process-step {
	--magida-tilt-x: 0deg;
	--magida-tilt-y: 0deg;
	--magida-tilt-glow-x: 50%;
	--magida-tilt-glow-y: 50%;
	transform: perspective(900px) rotateX(var(--magida-tilt-x))
		rotateY(var(--magida-tilt-y));
	transform-style: preserve-3d;
}

.magida-services-hero__visual::after,
.magida-service-detail__visual::after,
.magida-capability-card::after {
	/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Subtle pointer-follow glow for interactive visual panels. */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at var(--magida-tilt-glow-x) var(--magida-tilt-glow-y),
		rgba(5, 223, 254, 0.15),
		transparent 34%
	);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.magida-services-hero__visual:hover::after,
.magida-service-detail__visual:hover::after,
.magida-capability-card:hover::after {
	opacity: 1;
}

.magida-services-hero__orb {
	/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Floating glow nodes around the Services hero graphic. */
	position: absolute;
	z-index: 0;
	width: 92px;
	height: 92px;
	border: 1px solid rgba(5, 223, 254, 0.2);
	border-radius: 50%;
	background: rgba(5, 223, 254, 0.055);
	box-shadow: 0 0 44px rgba(5, 223, 254, 0.14);
}

.magida-services-hero__orb--cyan {
	top: 8%;
	right: 16%;
}

.magida-services-hero__orb--violet {
	bottom: 12%;
	left: 10%;
	border-color: rgba(124, 106, 251, 0.22);
	background: rgba(124, 106, 251, 0.07);
	box-shadow: 0 0 48px rgba(124, 106, 251, 0.16);
}

.magida-services-visual-window {
	position: absolute;
	z-index: 2;
	right: 18px;
	bottom: 22px;
	width: min(54%, 330px);
	min-height: 196px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: 24px;
	background: linear-gradient(
		150deg,
		rgba(6, 12, 25, 0.9),
		rgba(10, 17, 36, 0.82)
	);
	box-shadow:
		0 26px 80px rgba(0, 0, 0, 0.34),
		0 0 44px rgba(5, 223, 254, 0.08);
	overflow: hidden;
	transform: translateZ(34px);
}

.magida-services-visual-window__bar {
	display: flex;
	gap: 7px;
	padding: 15px 18px;
	border-bottom: 1px solid rgba(190, 189, 229, 0.09);
	background: rgba(255, 255, 255, 0.035);
}

.magida-services-visual-window__bar span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(190, 189, 229, 0.2);
}

.magida-services-visual-window__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 86px;
	gap: 18px;
	align-items: center;
	padding: 22px;
}

.magida-services-visual-window__copy {
	display: grid;
	gap: 11px;
}

.magida-services-visual-window__copy span {
	display: block;
	height: 12px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.44),
		rgba(124, 106, 251, 0.22)
	);
}

.magida-services-visual-window__copy span:nth-child(2) {
	width: 74%;
}

.magida-services-visual-window__copy span:nth-child(3) {
	width: 52%;
}

.magida-services-visual-window__device {
	display: grid;
	place-items: center;
	height: 126px;
	border: 1px solid rgba(5, 223, 254, 0.2);
	border-radius: 22px;
	background: linear-gradient(
		160deg,
		rgba(5, 223, 254, 0.14),
		rgba(124, 106, 251, 0.1)
	);
}

.magida-services-visual-window__device span {
	position: absolute;
	top: 64px;
	width: 28px;
	height: 4px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.28);
}

.magida-services-visual-window__device strong {
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: -0.08em;
	text-shadow: var(--magida-glow-soft);
}

.magida-services-visual-map {
	position: absolute;
	z-index: 3;
	left: 34px;
	bottom: 42px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid rgba(190, 189, 229, 0.13);
	border-radius: var(--magida-radius-full);
	background: rgba(4, 7, 15, 0.76);
	box-shadow: 0 20px 58px rgba(0, 0, 0, 0.28);
	transform: translateZ(46px);
}

.magida-services-visual-map span {
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.78rem;
	font-weight: 900;
}

.magida-services-visual-map i {
	width: 32px;
	height: 2px;
	border-radius: var(--magida-radius-full);
	background: var(--magida-gradient-line);
}

.magida-service-detail__graphic {
	/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Service-specific coded graphic layer inside each service tile. */
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	width: 118px;
	height: 118px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 28px;
	background: rgba(4, 7, 15, 0.5);
	box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
	transform: translateZ(38px);
	overflow: hidden;
}

.magida-service-detail__graphic b,
.magida-service-detail__graphic em,
.magida-service-detail__graphic small {
	position: absolute;
	display: block;
}

.magida-service-detail__graphic b {
	inset: 18px 18px auto;
	height: 12px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.55),
		rgba(124, 106, 251, 0.45)
	);
}

.magida-service-detail__graphic em {
	left: 18px;
	bottom: 18px;
	width: 44px;
	height: 44px;
	border-radius: 16px;
	background: linear-gradient(
		135deg,
		rgba(5, 223, 254, 0.26),
		rgba(124, 106, 251, 0.32)
	);
}

.magida-service-detail__graphic small {
	right: 18px;
	width: 32px;
	height: 8px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.18);
}

.magida-service-detail__graphic small:nth-of-type(1) {
	top: 48px;
}

.magida-service-detail__graphic small:nth-of-type(2) {
	top: 66px;
	width: 42px;
}

.magida-service-detail__graphic small:nth-of-type(3) {
	top: 84px;
	width: 24px;
}

.magida-service-detail__graphic--apps {
	border-radius: 34px;
	width: 96px;
}

.magida-service-detail__graphic--apps b {
	left: 34px;
	right: 34px;
	height: 5px;
	background: rgba(190, 189, 229, 0.28);
}

.magida-service-detail__graphic--apps em {
	left: 24px;
	bottom: 22px;
	width: 48px;
	height: 54px;
	border-radius: 18px;
}

.magida-service-detail__graphic--systems b {
	left: 20px;
	right: auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

.magida-service-detail__graphic--systems em {
	left: auto;
	right: 18px;
	bottom: 22px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.magida-capability-card__icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 22px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: 18px;
	background: linear-gradient(
		135deg,
		rgba(5, 223, 254, 0.12),
		rgba(124, 106, 251, 0.12)
	);
	box-shadow: var(--magida-glow-soft);
}

.magida-capability-card__icon small {
	position: relative;
	z-index: 2;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.76rem;
	font-weight: 900;
}

.magida-capability-card__icon i {
	position: absolute;
	border-radius: var(--magida-radius-full);
	background: var(--magida-gradient-line);
}

.magida-capability-card__icon i:first-of-type {
	left: 13px;
	right: 13px;
	top: 14px;
	height: 3px;
}

.magida-capability-card__icon i:last-of-type {
	left: 18px;
	right: 18px;
	bottom: 14px;
	height: 3px;
}

.magida-services-process__timeline::before {
	/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Adds a subtle connected path behind the process cards. */
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	top: 47px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(5, 223, 254, 0.28),
		rgba(124, 106, 251, 0.28),
		transparent
	);
}

.magida-services-final-cta__inner {
	position: relative;
	overflow: hidden;
}

.magida-services-final-cta__inner::after {
	/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Adds a soft CTA graphic glow without new markup. */
	content: "";
	position: absolute;
	right: -70px;
	bottom: -90px;
	width: 260px;
	height: 260px;
	border: 1px solid rgba(5, 223, 254, 0.16);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(5, 223, 254, 0.12),
		transparent 64%
	);
	pointer-events: none;
}

@media (max-width: 880px) {
	.magida-services-visual-window,
	.magida-services-visual-map {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: 16px;
		transform: none;
	}

	.magida-services-visual-map {
		justify-content: center;
		flex-wrap: wrap;
	}

	.magida-service-detail__graphic {
		width: 104px;
		height: 104px;
	}

	.magida-services-process__timeline::before {
		display: none;
	}
}

@media (max-width: 640px) {
	.magida-services-visual-window__body {
		grid-template-columns: 1fr;
	}

	.magida-services-visual-window__device {
		height: 94px;
	}

	.magida-service-detail__graphic {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: 22px;
	}
}

/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Keeps decorative glow layers behind readable card/CTA content. */
.magida-capability-card > *,
.magida-services-final-cta__inner > * {
	position: relative;
	z-index: 1;
}

.magida-capability-card::after,
.magida-services-final-cta__inner::after {
	z-index: 0;
}

/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Moves the path chip above the coded browser mockup so layers do not collide. */
.magida-services-visual-card--floating {
	top: 166px;
	right: 34px;
	bottom: auto;
	transform: translateZ(48px);
}

@media (max-width: 760px) {
	.magida-services-visual-card--floating {
		top: auto;
		right: 24px;
		bottom: 28px;
	}
}

/* MAGIDA SERVICES MOTION/GRAPHICS PASS 8.1: Keeps the mobile device speaker aligned inside its device shell. */
.magida-services-visual-window__device {
	position: relative;
}

.magida-services-visual-window__device span {
	top: 16px;
}