@use "../themes/ametrine/sass/abstracts/functions" as *;
@use "../themes/ametrine/sass/abstracts/variables" as *;

:root {
	@include variables("dark");
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--bg-overlay), url("static.gif"), black;

	@media (prefers-reduced-motion) {
		background: var(--bg-overlay), url("static-static.gif"), black;
	}
}

main {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	animation: fade-in-zoom var(--transition-bezier-longer);
	margin: 0;
	box-shadow: none;
	border-radius: 0;
	background-color: transparent;
	padding: 0;
	color: var(--accent-color);
	line-height: 1;

	p {
		margin: 0;
	}

	img {
		margin: 0;
	}
}

#top {
	display: flex;
	gap: 0.5rem;

	div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;

		img {
			width: 4rem;
			height: 4rem;
		}

		span {
			font-size: var(--font-size-xx-small);
		}
	}
}

#header {
	display: block;
	position: relative;
	transition: var(--transition-bezier-longer);
	border-block: 0.125rem solid var(--accent-color);
	width: 17.5rem;
	height: 3.75rem;
	font-weight: var(--font-weight-black);
	font-size: 3rem;
	letter-spacing: -0.055em;
	text-decoration: underline solid;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.125em;
	text-underline-offset: 0.25em;
	text-transform: uppercase;

	&:hover {
		#face-front {
			transform: perspective(var(--content-width)) rotateX(-180deg);
		}

		#face-back {
			transform: perspective(var(--content-width)) rotateX(0deg);
		}
	}

	#face-front,
	#face-back {
		-webkit-backface-visibility: hidden;
		position: absolute;
		backface-visibility: hidden;
		transition: var(--transition-bezier-longer);
		inset-block-start: 0;
		inset-inline-start: 0;
		padding: 0.25rem 0;
	}

	#face-front {
		transform: perspective(var(--content-width)) rotateX(0deg);
	}

	#face-back {
		transform: perspective(var(--content-width)) rotateX(180deg);

		span {
			animation: arrow-blink 0.6s ease-out alternate infinite;
		}

		span:nth-of-type(1) {
			animation-delay: 0.2s;
		}

		span:nth-of-type(2) {
			animation-delay: 0.4s;
		}

		span:nth-of-type(3) {
			animation-delay: 0.6s;
		}

		@keyframes arrow-blink {
			to {
				opacity: 0;
			}
		}
	}
}

#bottom {
	display: flex;
	justify-content: space-between;
	width: 17.5rem;

	#warning {
		width: 8.5rem;
		height: 4rem;
	}

	strong {
		font-size: var(--font-size-small);
	}

	ul {
		margin-block-start: 0.5rem;
		margin-block-end: 0;
		padding-inline-start: 0;
		font-size: var(--font-size-x-small);
		list-style: none;

		li {
			padding-inline-start: 0;

			&::before {
				vertical-align: -0.125rem;
				padding-inline-end: 0.5rem;
				content: "•";
				font-size: 1.25rem;
				line-height: 0;
			}
		}
	}
}

#splash-toggle {
	position: absolute;
	cursor: pointer;
	inset-block-start: -1.5rem;
	inset-inline-start: 0;
	font-size: var(--font-size-small);
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;

	#skip-splash {
		vertical-align: rpx(-3);
		margin-inline-end: 0.25rem;
		border-color: var(--accent-color);
		border-radius: 0;
		background-color: transparent;

		&:checked {
			background-color: var(--accent-color);
		}
	}
}

#barcode {
	position: absolute;
	margin: 0;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	width: rpx(153);
	height: rpx(26);
}

#rainbow {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	background-image: linear-gradient(
		to right,
		var(--red-fg),
		var(--orange-fg),
		var(--yellow-fg),
		var(--green-fg),
		var(--blue-fg),
		var(--purple-fg)
	);
	width: 8rem;
	height: 1rem;
}
