@font-face {
	font-family: 'ClashDisplay';
	font-display: fallback;
	src: url('fonts/ClashDisplay-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 75% 125%;
	unicode-range: U+0020-007F,
		/* Basic Latin */
		U+0080-00FF,
		/* Latin-1 Supplement */
		U+0100-017F,
		/* Latin Extended-A */
		U+0180-024F;
	/* Latin Extended-B */
}

/* Defaults */
:root {
	--font-family: -apple-system, system-ui, sans-serif;
	--font-family-display: 'ClashDisplay', var(--font-family);
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #dad8d8;

	--white: var(--color-gray-20);
	--black: #0e1111;
	--red: #bf222c;
	--purple: #5c19b3;
	--blue: #262bba;

	--background-color: var(--black);

	--text-color: var(--color-gray-90);
	--text-color-link: var(--black);

	--bezier-eioq: cubic-bezier(0.455, 0.030, 0.515, 0.955);
	--bezier-eioc: cubic-bezier(0.545, 0.045, 0.455, 1.000);

	--bezier: var(--bezier-eioc);

	--spacer-1: 8px;
	--spacer-2: 16px;

	--stack-gap: var(--spacer-2);
}

/* Global stylesheet */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--black);
}

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.4s;
	isolation: isolate;
}

html {
	overflow-y: scroll;
}

h1,
h2,
h3 {
	font-family: var(--font-family-display);
}

h1 {
	font-size: inherit;
}

h2 {
	letter-spacing: 2px;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

button {
	cursor: pointer;
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: 1.5rem;
	border: 2px solid var(--blue);
	padding: var(--spacer-1);
	background-color: var(--blue);
	color: var(--white);
	transition: background-color 0.2s;
}

button:hover {
	mix-blend-mode: difference;
}

input {
	font-family: var(--font-family-display);
	font-weight: 500;
	padding: var(--spacer-1);
	border-radius: 0;
	font-size: 1.5rem;
	border: 2px solid var(--black);
	flex: 1;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap);
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

p:last-child {
	margin-bottom: 0;
}

p,
label {
	line-height: 1.5;
	margin: 0;
}


.main-content p,
label {
	font-size: 1.2rem;
}

li {
	line-height: 1.5;
}

a[href] {
	color: var(--white);
	mix-blend-mode: difference;
}

main :first-child {
	margin-top: 0;
}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.children-content {
	max-width: 70ch;
	transform: translate(0px, 0px);
	margin-inline: auto;
}

.main-content {
	padding: 16px;
}

.sidebar {
	display: none;
}

@media (min-width: 700px) {
	.grid {
		grid-template-columns: 250px 1fr;
	}

	.sidebar {
		display: block;
	}
}


.expander-wrapper {
	position: relative;
}

.expander {
	background: var(--background-color);
	position: absolute;
	inset: 0;
	opacity: 1;
	transform: translateY(16px);
	z-index: 1;
	height: min-content;
}

.expander-content {
	background-color: white;
	color: var(--black);
	mix-blend-mode: difference;
}

.expander-content>* {
	padding-top: 1rem;
	padding: var(--spacer-2);
}


section {
	margin-bottom: 4rem;
}


.content-title {
	align-self: center;
}

.row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.content-grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 32px;
	align-items: end;
}

.column {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.subtitle {
	margin-bottom: 0.6rem;
	font-family: var(--font-family-display);
	font-size: 1.2rem;
	font-weight: 500;
}

.content-list {
	cursor: pointer;
	background-color: transparent;
	border: none;
	margin: 0;
	padding: 0;
	text-align: inherit;
	font: inherit;
	border-radius: 0;
	position: relative;
	background: var(--black);
}

.content-list::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background: var(--white);
	opacity: 0;
	transition: opacity 0.1s;
}

.content-list:hover::after {
	opacity: 0.1;
}

.content-list:active::after {
	opacity: 0.4;
}

.content-list.selected::after {
	opacity: 1;
}

.content-list .square>p {
	opacity: 0.7;
}

.content-list:hover .square>p,
.content-list:focus .square>p {
	opacity: 1;
}

.row .engine {
	font-family: var(--font-family-display);
	font-weight: bold;
	margin-bottom: 0;
	align-self: center;
}

.expander-content .property {
	font-family: monospace;
}

.expander-content .engine {
	text-transform: capitalize;
}


.content-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	border: 2px solid var(--white);
}

.content-list .square.layout.is-valid-true {
	--square-bg: var(--red);
}

.content-list .square.paint.is-valid-true {
	--square-bg: var(--purple);
}

.content-list .square.composite.is-valid-true {
	--square-bg: var(--blue);
}


.key-grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 32px;
	align-items: center;
	justify-content: flex-start;
	padding-block: 64px;
}

