/**
 * Grafixyy Card Identity
 * Experience: عمرك بالأرقام
 * Engine: age-in-numbers
 */

.grafixyy-home-door--time-orbit {
	border-color:
		rgba(139, 92, 246, 0.24);

	background:
		radial-gradient(
			circle at 18% 25%,
			rgba(34, 211, 238, 0.075),
			transparent 30%
		),
		radial-gradient(
			circle at 80% 65%,
			rgba(139, 92, 246, 0.17),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#090d24,
			#070919
		);
}


.grafixyy-home-door--time-orbit::before {
	content: "";

	position: absolute;

	width: 390px;
	height: 390px;

	top: 65px;
	left: 50%;

	transform:
		translateX(-50%);

	border:
		1px solid rgba(139, 92, 246, 0.08);

	border-radius: 50%;

	box-shadow:
		0 0 0 45px rgba(139, 92, 246, 0.025),
		0 0 0 90px rgba(34, 211, 238, 0.015);

	pointer-events: none;
}


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

	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 185px;
	height: 185px;

	border:
		1px solid rgba(139, 92, 246, 0.28);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.19),
			rgba(10, 14, 37, 0.95) 64%
		);

	box-shadow:
		0 0 52px rgba(139, 92, 246, 0.15);
}


.grafixyy-home-time-ring {
	position: absolute;

	inset: -32px;

	border:
		1px dashed rgba(34, 211, 238, 0.22);

	border-radius: 50%;

	animation:
		grafixyy-card-age-spin
		18s
		linear
		infinite;
}


.grafixyy-home-time-ring::after {
	content: "";

	position: absolute;

	top: 22px;
	right: 17px;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 17px rgba(34, 211, 238, 0.9);
}


.grafixyy-home-time-signal strong {
	color: #ffffff;

	font-size: 58px;
	font-weight: 900;
	line-height: 1;
}


.grafixyy-home-time-signal small {
	margin-top: 8px;

	color: #77dbe8;

	font-size: 12px;
	font-weight: 700;
}


.grafixyy-home-door--time-orbit
.grafixyy-home-door-visual--live-time {
	overflow: visible;

	padding:
		32px
		20px;
}


.grafixyy-home-door--time-orbit
.grafixyy-home-door-copy > p {
	color: #8abfdd;
}


.grafixyy-home-door--time-orbit
.grafixyy-home-door-link:hover {
	border-color:
		rgba(34, 211, 238, 0.28);
}


@keyframes grafixyy-card-age-spin {

	to {
		transform:
			rotate(360deg);
	}
}


@media (max-width: 700px) {

	.grafixyy-home-time-signal {
		width: 145px;
		height: 145px;
	}


	.grafixyy-home-time-ring {
		inset: -24px;

		animation-duration: 22s;
	}


	.grafixyy-home-time-signal strong {
		font-size: 45px;
	}


	.grafixyy-home-door--time-orbit
	.grafixyy-home-door-visual {
		min-height: 205px;

		padding:
			30px
			16px;
	}
}


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

	.grafixyy-home-time-ring {
		animation: none !important;
	}
}