/**
 * Grafixyy Card Identity
 * Experience: فين نبتون؟
 * Engine: solar-system-scale
 */

.grafixyy-home-door--cosmic-scale {
	--home-cosmic-gold: #ffc653;
	--home-cosmic-orange: #ff7547;
	--home-cosmic-cyan: #55dcff;
	--home-cosmic-blue: #7188ff;

	color: #f7f9ff;

	border-color:
		rgba(101, 126, 255, 0.25);

	background:
		radial-gradient(
			circle at 7% 10%,
			rgba(255, 181, 46, 0.14),
			transparent 27%
		),
		radial-gradient(
			circle at 94% 45%,
			rgba(53, 82, 255, 0.22),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#090b18 0%,
			#030510 52%,
			#080d2b 100%
		);

	box-shadow:
		inset 0 1px 0
			rgba(255, 255, 255, 0.035),
		0 24px 70px
			rgba(0, 0, 0, 0.25);
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-top > span {
	color: #e1e7fa;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-top > small {
	color: #9eb0ff;

	border-color:
		rgba(111, 137, 255, 0.22);

	background:
		rgba(61, 79, 177, 0.1);
}


/* Visual window */

.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-visual--orbital-route {
	position: relative;

	overflow: hidden;

	border:
		1px solid
		rgba(104, 128, 255, 0.14);

	border-radius: 23px;

	background:
		radial-gradient(
			circle at 0% 48%,
			rgba(255, 181, 47, 0.11),
			transparent 28%
		),
		radial-gradient(
			circle at 100% 50%,
			rgba(57, 85, 255, 0.17),
			transparent 32%
		),
		rgba(1, 3, 11, 0.54);
}


.grafixyy-home-cosmic-signal {
	position: relative;

	min-height: 215px;

	padding:
		20px
		18px;

	direction: ltr;
}


.grafixyy-home-cosmic-signal::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.62)
				0 1px,
			transparent 1.25px
		),
		radial-gradient(
			circle,
			rgba(110, 145, 255, 0.62)
				0 1px,
			transparent 1.2px
		);

	background-size:
		83px 83px,
		129px 129px;

	background-position:
		13px 15px,
		47px 64px;

	opacity: 0.13;
}


/* Status */

.grafixyy-home-cosmic-status {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		1fr
		auto
		1fr;

	align-items: center;

	gap: 8px;
}


.grafixyy-home-cosmic-status span {
	color: #64728f;

	font-size: 0.54rem;
	font-weight: 900;

	letter-spacing: 0.09em;
}


.grafixyy-home-cosmic-status
span:last-child {
	text-align: right;
}


.grafixyy-home-cosmic-status strong {
	padding:
		5px
		8px;

	border:
		1px solid
		rgba(104, 131, 255, 0.18);

	border-radius: 999px;

	color: #9fb1ff;

	background:
		rgba(59, 77, 173, 0.09);

	font-size: 0.59rem;
	font-weight: 900;
}


/* Route */

.grafixyy-home-cosmic-route {
	position: relative;
	z-index: 2;

	height: 76px;

	margin-top: 15px;
}


.grafixyy-home-cosmic-line {
	position: absolute;

	left: 0;
	right: 0;
	top: 50%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#ffc653 0%,
			#fff0a3 15%,
			#75e4ed 62%,
			#7188ff 100%
		);

	box-shadow:
		0 0 9px
		rgba(88, 194, 255, 0.2);
}


.grafixyy-home-cosmic-object {
	position: absolute;
	z-index: 3;

	top: 50%;

	display: block;

	width: 8px;
	height: 8px;

	transform:
		translate(-50%, -50%);

	border:
		2px solid #030510;

	border-radius: 50%;

	background: #8793ad;
}


.grafixyy-home-cosmic-sun {
	left: 0;

	width: 21px;
	height: 21px;

	transform:
		translate(0, -50%);

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff7b0,
			#ffc43f 44%,
			#ff7138
		);

	box-shadow:
		0 0 14px
		rgba(255, 193, 56, 0.7);
}


