/*
File: assets/css/pages/commissioned-art/graphics.css
Description: Commissioned Art page coded graphics and visual polish.

MAGIDA COMMISSIONED ART MOTION/GRAPHICS PASS 13.4:
- Adds the visual polish layer separately from the Commissioned Art base layout.
- Keeps the page aligned with the unified inner-page atmosphere from Pass 13.2.
- Uses transform/opacity-friendly details only so the header scroll stability fix remains untouched.
*/

.magida-template--commissioned-art {
	--magida-commission-cyan: rgba(5, 223, 254, 0.78);
	--magida-commission-purple: rgba(124, 106, 251, 0.58);
	--magida-commission-panel-line: rgba(255, 255, 255, 0.11);
	--magida-commission-panel-shine: rgba(255, 255, 255, 0.05);
}

/* PASS 13.4: Adds art-studio style linework without changing the shared page background. */
.magida-template--commissioned-art .magida-commission-hero,
.magida-template--commissioned-art .magida-commission-section {
	position: relative;
	isolation: isolate;
}

.magida-template--commissioned-art .magida-commission-hero::after,
.magida-template--commissioned-art .magida-commission-gallery::after {
	content: "";
	position: absolute;
	inset: auto 6vw 8% auto;
	width: clamp(9rem, 18vw, 18rem);
	height: clamp(9rem, 18vw, 18rem);
	border: 1px solid rgba(5, 223, 254, 0.12);
	border-radius: 999px;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(5, 223, 254, 0.11),
			transparent 58%
		),
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.08),
			rgba(124, 106, 251, 0.06)
		);
	filter: blur(0.2px);
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
}

/* PASS 13.4: Adds a subtle drafting-line ribbon behind the hero illustration. */
.magida-template--commissioned-art .magida-commission-hero__visual::before {
	content: "";
	position: absolute;
	left: 9%;
	right: 9%;
	top: 27%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--magida-commission-cyan),
		var(--magida-commission-purple),
		transparent
	);
	box-shadow: 0 0 2rem rgba(5, 223, 254, 0.22);
	opacity: 0.55;
	transform: rotate(-8deg);
	pointer-events: none;
}

.magida-template--commissioned-art .magida-commission-hero__visual::after {
	content: "";
	position: absolute;
	inset: 10% 8% auto auto;
	width: clamp(6rem, 12vw, 10rem);
	height: clamp(6rem, 12vw, 10rem);
	border: 1px solid rgba(5, 223, 254, 0.16);
	border-radius: 34% 66% 58% 42%;
	background: radial-gradient(
		circle at 48% 52%,
		rgba(5, 223, 254, 0.1),
		transparent 65%
	);
	pointer-events: none;
}

/* PASS 13.4: Adds a premium glass shine to the art board without touching layout sizing. */
.magida-template--commissioned-art .magida-commission-art-board {
	isolation: isolate;
	box-shadow:
		0 2rem 5rem rgba(0, 0, 0, 0.28),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 0 3rem rgba(5, 223, 254, 0.035);
}

.magida-template--commissioned-art .magida-commission-art-board::before,
.magida-template--commissioned-art .magida-commission-art-board::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

.magida-template--commissioned-art .magida-commission-art-board::before {
	inset: 1.15rem;
	border-radius: inherit;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 4.5rem 4.5rem;
	mask-image: radial-gradient(circle at 50% 45%, black, transparent 68%);
	opacity: 0.18;
}

.magida-template--commissioned-art .magida-commission-art-board::after {
	left: 8%;
	right: 8%;
	top: 12%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.36),
		transparent
	);
	opacity: 0.28;
}

/* PASS 13.4: Gives the placeholder frame more intentional art-board structure. */
.magida-template--commissioned-art .magida-commission-art-board__frame {
	isolation: isolate;
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 -4rem 7rem rgba(5, 223, 254, 0.045);
}

.magida-template--commissioned-art .magida-commission-art-board__frame::before,
.magida-template--commissioned-art .magida-commission-art-board__frame::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.magida-template--commissioned-art .magida-commission-art-board__frame::before {
	inset: 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.3rem;
	background:
		linear-gradient(
			90deg,
			transparent 49%,
			rgba(5, 223, 254, 0.12) 50%,
			transparent 51%
		),
		linear-gradient(
			180deg,
			transparent 49%,
			rgba(124, 106, 251, 0.12) 50%,
			transparent 51%
		);
	opacity: 0.45;
}

.magida-template--commissioned-art .magida-commission-art-board__frame::after {
	left: 50%;
	top: 50%;
	width: 12rem;
	height: 12rem;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: 999px;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(5, 223, 254, 0.08),
		transparent 63%
	);
	transform: translate(-50%, -50%);
}

