/**
 * File: assets/css/pages/quote/graphics.css
 * Description: Quote page visual effects for hero, process route, and form card.
 *
 * MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1:
 * - Adds lightweight coded visuals to the quote hero, process route, and form card.
 *
 * MAGIDA QUOTE GLOBAL HERO MIGRATION PASS 22.4:
 * - Removes old full-section hero graphic assumptions and keeps hero effects inside the global visual shell.
 */

.magida-quote-hero__art::before {
	/* MAGIDA PASS 22.4: Subtle top reflection adds depth without creating extra overlay cards. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 32%),
		radial-gradient(
			circle at 20% 84%,
			rgba(5, 223, 254, 0.09),
			transparent 28%
		);
	opacity: 0.84;
}

.magida-quote-brief-card::before,
.magida-quote-hero__status::before {
	/* MAGIDA PASS 22.4: A quiet accent line keeps the cards premium and aligned with Services/Pricing. */
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	top: 0;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.82),
		rgba(124, 106, 251, 0.68)
	);
}

.magida-quote-brief-card::after {
	content: "";
	position: absolute;
	right: -28px;
	top: -28px;
	width: 86px;
	height: 86px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: 26px;
	background: rgba(5, 223, 254, 0.04);
	transform: rotate(9deg);
	opacity: 0.72;
}

.magida-quote-hero__status::after {
	content: "";
	position: absolute;
	right: 24px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(124, 106, 251, 0.32);
	border-radius: 999px;
	background: rgba(124, 106, 251, 0.06);
}

@media (max-width: 760px) {
	.magida-quote-brief-card::after,
	.magida-quote-hero__status::after {
		display: none;
	}
}

.magida-quote-process__grid {
	position: relative;
	isolation: isolate;
}

.magida-quote-process__rail {
	/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Keep the process route subtle and behind the cards so it does not look like a broken border. */
	position: absolute;
	z-index: 0;
	left: 7%;
	right: 7%;
	top: 50px;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(0, 221, 255, 0.46),
		rgba(132, 94, 247, 0.44),
		rgba(0, 221, 255, 0.28)
	);
	box-shadow: 0 0 22px rgba(0, 221, 255, 0.12);
	opacity: 0.72;
	pointer-events: none;
}

.magida-quote-process-card {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Process cards gain stronger separation from the route rail. */
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.magida-quote-process-card > * {
	/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Keep text and step numbers above the restored circular graphic. */
	position: relative;
	z-index: 1;
}

.magida-quote-process-card::after {
	/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Restore the larger circle graphic from the foundation pass instead of the smaller square badge. */
	content: "";
	position: absolute;
	z-index: 0;
	right: -38px;
	bottom: -44px;
	width: 150px;
	aspect-ratio: 1;
	border: 1px solid rgba(0, 221, 255, 0.12);
	border-radius: 999px;
	background: radial-gradient(
		circle,
		rgba(0, 221, 255, 0.12),
		transparent 64%
	);
	opacity: 0.86;
	pointer-events: none;
}

.magida-quote-form-card__glow,
.magida-quote-form-card__route {
	position: absolute;
	pointer-events: none;
}

.magida-quote-form-card__glow {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Quiet glow behind the form fields. */
	inset: auto -18% -18% 44%;
	height: 260px;
	border-radius: 999px;
	background: radial-gradient(
		circle,
		rgba(0, 221, 255, 0.16),
		rgba(132, 94, 247, 0.08),
		transparent 68%
	);
	filter: blur(8px);
	opacity: 0.78;
}

.magida-quote-form-card__route {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Decorative top route line framing the form card. */
	top: 0;
	left: 42px;
	right: 42px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0, 221, 255, 0.58),
		rgba(132, 94, 247, 0.38),
		transparent
	);
}

.magida-quote-field input:focus,
.magida-quote-field select:focus,
.magida-quote-field textarea:focus {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Stronger focus state for the actual form workflow. */
	border-color: rgba(0, 221, 255, 0.42);
	box-shadow: 0 0 0 4px rgba(0, 221, 255, 0.08);
}

@media (max-width: 1080px) {
	.magida-quote-process__rail {
		display: none;
	}
}

.magida-quote-form-card.is-field-active {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: JS-added state for subtle feedback while completing the quote form. */
	box-shadow:
		0 32px 120px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(0, 221, 255, 0.18) inset,
		0 0 60px rgba(0, 221, 255, 0.05);
}

.magida-quote-form-card {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Keeps form decorations scoped inside the form shell. */
	position: relative;
	overflow: hidden;
}

.magida-quote-form-card
	> :not(.magida-quote-form-card__glow):not(.magida-quote-form-card__route) {
	/* MAGIDA QUOTE MOTION/GRAPHICS PASS 12.1: Actual form content stays above decorative layers. */
	position: relative;
	z-index: 1;
}

/* MAGIDA PASS 24.1.42 — Quote Process Line, Media Scale, and Form Rhythm Polish
   Remove the desktop process route rail that was reading as an accidental line across the cards. */
.magida-quote-process__rail {
	display: none;
}