.square {
	width: 32px;
	aspect-ratio: 1/1;
	background: var(--square-bg);
	font-weight: 600;
	line-height: 1rem;
	font-size: 1.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.key-item>.square {
	border: 2px solid white;
}

.key-item {
	display: flex;
	gap: 8px;
	align-items: center;
}

.key-item:nth-child(1) {
	--square-bg: var(--red);
}

.key-item:nth-child(2) {
	--square-bg: var(--purple);
}

.key-item:nth-child(3) {
	--square-bg: var(--blue);
}

p.key-engine {
	font-size: 1.9rem;
	font-weight: bold;
	font-family: var(--font-family-display);
}

.inverted-border-wrapper {
	position: relative;
	width: 100%;
	padding: 32px;
	font-size: clamp(1.6rem, 1.2rem + 6vw, 5.8147rem);
}

.inverted-border-container {
	margin-inline: auto;
	border: 4px solid var(--color-gray-20);
	height: 100%;
	transform: translate(0px, 0px);
	width: 160px;
	aspect-ratio: 1/2;
	display: flex;
	flex-direction: column;
	opacity: 0;
}

.inverted-border-container>div:nth-child(1) {
	flex: 1;
	background-color: var(--red);
}

.inverted-border-container>div:nth-child(2) {
	flex: 1;
	background-color: var(--purple);
}

.inverted-border-container>div:nth-child(3) {
	flex: 1;
	background-color: var(--blue);
}

.inverted-border-title {
	position: absolute;
	font-family: var(--font-family-display);
	left: 50%;
	top: 0;
	height: 100%;
	display: flex;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	transform-origin: 0%;
	font-size: 1.2em;
	color: var(--color-gray-20);
	transition: transform 0.4s;
	transform: scale(1) translate(-50%);
}

.inverted-border-wrapper:has(.inverted-border-title.two:hover) .inverted-border-title.one {
	transform: scale(0.92) translateX(-50%);
}

.inverted-border-title.one {
	mix-blend-mode: difference;
}

.inverted-border-title.two {
	transform: scale(1.02) translateX(-50%);
}

.inverted-border-title.two:hover {
	transform: scale(1.1) translateX(-50%);
}

.inverted-border-title {
	margin: 0;
}

@media (min-width: 700px) {
	.inverted-border-container {
		width: min(100%, 250px);
	}
}

.reveal-wrapper {
	position: fixed;
	inset: 0;
	left: 8px;
	display: flex;
	animation: content-reveal 1s forwards var(--bezier);
	width: clamp(250px, 30vw, 500px);
	white-space: nowrap;
	font-size: 16px;
}

.reveal-wrapper-background {
	position: fixed;
	width: 100%;
	inset: 0;
	background: var(--background-color);
	animation: content-reveal 1s forwards var(--bezier);
	transition: background-color 0.3s;
}

.reveal-wrapper .text {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-weight: bold;
}

.reveal-wrapper p {
	font-family: var(--font-family-display);
}

.content-exit-animation {
	animation: content-exit 1s forwards var(--bezier);
}

.email-wrapper {
	container-type: inline-size;
	background: white;
	padding: var(--spacer-2);
	color: var(--black);
	margin-bottom: 4rem;
	width: min(100%, 70ch);
	display: flex;
	flex-direction: column;
	gap: var(--spacer-1);
}

label {
	display: block;
}

.email-wrapper>form>.row {
	gap: 0;
}

.email-wrapper>form>.row {
	display: flex;
	flex-direction: column;
}

.email-wrapper button {
	border-top: none;
}

.email-wrapper input {
	border-bottom: none;
}

.text {
	width: 100%;
}

.text-fit-content {
	font-family: var(--font-family-display);
}

.mobile-bg {
	position: fixed;
	inset: 0;
	transition: background-color 0.3s;
}

@container (min-width: 500px) {
	.email-wrapper>form>.row {
		flex-direction: row;
	}

	.email-wrapper button {
		border-top: 2px solid var(--blue);
		border-left: none;
	}

	.email-wrapper input {
		border-bottom: 2px solid var(--black);
		border-right: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal-wrapper {
		animation: fade-in 0.5s forwards;
	}

	.reveal-wrapper-background {
		animation: fade-in 0.5s forwards;
	}

	.content-exit-animation {
		animation: fade-out 0.5s forwards;
	}
}

@keyframes content-reveal {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0%);
	}
}

@keyframes content-exit {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


/* TEXT FIT */

@property --captured-length {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

@property --captured-length2 {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}


.text-fit {
	display: flex;
	container-type: inline-size;

	--captured-length: initial;
	--support-sentinel: var(--captured-length, 9999px);
	--max-font-size: 110px;

	&>[aria-hidden] {
		visibility: hidden;
	}

	&> :not([aria-hidden]) {
		flex-grow: 1;
		container-type: inline-size;

		--captured-length: 100cqi;
		--available-space: var(--captured-length);

		&>* {
			--support-sentinel: inherit;
			--captured-length: 100cqi;

			--ratio: tan(atan2(var(--available-space),
						var(--available-space) - var(--captured-length)));

			--font-size: clamp(1em,
					1em * var(--ratio),
					var(--max-font-size, infinity * 1px) - var(--support-sentinel));
			inline-size: var(--available-space);

			&:not(.text-fit) {
				display: block;
				font-size: var(--font-size);

				@container (inline-size > 0) {
					white-space: nowrap;
				}
			}

			&.text-fit {
				--captured-length2: var(--font-size);
				font-variation-settings:
					'opsz'
					tan(atan2(var(--captured-length2), 1px));
			}
		}
	}
}