.magida-template--commissioned-art .magida-commission-art-board__face {
	box-shadow:
		0 0 3rem rgba(5, 223, 254, 0.18),
		inset 0 0 2.5rem rgba(5, 223, 254, 0.11);
}

.magida-template--commissioned-art .magida-commission-art-board__face::before,
.magida-template--commissioned-art .magida-commission-art-board__face::after {
	box-shadow: 0 0 1.2rem rgba(5, 223, 254, 0.62);
}

/* PASS 13.4: Adds consistent hover polish to Commissioned Art cards only. */
.magida-template--commissioned-art .magida-commission-copy-card,
.magida-template--commissioned-art .magida-commission-info-card,
.magida-template--commissioned-art .magida-commission-mini-card,
.magida-template--commissioned-art .magida-commission-gallery-card,
.magida-template--commissioned-art .magida-commission-process-card,
.magida-template--commissioned-art .magida-commission-follow__panel,
.magida-template--commissioned-art .magida-commission-note__panel,
.magida-template--commissioned-art .magida-commission-final__panel,
.magida-template--commissioned-art .magida-commission-form-card {
	position: relative;
	overflow: hidden;
	transition:
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		transform 0.28s ease;
}

.magida-template--commissioned-art .magida-commission-copy-card::before,
.magida-template--commissioned-art .magida-commission-info-card::before,
.magida-template--commissioned-art .magida-commission-mini-card::before,
.magida-template--commissioned-art .magida-commission-gallery-card::before,
.magida-template--commissioned-art .magida-commission-process-card::before,
.magida-template--commissioned-art .magida-commission-form-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			120deg,
			transparent 0%,
			rgba(255, 255, 255, 0.06) 46%,
			transparent 62%
		),
		radial-gradient(
			circle at 100% 100%,
			rgba(5, 223, 254, 0.14),
			transparent 13rem
		);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.magida-template--commissioned-art .magida-commission-copy-card:hover,
.magida-template--commissioned-art .magida-commission-info-card:hover,
.magida-template--commissioned-art .magida-commission-mini-card:hover,
.magida-template--commissioned-art .magida-commission-gallery-card:hover,
.magida-template--commissioned-art .magida-commission-process-card:hover {
	border-color: rgba(5, 223, 254, 0.24);
	box-shadow:
		0 1.5rem 3.2rem rgba(0, 0, 0, 0.28),
		inset 0 0 2.4rem rgba(5, 223, 254, 0.035);
	transform: translate3d(0, -4px, 0);
}

.magida-template--commissioned-art .magida-commission-copy-card:hover::before,
.magida-template--commissioned-art .magida-commission-info-card:hover::before,
.magida-template--commissioned-art .magida-commission-mini-card:hover::before,
.magida-template--commissioned-art
	.magida-commission-gallery-card:hover::before,
.magida-template--commissioned-art
	.magida-commission-process-card:hover::before,
.magida-template--commissioned-art .magida-commission-form-card:hover::before {
	opacity: 1;
}

/* PASS 13.4: Makes gallery placeholders feel like approved artwork slots rather than empty blocks. */
.magida-template--commissioned-art
	.magida-commission-gallery-card__media::before,
.magida-template--commissioned-art
	.magida-commission-gallery-card__media::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.magida-template--commissioned-art
	.magida-commission-gallery-card__media::before {
	inset: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1.35rem;
	background:
		linear-gradient(
			90deg,
			transparent 49%,
			rgba(5, 223, 254, 0.1) 50%,
			transparent 51%
		),
		linear-gradient(
			180deg,
			transparent 49%,
			rgba(124, 106, 251, 0.1) 50%,
			transparent 51%
		);
	opacity: 0.38;
}

.magida-template--commissioned-art
	.magida-commission-gallery-card__media::after {
	left: 50%;
	top: 50%;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 999px;
	background: radial-gradient(
		circle,
		rgba(5, 223, 254, 0.22),
		transparent 64%
	);
	transform: translate(-50%, -50%);
	filter: blur(0.5px);
}

@media (max-width: 860px) {
	/* PASS 13.4: Reduce decorative density on smaller screens. */
	.magida-template--commissioned-art .magida-commission-hero::after,
	.magida-template--commissioned-art .magida-commission-gallery::after,
	.magida-template--commissioned-art .magida-commission-hero__visual::after {
		display: none;
	}

	.magida-template--commissioned-art .magida-commission-hero__visual::before {
		left: 14%;
		right: 14%;
		top: 22%;
		opacity: 0.38;
	}
}