.grafixyy-home-cosmic-earth {
	left: 3.33%;

	background: #55dcff;

	box-shadow:
		0 0 9px
		rgba(75, 216, 255, 0.6);
}


.grafixyy-home-cosmic-jupiter {
	left: 17.31%;

	width: 13px;
	height: 13px;

	background: #d5aa84;
}


.grafixyy-home-cosmic-saturn {
	left: 31.87%;

	width: 11px;
	height: 11px;

	background: #e1c575;
}


.grafixyy-home-cosmic-uranus {
	left: 63.82%;

	width: 11px;
	height: 11px;

	background: #80e1e7;
}


.grafixyy-home-cosmic-neptune {
	left: 100%;

	width: 15px;
	height: 15px;

	transform:
		translate(-100%, -50%);

	background:
		radial-gradient(
			circle at 35% 30%,
			#9bb1ff,
			#4c70ee 57%,
			#293ea6
		);

	box-shadow:
		0 0 15px
		rgba(75, 104, 255, 0.72);
}


/* Photon */

.grafixyy-home-cosmic-photon {
	position: absolute;
	z-index: 5;

	left: 0;
	top: 50%;

	width: 11px;
	height: 11px;

	transform:
		translate(0, -50%);

	border-radius: 50%;

	background: #fff4a4;

	box-shadow:
		0 0 7px #fff4a4,
		0 0 18px
		rgba(255, 221, 74, 0.7);

	animation:
		grafixyy-card-solar-photon
		6.2s
		cubic-bezier(
			0.2,
			0.75,
			0.2,
			1
		)
		infinite;
}


/* Readout */

.grafixyy-home-cosmic-readout {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		auto
		auto;

	align-items: center;
	justify-content: center;

	column-gap: 9px;
	row-gap: 1px;

	margin-top: 3px;

	text-align: center;
}


.grafixyy-home-cosmic-readout span {
	color: #697795;

	font-size: 0.5rem;
	font-weight: 900;

	letter-spacing: 0.09em;
}


.grafixyy-home-cosmic-readout strong {
	font-size: 1.22rem;
	font-weight: 950;

	background:
		linear-gradient(
			90deg,
			#fff2a3,
			#ffffff 45%,
			#84e9ff
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color:
		transparent;
}


.grafixyy-home-cosmic-readout small {
	grid-column: 1 / -1;

	color: #a1aecb;

	font-size: 0.64rem;
	font-weight: 700;

	direction: rtl;
}


/* Copy */

.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy > p {
	color: #8fa4f3;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy h3 {
	color: #ffffff;

	background:
		linear-gradient(
			105deg,
			#ffd15d 0%,
			#ff7647 26%,
			#fff7df 47%,
			#a489ff 69%,
			#52dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color:
		transparent;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy > div {
	color: #a5b2cf;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-link {
	border-color:
		rgba(103, 132, 255, 0.2);

	color: #f7f8ff;

	background:
		linear-gradient(
			90deg,
			rgba(255, 184, 50, 0.055),
			rgba(70, 91, 210, 0.11)
		);
}


/* Motion */

@keyframes grafixyy-card-solar-photon {

	0% {
		left: 0;
		opacity: 0;
	}

	7% {
		opacity: 1;
	}

	82% {
		left:
			calc(100% - 11px);

		opacity: 1;
	}

	88%,
	100% {
		left:
			calc(100% - 11px);

		opacity: 0;
	}
}


/* Mobile */

@media (max-width: 720px) {

	.grafixyy-home-cosmic-signal {
		min-height: 190px;

		padding:
			17px
			13px;
	}


	.grafixyy-home-cosmic-route {
		height: 68px;

		margin-top: 12px;
	}


	.grafixyy-home-cosmic-photon {
		animation-duration:
			7.5s;
	}


	.grafixyy-home-cosmic-readout strong {
		font-size: 1.08rem;
	}
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

	.grafixyy-home-cosmic-photon {
		left: 50%;

		animation: none;
	}
}