/*
 * Grafixyy Worlds Hub
 *
 * /worlds/
 *
 * Content styling only.
 * Global Header / Footer belong to the shared shell.
 */


/* ========================================
   PAGE
   ======================================== */

body.grafixyy-site .grafixyy-worlds-hub {
	--hub-accent: #22d3ee;

	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 85% 8%,
			rgba(34, 211, 238, 0.09),
			transparent 27%
		),
		radial-gradient(
			circle at 10% 45%,
			rgba(139, 92, 246, 0.09),
			transparent 30%
		),
		#050816;

	color: #f8fafc;
}


/* ========================================
   HERO
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-hero {
	position: relative;

	padding:
		clamp(72px, 9vw, 126px)
		24px
		clamp(60px, 8vw, 100px);

	overflow: hidden;

	border-bottom:
		1px solid rgba(148, 163, 184, 0.1);
}


body.grafixyy-site
.grafixyy-worlds-hub-hero::before {
	content: "";

	position: absolute;

	width: min(620px, 72vw);
	aspect-ratio: 1;

	top: 50%;
	left: -8%;

	transform:
		translateY(-50%);

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

	border-radius: 50%;

	box-shadow:
		inset 0 0 80px rgba(139, 92, 246, 0.025);

	pointer-events: none;
}


body.grafixyy-site
.grafixyy-worlds-hub-inner {
	position: relative;
	z-index: 1;

	width:
		min(
			1180px,
			100%
		);

	margin: 0 auto;
}


body.grafixyy-site
.grafixyy-worlds-hub-kicker {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	width: fit-content;

	margin:
		0
		0
		18px;

	padding:
		8px
		12px;

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

	border-radius: 999px;

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

	color: #67e8f9;

	font-size: 12px;
	font-weight: 850;
	line-height: 1;

	letter-spacing: 0.08em;
}


body.grafixyy-site
.grafixyy-worlds-hub-kicker::before {
	content: "";

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 14px rgba(34, 211, 238, 0.65);
}


body.grafixyy-site
.grafixyy-worlds-hub-hero h1 {
	max-width: 850px;

	margin:
		0
		0
		22px;

	color: #ffffff;

	font-size:
		clamp(42px, 6.5vw, 82px);

	font-weight: 900;
	line-height: 1.1;

	letter-spacing: -0.045em;
}


body.grafixyy-site
.grafixyy-worlds-hub-hero h1 span {
	display: block;

	color: #67e8f9;
}


body.grafixyy-site
.grafixyy-worlds-hub-lead {
	max-width: 690px;

	margin:
		0
		0
		26px;

	color: #aeb8ca;

	font-size:
		clamp(16px, 1.8vw, 20px);

	font-weight: 500;
	line-height: 1.95;
}


body.grafixyy-site
.grafixyy-worlds-hub-count {
	display: inline-flex;

	align-items: baseline;

	gap: 8px;

	margin: 0;

	padding:
		9px
		13px;

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

	border-radius: 999px;

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

	color: #d8e1ed;

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


body.grafixyy-site
.grafixyy-worlds-hub-count strong {
	color: #67e8f9;

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


/* ========================================
   CATALOGUE
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-catalog {
	position: relative;

	padding:
		clamp(62px, 8vw, 100px)
		24px
		clamp(70px, 9vw, 112px);
}


body.grafixyy-site
.grafixyy-worlds-hub-heading {
	margin:
		0
		0
		34px;
}


body.grafixyy-site
.grafixyy-worlds-hub-heading p {
	margin:
		0
		0
		8px;

	color: #67e8f9;

	font-size: 12px;
	font-weight: 850;

	letter-spacing: 0.08em;
}


body.grafixyy-site
.grafixyy-worlds-hub-heading h2 {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(30px, 4vw, 48px);

	font-weight: 900;
	line-height: 1.15;
}


/* ========================================
   WORLD GRID
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 18px;

	width: 100%;
}


/* ========================================
   WORLD CARD
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-card {
	--world-color: #22d3ee;
	--world-rgb: 34, 211, 238;

	position: relative;

	display: flex;

	flex-direction: column;

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

	padding:
		24px;

	overflow: hidden;

	border:
		1px solid rgba(var(--world-rgb), 0.13);

	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			rgba(var(--world-rgb), 0.065),
			rgba(255, 255, 255, 0.018) 45%,
			rgba(1, 4, 15, 0.58)
		);

	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.14);

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


/* ========================================
   WORLD COLORS
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="life"] {
	--world-color: #a78bfa;
	--world-rgb: 167, 139, 250;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="space"] {
	--world-color: #38bdf8;
	--world-rgb: 56, 189, 248;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="numbers"] {
	--world-color: #b7f34a;
	--world-rgb: 183, 243, 74;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="money-time"] {
	--world-color: #f5b942;
	--world-rgb: 245, 185, 66;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="technology"] {
	--world-color: #60a5fa;
	--world-rgb: 96, 165, 250;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="compare"] {
	--world-color: #fb7185;
	--world-rgb: 251, 113, 133;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="earth"] {
	--world-color: #4ade80;
	--world-rgb: 74, 222, 128;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="measure"] {
	--world-color: #2dd4bf;
	--world-rgb: 45, 212, 191;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="visual"] {
	--world-color: #f472b6;
	--world-rgb: 244, 114, 182;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="text"] {
	--world-color: #c084fc;
	--world-rgb: 192, 132, 252;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="everyday"] {
	--world-color: #facc15;
	--world-rgb: 250, 204, 21;
}

body.grafixyy-site
.grafixyy-worlds-hub-card[data-world="fun"] {
	--world-color: #fb4f8f;
	--world-rgb: 251, 79, 143;
}


/* ========================================
   OPEN / WAITING
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-card.is-open {
	border-color:
		rgba(var(--world-rgb), 0.26);

	background:
		linear-gradient(
			145deg,
			rgba(var(--world-rgb), 0.11),
			rgba(255, 255, 255, 0.022) 48%,
			rgba(1, 4, 15, 0.62)
		);
}


body.grafixyy-site
.grafixyy-worlds-hub-card.is-waiting {
	opacity: 0.72;
}


body.grafixyy-site
.grafixyy-worlds-hub-card.is-open:hover {
	transform:
		translateY(-3px);

	border-color:
		rgba(var(--world-rgb), 0.42);
}


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

body.grafixyy-site
.grafixyy-worlds-hub-signal {
	display: flex;

	align-items: center;

	height: 34px;

	margin-bottom: 20px;
}


body.grafixyy-site
.grafixyy-worlds-hub-signal span {
	display: block;

	width: 10px;
	height: 10px;

	border-radius: 50%;

	background:
		var(--world-color);

	box-shadow:
		0 0 18px rgba(var(--world-rgb), 0.52);
}


body.grafixyy-site
.grafixyy-worlds-hub-card.is-waiting
.grafixyy-worlds-hub-signal span {
	width: 8px;
	height: 8px;

	opacity: 0.55;

	box-shadow: none;
}


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

body.grafixyy-site
.grafixyy-worlds-hub-card-copy {
	flex: 1;
}


body.grafixyy-site
.grafixyy-worlds-hub-card h3 {
	margin:
		0
		0
		13px;

	color: #ffffff;

	font-size:
		clamp(21px, 2vw, 27px);

	font-weight: 850;
	line-height: 1.3;
}


body.grafixyy-site
.grafixyy-worlds-hub-card-copy p {
	margin: 0;

	color: #9ca8ba;

	font-size: 13px;
	font-weight: 500;
	line-height: 1.9;
}


/* ========================================
   STATUS
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-card-status {
	display: flex;

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

	gap: 12px;

	margin-top: 26px;

	padding-top: 18px;

	border-top:
		1px solid rgba(var(--world-rgb), 0.1);
}


body.grafixyy-site
.grafixyy-worlds-hub-card-status > span {
	color: var(--world-color);

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


body.grafixyy-site
.grafixyy-worlds-hub-card-status a {
	display: inline-flex;

	align-items: center;

	gap: 6px;

	padding:
		8px
		10px;

	border:
		1px solid rgba(var(--world-rgb), 0.22);

	border-radius: 9px;

	color: #ffffff;

	background:
		rgba(var(--world-rgb), 0.09);

	text-decoration: none;

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


body.grafixyy-site
.grafixyy-worlds-hub-card-status small {
	color: #687386;

	font-size: 10px;
	font-weight: 600;
}


/* ========================================
   BOTTOM EXPLORE
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-explore {
	display: flex;

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

	flex-wrap: wrap;

	gap: 16px;

	width:
		min(
			1180px,
			calc(100% - 48px)
		);

	margin:
		0 auto
		clamp(72px, 9vw, 110px);

	padding:
		28px;

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

	border-radius: 22px;

	background:
		rgba(255, 255, 255, 0.025);
}


body.grafixyy-site
.grafixyy-worlds-hub-explore p {
	margin: 0;

	color: #aab5c8;

	font-size: 14px;
	font-weight: 600;
}


body.grafixyy-site
.grafixyy-worlds-hub-explore a {
	display: inline-flex;

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

	min-height: 44px;

	padding:
		9px
		15px;

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

	border-radius: 11px;

	color: #ffffff;

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

	text-decoration: none;

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

	transition:
		transform 160ms ease,
		background-color 160ms ease;
}


body.grafixyy-site
.grafixyy-worlds-hub-explore a:hover {
	transform: translateY(-1px);

	background:
		rgba(34, 211, 238, 0.13);
}


/* ========================================
   FOCUS
   ======================================== */

