/**
 * Grafixyy Shared Experience Card
 *
 * Used by discovery surfaces:
 * Homepage / Explore / Worlds.
 *
 * Experience-specific identity belongs in:
 * assets/css/experience-previews/{engine-key}.css
 */


/* ========================================
   BASE CARD
   ======================================== */

.grafixyy-home-door {
	position: relative;

	display: grid;

	grid-template-rows:
		auto
		minmax(225px, 1fr)
		auto
		auto;

	min-width: 0;
	min-height: 510px;

	padding: 22px;

	overflow: hidden;

	border:
		1px solid rgba(148, 163, 184, 0.15);

	border-radius: 28px;

	background:
		linear-gradient(
			145deg,
			rgba(15, 23, 42, 0.9),
			rgba(6, 10, 25, 0.97)
		);

	box-shadow:
		0 25px 70px rgba(0, 0, 0, 0.18);

	transition:
		transform 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease;
}


.grafixyy-home-door:hover {
	transform:
		translateY(-5px);

	border-color:
		rgba(148, 163, 184, 0.25);

	box-shadow:
		0 32px 80px rgba(0, 0, 0, 0.28);
}


/* ========================================
   TOP
   ======================================== */

.grafixyy-home-door-top {
	position: relative;
	z-index: 3;

	display: flex;

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

	gap: 15px;
}


.grafixyy-home-door-top > span {
	color: #d5dce8;

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


.grafixyy-home-door-top > small {
	padding:
		6px
		9px;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 999px;

	background:
		rgba(255, 255, 255, 0.035);

	color: #7e899c;

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


/* ========================================
   VISUAL AREA
   ======================================== */

.grafixyy-home-door-visual {
	position: relative;
	z-index: 2;

	display: flex;

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

	min-width: 0;

	margin:
		18px
		0
		8px;

	overflow: hidden;

	border-radius: 20px;
}


/* ========================================
   DEFAULT PREVIEW
   ======================================== */

.grafixyy-home-default-signal {
	display: flex;

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

	gap: 13px;

	width: 100%;
}


.grafixyy-home-default-signal span {
	display: flex;

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

	width: 62px;
	height: 62px;

	border:
		1px solid rgba(34, 211, 238, 0.18);

	border-radius: 18px;

	background:
		rgba(34, 211, 238, 0.04);

	color: #91dce7;

	font-size: 22px;
	font-weight: 850;
}


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

.grafixyy-home-door-copy {
	position: relative;
	z-index: 3;

	margin-top: 8px;
}


.grafixyy-home-door-copy > p {
	margin:
		0
		0
		8px;

	color: #6e7a8f;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 0.09em;
}


.grafixyy-home-door-copy h3 {
	margin:
		0
		0
		10px;

	color: #ffffff;

	font-size:
		clamp(25px, 2.4vw, 34px);

	font-weight: 850;
	line-height: 1.25;

	letter-spacing: -0.7px;
}


.grafixyy-home-door-copy > div {
	max-width: 510px;

	color: #9ca7b8;

	font-size: 14px;
	font-weight: 550;
	line-height: 1.8;
}


/* ========================================
   CTA
   ======================================== */

.grafixyy-home-door-link {
	position: relative;
	z-index: 4;

	display: flex;

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

	gap: 15px;

	width: 100%;

	margin-top: 20px;

	padding:
		13px
		15px;

	border:
		1px solid rgba(148, 163, 184, 0.14);

	border-radius: 13px;

	background:
		rgba(255, 255, 255, 0.035);

	color: #d9e0eb;

	font-size: 13px;
	font-weight: 750;

	text-decoration: none;

	transition:
		background-color 170ms ease,
		border-color 170ms ease,
		transform 170ms ease;
}


.grafixyy-home-door-link:visited {
	color: #d9e0eb;
}


.grafixyy-home-door-link:hover {
	transform:
		translateY(-1px);

	background:
		rgba(255, 255, 255, 0.065);

	color: #ffffff;
}


.grafixyy-home-door-link:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 820px) {

	.grafixyy-home-door {
		min-height: 470px;
	}
}


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

@media (max-width: 700px) {

	.grafixyy-home-door {
		grid-template-rows:
			auto
			minmax(190px, auto)
			auto
			auto;

		min-height: 0;

		padding: 17px;

		border-radius: 22px;

		transform: none;
	}


	.grafixyy-home-door:hover {
		transform: none;
	}


	.grafixyy-home-door-visual {
		margin:
			16px
			0
			5px;
	}


	.grafixyy-home-door-copy h3 {
		font-size: 26px;
	}


	.grafixyy-home-door-copy > div {
		font-size: 13px;
	}


	.grafixyy-home-door-link {
		margin-top: 17px;

		padding:
			12px
			13px;

		font-size: 12px;
	}
}


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

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

	.grafixyy-home-door,
	.grafixyy-home-door-link {
		transition: none;
	}
}