/**
 * File: assets/css/pages/careers/graphics.css
 * Description: Coded graphics polish for the Careers page.
 *
 * MAGIDA CAREERS MOTION/GRAPHICS PASS 16.1:
 * - Adds premium coded visual details to the Careers hero and cards.
 * - Keeps the shared inner-page background untouched.
 * - Uses only Careers-scoped selectors so other pages remain stable.
 *
 * MAGIDA PASS 24.1.31:
 * - Removes repeated card-top mini accent lines after Careers visual QA.
 */

/* MAGIDA CAREERS PASS 16.1: soft stage lights sit inside the Careers page only, not the shared page atmosphere. */
.magida-template--careers::before,
.magida-template--careers::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(34rem, 60vw);
	height: min(34rem, 60vw);
	border-radius: 999px;
	filter: blur(3rem);
	pointer-events: none;
}

.magida-template--careers::before {
	top: 8rem;
	left: -14rem;
	background: rgba(0, 216, 255, 0.13);
}

.magida-template--careers::after {
	top: 42rem;
	right: -16rem;
	background: rgba(127, 91, 255, 0.11);
}

/* MAGIDA CAREERS PASS 16.1: coded scan/grid treatment for the existing hero visual. */
.magida-careers-visual::before,
.magida-careers-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.magida-careers-visual::before {
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 3.2rem 3.2rem;
	mask-image: radial-gradient(circle at 50% 48%, #000 0%, transparent 72%);
	opacity: 0.28;
}

.magida-careers-visual::after {
	background:
		radial-gradient(
			circle at 28% 18%,
			rgba(0, 216, 255, 0.24),
			transparent 12rem
		),
		radial-gradient(
			circle at 78% 78%,
			rgba(127, 91, 255, 0.24),
			transparent 14rem
		),
		linear-gradient(
			135deg,
			transparent 0%,
			rgba(255, 255, 255, 0.07) 48%,
			transparent 54%
		);
	mix-blend-mode: screen;
	opacity: 0.72;
}

.magida-careers-visual__orbit {
	box-shadow:
		inset 0 0 2rem rgba(0, 216, 255, 0.08),
		0 0 2.8rem rgba(0, 216, 255, 0.08);
}

.magida-careers-visual__orbit::before,
.magida-careers-visual__orbit::after {
	content: "";
	position: absolute;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 999px;
	background: var(--magida-cyan);
	box-shadow: 0 0 1.6rem rgba(0, 216, 255, 0.72);
}

.magida-careers-visual__orbit::before {
	top: 18%;
	right: 12%;
}

.magida-careers-visual__orbit::after {
	left: 16%;
	bottom: 20%;
	background: var(--magida-violet);
	box-shadow: 0 0 1.6rem rgba(127, 91, 255, 0.66);
}

.magida-careers-visual__panel--back::before,
.magida-careers-visual__panel--back::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	height: 0.72rem;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(0, 216, 255, 0.72),
		rgba(127, 91, 255, 0.38),
		transparent
	);
}

.magida-careers-visual__panel--back::before {
	top: 1.35rem;
	width: 62%;
}

.magida-careers-visual__panel--back::after {
	top: 2.7rem;
	width: 42%;
	opacity: 0.56;
}

.magida-careers-visual__panel--main {
	isolation: isolate;
}

.magida-careers-visual__panel--main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(
			circle at 18% 16%,
			rgba(0, 216, 255, 0.18),
			transparent 12rem
		),
		radial-gradient(
			circle at 86% 90%,
			rgba(127, 91, 255, 0.16),
			transparent 12rem
		);
}

.magida-careers-visual__headline span {
	position: relative;
	display: inline-block;
}

.magida-careers-visual__headline span::after {
	content: "";
	position: absolute;
	left: 0.08em;
	bottom: 0.02em;
	z-index: -1;
	width: 72%;
	height: 0.22em;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(0, 216, 255, 0.26),
		rgba(127, 91, 255, 0.12)
	);
}

.magida-careers-visual__bars span {
	position: relative;
	overflow: hidden;
}

.magida-careers-visual__bars span::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35%;
	width: 28%;
	background: rgba(255, 255, 255, 0.55);
	filter: blur(0.35rem);
}

.magida-careers-visual__chips span {
	position: relative;
	overflow: hidden;
}

.magida-careers-visual__chips span::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.12),
		transparent 54%
	);
	opacity: 0;
	transition: opacity var(--magida-transition);
}

.magida-careers-visual__chips span:hover::before {
	opacity: 1;
}

.magida-careers-visual__badge {
	z-index: 4;
}

.magida-careers-visual__badge::before {
	content: "";
	position: absolute;
	inset: -0.7rem;
	border: 1px solid rgba(0, 216, 255, 0.18);
	border-radius: 1.8rem;
	opacity: 0.72;
}

.magida-careers-opening-card,
.magida-careers-culture-card,
.magida-careers-process-step,
.magida-careers-final-cta__card {
	transition:
		transform var(--magida-transition),
		border-color var(--magida-transition),
		box-shadow var(--magida-transition);
}

.magida-careers-opening-card:hover,
.magida-careers-culture-card:hover,
.magida-careers-process-step:hover,
.magida-careers-final-cta__card:hover {
	border-color: rgba(0, 216, 255, 0.28);
	box-shadow:
		0 1.8rem 5rem rgba(0, 0, 0, 0.28),
		0 0 2rem rgba(0, 216, 255, 0.07);
	transform: translateY(-0.35rem);
}

@media (max-width: 980px) {
	.magida-template--careers::before,
	.magida-template--careers::after {
		display: none;
	}

	.magida-careers-visual::before {
		background-size: 2.4rem 2.4rem;
	}
}

@media (max-width: 640px) {
	.magida-careers-visual__orbit--one {
		right: -1.5rem;
		top: 1.5rem;
	}

	.magida-careers-visual__orbit--two {
		left: -5rem;
	}

	.magida-careers-opening-card:hover,
	.magida-careers-culture-card:hover,
	.magida-careers-process-step:hover,
	.magida-careers-final-cta__card:hover {
		transform: none;
	}
}