body.grafixyy-site
.grafixyy-worlds-hub-card-status a:focus-visible,
body.grafixyy-site
.grafixyy-worlds-hub-explore a:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


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

@media (max-width: 900px) {

	body.grafixyy-site
	.grafixyy-worlds-hub-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


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

@media (max-width: 620px) {

	body.grafixyy-site
	.grafixyy-worlds-hub-hero {
		padding:
			58px
			16px
			54px;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-hero h1 {
		font-size:
			clamp(38px, 12vw, 55px);
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-catalog {
		padding:
			52px
			14px
			70px;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-grid {
		grid-template-columns: 1fr;

		gap: 15px;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-card {
		min-height: 270px;

		padding:
			21px;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-explore {
		align-items: stretch;

		flex-direction: column;

		width:
			calc(100% - 28px);

		padding:
			20px;

		text-align: center;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-explore a {
		width: 100%;
	}
}


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

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

	body.grafixyy-site
	.grafixyy-worlds-hub-card,
	body.grafixyy-site
	.grafixyy-worlds-hub-explore a {
		transition: none;
	}
}

/* ========================================
   MOBILE HUB REFINEMENTS
   ======================================== */

@media (max-width: 620px) {

	/*
	 * Give the second Hero line breathing room.
	 */
	body.grafixyy-site
.grafixyy-worlds-hub-hero h1 span {
	margin-top: 8px;

	font-size:
		clamp(25px, 7.8vw, 38px);

	white-space: nowrap;

	letter-spacing: -0.03em;
}


	/*
	 * Make the open-World action a clear,
	 * comfortable mobile button.
	 */
	body.grafixyy-site
	.grafixyy-worlds-hub-card-status a {
		min-height: 44px;

		padding:
			10px
			14px;

		border-radius: 11px;

		font-size: 12px;
	}


	body.grafixyy-site
	.grafixyy-worlds-hub-card-status {
		gap: 14px;
	}
}