:root {
	--chaos-bg: #070b12;
	--chaos-bg-deep: #03060a;
	--chaos-text: #ffffff;
	--chaos-muted: rgba(255, 255, 255, 0.66);
	--chaos-line: rgba(255, 255, 255, 0.14);
	--chaos-line-strong: rgba(255, 255, 255, 0.24);
	--chaos-orange: #ff5b13;
	--chaos-orange-soft: rgba(255, 91, 19, 0.22);
	--chaos-cyan: #36c7e8;
	--chaos-cyan-soft: rgba(54, 199, 232, 0.15);
	--chaos-glass: rgba(7, 12, 20, 0.58);
}

* {
	box-sizing: border-box;
}

html,
body.chaos-page {
	width: 100%;
	min-height: 100%;
	margin: 0;
}

body.chaos-page {
	min-height: 100svh;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	color: var(--chaos-text);
	background:
		radial-gradient(circle at 50% -10%, rgba(255, 91, 19, 0.28), transparent 30%),
		radial-gradient(circle at 86% 20%, rgba(54, 199, 232, 0.16), transparent 30%),
		linear-gradient(145deg, var(--chaos-bg-deep) 0%, var(--chaos-bg) 44%, #111d2b 100%);
	overflow-x: hidden;
}

body.chaos-page::selection {
	background: rgba(255, 91, 19, 0.38);
	color: #ffffff;
}

body.chaos-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -4;
	background:
		linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.92), transparent 76%);
	pointer-events: none;
}

body.chaos-page::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.56)),
		radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 0, 0, 0.52) 100%);
	pointer-events: none;
}


/* Chaos page keeps the same header and footer used in index.html. */
.chaos-page .header {
	position: relative;
	z-index: 20;
}

.chaos-page .footer {
	position: relative;
	z-index: 20;
}

.chaos-page .header a,
.chaos-page .footer a {
	text-decoration: none;
}

.chaos-hero {
	position: relative;
	isolation: isolate;
	min-height: calc(100svh - 190px);
	display: grid;
	place-items: center;
	padding: clamp(45px, 5.5vw, 66px) clamp(16px, 4vw, 58px);
	overflow: hidden;
}

.chaos-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 92px 92px;
	mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.86), transparent 72%);
	opacity: 0.8;
}

.chaos-hero__glow {
	position: absolute;
	z-index: -2;
	border-radius: 999px;
	filter: blur(14px);
	pointer-events: none;
}

.chaos-hero__glow--one {
	width: clamp(260px, 34vw, 560px);
	height: clamp(260px, 34vw, 560px);
	left: clamp(-210px, -12vw, -80px);
	bottom: clamp(20px, 10vw, 120px);
	background: var(--chaos-orange-soft);
}

.chaos-hero__glow--two {
	width: clamp(260px, 32vw, 540px);
	height: clamp(260px, 32vw, 540px);
	right: clamp(-210px, -12vw, -80px);
	top: clamp(26px, 9vw, 110px);
	background: var(--chaos-cyan-soft);
}

.chaos-hero__visual {
	position: relative;
	width: min(100%, 1320px);
	min-height: clamp(430px, 64vw, 760px);
	display: grid;
	place-items: center;
	padding: clamp(20px, 4.8vw, 62px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: clamp(28px, 5vw, 62px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.090), rgba(255, 255, 255, 0.024)),
		radial-gradient(circle at 50% 44%, rgba(255, 91, 19, 0.16), transparent 48%),
		rgba(3, 7, 12, 0.42);
	box-shadow:
		0 42px 130px rgba(0, 0, 0, 0.44),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
}

.chaos-hero__visual::before {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background:
		linear-gradient(135deg, rgba(255, 91, 19, 0.16), transparent 28%),
		linear-gradient(315deg, rgba(54, 199, 232, 0.12), transparent 32%);
	pointer-events: none;
}

.chaos-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.10) 46%, transparent 54%);
	transform: translateX(-120%) skewX(-16deg);
	animation: chaos-shine 7s ease-in-out infinite;
	pointer-events: none;
}

.chaos-hero__halo {
	position: absolute;
	width: min(102vw, 1030px);
	aspect-ratio: 1 / 0.62;
	border-radius: 50%;
	background:
		radial-gradient(ellipse at center, rgba(255, 91, 19, 0.28), transparent 57%),
		radial-gradient(ellipse at center, rgba(54, 199, 232, 0.15), transparent 68%);
	filter: blur(14px);
	transform: translateY(6%);
	pointer-events: none;
}

.chaos-hero__orbit {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	box-shadow: inset 0 0 36px rgba(255, 255, 255, 0.035);
	pointer-events: none;
}

.chaos-hero__orbit--outer {
	width: min(118vw, 1080px);
	aspect-ratio: 1 / 0.54;
	transform: rotate(-6deg);
}

.chaos-hero__orbit--inner {
	width: min(92vw, 760px);
	aspect-ratio: 1 / 0.52;
	transform: rotate(8deg);
	border-color: rgba(255, 91, 19, 0.18);
}

.chaos-hero__image {
	position: relative;
	z-index: 2;
	display: block;
	width: min(108%, 1120px);
	max-width: none;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.54));
}

@keyframes chaos-shine {
	0%, 62% {
		transform: translateX(-120%) skewX(-16deg);
		opacity: 0;
	}
	72% {
		opacity: 0.65;
	}
	100% {
		transform: translateX(120%) skewX(-16deg);
		opacity: 0;
	}
}

@media (max-width: 820px) {

	.chaos-hero {
		padding: 88px 12px 96px;
	}

	.chaos-hero__visual {
		min-height: min(68svh, 620px);
		padding: 22px;
		border-radius: 30px;
	}

	.chaos-hero__image {
		width: min(132%, 760px);
	}
}

@media (max-width: 520px) {

	.chaos-hero {
		padding: 86px 10px 98px;
	}

	.chaos-hero__visual {
		min-height: min(64svh, 520px);
		padding: 14px;
		border-radius: 24px;
	}

	.chaos-hero__image {
		width: min(160%, 620px);
	}
}