/**
 * Grafixyy Card Identity
 * Experience: تمنها من شغلك
 * Engine: price-in-work-hours
 */

.grafixyy-home-door--price-time {
	--card-pt-green: #62ff82;
	--card-pt-amber: #ffb52d;

	border-color:
		rgba(98, 255, 130, 0.22);

	background:
		radial-gradient(
			circle at 10% 18%,
			rgba(98, 255, 130, 0.1),
			transparent 30%
		),
		radial-gradient(
			circle at 90% 65%,
			rgba(255, 181, 45, 0.1),
			transparent 34%
		),
		linear-gradient(
			145deg,
			#071009,
			#0a0e09 52%,
			#151006
		);
}


.grafixyy-home-door--price-time
.grafixyy-home-door-visual--price-to-time {
	border:
		1px solid
		rgba(98, 255, 130, 0.1);

	background:
		linear-gradient(
			105deg,
			rgba(7, 20, 10, 0.82),
			rgba(20, 14, 6, 0.82)
		);
}


/* ========================================
   SIGNAL
   ======================================== */

.grafixyy-home-price-time-signal {
	width: 100%;

	padding:
		20px
		18px;
}


.grafixyy-home-price-time-status {
	display: flex;

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

	gap: 9px;

	color: #7b877d;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;
	font-weight: 900;

	letter-spacing: 0.08em;

	direction: ltr;
}


.grafixyy-home-price-time-status
span:first-child {
	color: #71ff8e;
}


.grafixyy-home-price-time-status
span:last-child {
	color: #ffc45a;
}


.grafixyy-home-price-time-status strong {
	color: #d9e2da;
}


/* ========================================
   CONVERSION
   ======================================== */

.grafixyy-home-price-time-conversion {
	display: grid;

	grid-template-columns:
		minmax(70px, 1fr)
		minmax(65px, 0.65fr)
		minmax(70px, 1fr);

	align-items: center;

	gap: 10px;

	margin-top: 23px;
}


/* Money */

.grafixyy-home-price-time-money {
	display: flex;

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


.grafixyy-home-price-time-money span {
	font-size: 30px;
}


.grafixyy-home-price-time-money strong {
	margin-top: 4px;

	color: #62ff82;

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


/* Energy stream */

.grafixyy-home-price-time-stream {
	position: relative;

	height: 42px;

	overflow: hidden;
}


.grafixyy-home-price-time-stream::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 4%;
	right: 4%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#62ff82,
			#c5dc5a,
			#ffb52d
		);
}


.grafixyy-home-price-time-stream > span {
	position: absolute;

	top: 50%;
	left: 4%;

	width: 8px;
	height: 8px;

	transform:
		translateY(-50%);

	border-radius: 50%;

	background: #62ff82;

	box-shadow:
		0 0 10px currentColor;

	animation:
		grafixyy-card-price-stream
		3.4s
		linear
		infinite;
}


/* ========================================
   CLOCK
   ======================================== */

.grafixyy-home-price-time-clock {
	position: relative;

	width: 62px;
	height: 62px;

	margin: 0 auto;

	border:
		2px solid #ffb52d;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#171108,
			#080b08 72%
		);

	box-shadow:
		0 0 20px
		rgba(255, 181, 45, 0.12);
}


.grafixyy-home-price-time-hand {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 3px;
	height: 20px;

	border-radius: 999px;

	background: #ffd05b;

	transform-origin:
		50% 100%;

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

	animation:
		grafixyy-card-price-clock
		6s
		linear
		infinite;
}


.grafixyy-home-price-time-dot {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 8px;
	height: 8px;

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

	border-radius: 50%;

	background: #62ff82;

	box-shadow:
		0 0 10px
		rgba(98, 255, 130, 0.75);
}


/* ========================================
   READOUT
   ======================================== */

.grafixyy-home-price-time-readout {
	margin-top: 18px;

	text-align: center;
}


.grafixyy-home-price-time-readout strong {
	display: block;

	color: #ffc45a;

	font-size: 24px;
	font-weight: 900;
}


.grafixyy-home-price-time-readout small {
	display: block;

	margin-top: 6px;

	color: #a7afa7;

	font-size: 11px;
	font-weight: 650;
}


/* ========================================
   COPY
   ======================================== */

.grafixyy-home-door--price-time
.grafixyy-home-door-copy > p {
	color: #82a987;
}


.grafixyy-home-door--price-time
.grafixyy-home-door-copy h3 {
	color: transparent;

	background:
		linear-gradient(
			100deg,
			#62ff82,
			#c0e85f 50%,
			#ffb52d
		);

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

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


.grafixyy-home-door--price-time
.grafixyy-home-door-link:hover {
	border-color:
		rgba(98, 255, 130, 0.35);
}


/* ========================================
   MOTION
   ======================================== */

@keyframes grafixyy-card-price-stream {

	0% {
		left: 4%;
		opacity: 0;
		background: #62ff82;
	}

	15% {
		opacity: 1;
	}

	75% {
		background: #ffd05b;
	}

	88% {
		opacity: 1;
	}

	100% {
		left: 86%;
		opacity: 0;
		background: #ff9f1c;
	}
}


@keyframes grafixyy-card-price-clock {

	from {
		transform:
			translate(-50%, -100%)
			rotate(0deg);
	}

	to {
		transform:
			translate(-50%, -100%)
			rotate(360deg);
	}
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {

	.grafixyy-home-price-time-signal {
		padding:
			17px
			13px;
	}


	.grafixyy-home-price-time-conversion {
		gap: 6px;
	}


	.grafixyy-home-price-time-stream > span {
		animation-duration: 5s;
	}


	.grafixyy-home-price-time-hand {
		animation-duration: 8s;
	}
}


/* ========================================
   REDUCED MOTION
   ======================================== */

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

	.grafixyy-home-price-time-stream > span,
	.grafixyy-home-price-time-hand {
		animation: none !important;
	}
}