button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: 0.5em;
	padding: 0.6em 1.2em;

	scale: 1;
	transition:
		scale 0.2s,
		filter 0.2s,
		box-shadow 0.2s;

	span {
		vertical-align: middle;
	}

	&:active {
		scale: 0.96;
		box-shadow: var(--neu-pressed) !important;
	}

	&.primary {
		background: var(--brand-violet);
		color: hsl(0, 0%, 100%);
		box-shadow: var(--card);
		&:hover {
			background: var(--brand-violet-hover);
		}
	}

	&.secondary {
		background: light-dark(hsl(0, 0%, 100%), hsl(220, 20%, 15%));
		color: var(--text-main);
		border: var(--glass-border);
		box-shadow: var(--card);
		&:hover {
			filter: brightness(0.95);
		}
	}

	&.subtle {
		background: transparent;
		color: var(--text-muted);
		padding: 0.4em;
		&:hover {
			color: var(--text-main);
			background: light-dark(hsla(0, 0, 0, 0.05), hsla(0, 0, 0, 0.3));
		}
	}

	&.large {
		font-size: 1.1rem;
		padding: 0.8em 1.6em;
		border-radius: 0.6em;
	}
}

a.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--brand-violet-text);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

main {
	padding: 4em;
	max-width: 90em;
	margin: 0 auto;
}

/* 3D Positioning of the Layers */
.layer-back.side-panel {
	width: 16em;
	height: 28em;
	right: 0;
	top: 2em;
	transform: translateZ(-100px) rotateY(-10deg);
	opacity: 0.8;
}

.layer-mid.studio {
	width: 28em;
	height: 18em;
	left: 2em;
	top: 8em;
	transform: translateZ(0) rotateY(-5deg);
	box-shadow: 0 16px 40px hsla(0, 0, 0, 0.2);
}

.layer-front.popup {
	width: 14em;
	height: 16em;
	left: 0;
	top: 14em;
	transform: translateZ(100px) rotateY(5deg);
	box-shadow: 0 24px 48px hsla(0, 0, 0, 0.25);
	backdrop-filter: blur(2em);
}

.reveal-up {
	opacity: 0;
	translate: 0 2em; /* Starts slightly lower */
	/* Uses --delay variable injected from HTML */
	animation: fade-in-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s) forwards;
}

@keyframes fade-in-up {
	to {
		opacity: 1;
		translate: 0 0;
	}
}

svg {
	&.logo path {
		d: path("M12 2L2 22h20L12 2zm0 3.8l7.2 14.4H4.8L12 5.8z");
	}
	&.moon-sun path {
		d: path("M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z");
	}
	&.chrome path {
		d: path(
			"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-8c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5z"
		);
	}
	&.firefox path {
		d: path(
			"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.14 14.65c-1.39.95-3.05 1.51-4.82 1.51-3.66 0-6.83-2.18-8.28-5.32 1.15.52 2.45.82 3.82.82 2.62 0 4.96-1.12 6.57-2.92.51.52.82 1.23.82 2.01 0 1.26-.8 2.34-1.92 2.76.62-.25 1.16-.67 1.55-1.19.16.57.26 1.17.26 1.33z"
		);
	}
	&.edge path {
		d: path("M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z");
	}
	&.shield path {
		d: path(
			"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"
		);
	}
}