/* === best viewed in Chrome in fullpage mode === */
@import 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap';

/* === particles === */
.particles {
	--glow-layer: 0 0 0 0 rgba(0, 0, 0, 0);
	background-color: #fff0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.85;
	touch-action: none;
}

.particle {
	--shadow-opacity: 0.06;
	--depth-opacity: 0.2;

	position: absolute;
	left: 0;
	top: 0;

	opacity: 1;
	box-sizing: border-box;
	box-shadow:
		var(--glow-layer),
		1.5015vmin 1.5015vmin 1.5015vmin 0 rgba(0, 0, 0, var(--shadow-opacity)),
		inset 1.5015vmin 1.5015vmin 1.5015vmin 0 rgba(255, 255, 255, var(--depth-opacity)),
		inset -1.5015vmin -1.5015vmin 1.5015vmin 0 rgba(0, 0, 0, var(--depth-opacity));

	transform: translate(0, 0) scale(0) rotate(0);
	animation: trail linear 0.7s var(--i, 0s) forwards;
	will-change: transform, opacity;
	pointer-events: none;
}

@keyframes trail {
	10% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: translate(var(--shiftX, 0), var(--shiftY, 0)) scale(0) rotate(1turn);
		opacity: 0;
	}
}

/* === controls === */
.controls {
	position: fixed;
	right: 0;
	top: 0;
	display: inline-block;
	box-sizing: border-box;
	padding: 2vmin;
	text-align: right;
	font-family: 'Montserrat', sans-serif;
	font-size: max(0.8em, 2.5vmin);
}

input {
	position: relative;
	left: 0;
	top: 0;
	opacity: 0;
	margin: 0 -7px; /* a typical Windows checkbox is 14x14 in size */
}

input:checked + label {
	color: var(--accent);
}

input:checked + label::before {
	transform: translateY(30%) scaleX(1);
	transform-origin: left top;
}

input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

label {
	position: relative;
	margin: 0 0.6em 1em 0;
	font-weight: 600;
	cursor: pointer;
	transition: color ease 400ms;
	color: var(--text-secondary);
	display: inline-block;
}

label::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateY(30%) scaleX(0);
	width: 100%;
	height: 0.72em;
	background-color: currentColor;
	z-index: -1;
	transform-origin: right top;
	transition: transform ease 400ms;
	opacity: 0.4;
}

label:hover {
	color: var(--text);
}

/* === hint === */
.hint {
	position: absolute;
	right: 5vmin;
	bottom: 0;
	transform: translate(0%, 100%);
	width: max(6.4em, 20vmin);
	min-width: 6.4em;
	max-width: 20vmin;
	pointer-events: none;
	opacity: 0.8;
	overflow: visible;
}

.hint-text {
	color: var(--accent);
	fill: currentColor;
}

.special-arrow {
	stroke: currentColor;
}

body[data-hint-shown='yes'] .hint {
	animation: hide ease 0.3s 0.7s forwards;
}

@keyframes hide {
	to {
		opacity: 0;
	}
}

/* === making things look pretty === */
html,
body {
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

html {
	background: radial-gradient(circle at 50%, #fff, #f9f4fa) fixed 0 0 / 100% 100%;
}

body {
	background-color: #fff0;
	--accent: #245ef2;
	--accent-alpha: #245ef2bb;
	--text: #000;
	--text-secondary: #00000093;
}

body::before {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: radial-gradient(circle at 50%, #151515, #000) fixed 0 0 / 100% 100%;
	opacity: 0;
	transition: opacity ease 300ms;
	will-change: opacity;
}

@supports (-moz-appearance: none) {
	body::before {
		background: radial-gradient(circle at 50%, #111, #000) fixed 0 0 / 100% 100%;
	}
}

body.glow {
	--accent: #f224da;
	--accent-alpha: #f224dabb;
	--text: #fff;
	--text-secondary: #ffffff93;
}

body.glow::before {
	opacity: 1;
}

body.glow .particles {
	--glow-layer: 0 0 15.015vmin 1.5015vmin currentColor;
	filter: contrast(1.5);
	opacity: 1;
}

::selection {
	background-color: var(--accent-alpha);
	color: #fff;
}