/* Copyright (c) 2025 by Rafa (https://codepen.io/RAFA3L/pen/pvjPxKK) */
@font-face {
	font-family: "Aeonik Pro Regular";
	src: url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.eot");
	src: url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.eot?#iefix")
			format("embedded-opentype"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.woff2")
			format("woff2"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.woff")
			format("woff"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.ttf")
			format("truetype"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.svg#Aeonik Pro Regular")
			format("svg");
}
* {
    padding: 0;
    margin: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html,
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	margin: 0;
	padding: 0;
}
:root {
	--sz: clamp(16px, min(2vw, 3vh), 24px);
	font-size: var(--sz);
	--rotate-hour: 0;
}
body {
	background: #1e1e1e;
	font-family: "Aeonik Pro Regular";
	overflow: hidden;
}
body::after {
	content: "";
	z-index: 100;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, #000, #0000),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	filter: contrast(100%) brightness(200%) invert(1) grayscale(1) opacity(0.1);
	mix-blend-mode: screen;
}

a.button {
	display: block;
	width: fit-content;
	height: fit-content;
	position: relative;
	margin: auto;
	background: linear-gradient(#ccc, #1e1e1e);
	box-shadow: inset 0 0 0.1em 0 #ccc, 0 0.3em 0.1em -0.2em #aaa, 0 0.3em 0 0 #333,
		0 0.4em 0 0.1em #0004, -0.4em 0.4em 0.2em 0 #000a;
	border-radius: 0.2em;
	text-decoration: none;
	color: #1e1e1e;
	font-weight: 1000;
	text-shadow: 0 -2px 1px #0004, 0 2px 1px #fff4;
	padding: 0.4em 1em;
	transition: all 0.2s ease;
	span {
		user-select: none;
	}
	--x: 0%;
	cursor: pointer;
}
a.button::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 2em;
	height: 100%;
	background: linear-gradient(90deg, #fff0 0%, #fff4 30%, #fff6 40%, #fff0 100%);
	transform: skewX(-32deg);
	translate: 2em;
	transition: all 0.2s ease;
}
a.button:hover {
	translate: 0 0.3em;
	color: #fff;
	text-shadow: 0 0 0 #0000, 0 0 5px #fff;
	box-shadow: inset 0 0 0.1em 0 #ccc, 0 0em 0.1em -0.2em #aaa, 0 0em 0 0 #333,
		0 0.1em 0 0.1em #0004, -0.1em 0 0.2em 0 #000a;
	background: linear-gradient(
		-182deg,
		#fff 0%,
		#aaa 16%,
		#555 36%,
		#777 70%,
		#555 84%
	);
	&::before {
		width: 1em;
		transform: skewX(0deg);
		translate: -3em;
		opacity: 0;
	}
	.shimmer {
		opacity: 1;
	}
}

.shimmer {
	position: absolute;
	left: 0;
	right: 0;
	top: 12%;
	z-index: 3;
	margin: auto;
	transform: translate(0, 0);
	transition: all 0.2s ease, translate 0.8s ease-out;
	--shimmer-size: 3em;
	--shimmer-clr: #fffde7;
	opacity: 0;
	translate: var(--x);
	pointer-events: none;
}
.shimmer > div,
.shimmer > div::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 100;
	width: var(--shimmer-size);
	height: var(--shimmer-size);
}
.shimmer > div {
	--ani-speed: 8s;
	aspect-ratio: 1;
	width: calc(2 * var(--shimmer-size));
	animation: flicker-spin var(--ani-speed) linear infinite;
}
.shimmer > div + div {
	animation-delay: calc(-1 * var(--ani-speed) / 3);
}
.shimmer > div + div + div {
	animation-delay: calc(-2 * var(--ani-speed) / 3);
}
.shimmer > div::before {
	content: "";
	display: block;
	width: calc(var(--shimmer-size) / 4);
	height: calc(var(--shimmer-size) / 4);
	background: var(--shimmer-clr);
	filter: blur(4px);
	animation: flicker-spin calc(var(--ani-speed) / 2) linear reverse infinite;
}
@keyframes flicker-spin {
	0% {
		border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 2%/45%;
		rotate: 0deg;
	}
	50% {
		border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 0%/42%;
	}
	100% {
		border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 2%/45%;
		rotate: 360deg;
	}
}