@font-face {
	font-family: "Outfit Black";
	src: url("fonts/Outfit\ Black.ttf");
}

@font-face {
	font-family: "Outfit ExtraBold";
	src: url("fonts/Outfit\ ExtraBold.ttf");
}

@font-face {
	font-family: "Bebas Neue";
	src: url("fonts/Bebas\ Neue.ttf");
}

@font-face {
	font-family: "Bender";
	src: url("fonts/Bender.woff");
}

/* @font-face {
	font-family: "TW-Sung";
	src: url("fonts/TW-Sung-98_1.ttf");
} */

* {
	margin: 0;
	padding: 0;
	user-select: none;
}

html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d1d1d1;
}

body {
	background-color: #c6c6c6;
	width: 100cqw;
	height: 100cqh;
	aspect-ratio: 16 / 9;
	width: min(100vw, calc(100vh * (16 / 9)));
	/* border-style: dashed; */
	/* background-image: url("preview.jpeg"); */
	background-size: contain;
	container-type: inline-size;
}

.frame {
	aspect-ratio: 16 / 9;
	width: 100cqw;
	/* height: 100cqh; */
	position: absolute;
	overflow: hidden;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}

.priestess {
	height: 100%;
	width: 100%;
	background-image: url("images/priestess.png");
	background-repeat: no-repeat;
	background-size: 205%;
	background-position: 44% 38.75%;
	opacity: 35%;
	position: relative;
}

.lynchpin {
	font-family: "Bebas Neue";
	font-kerning: none;
	letter-spacing: 0.05cqw;
	font-size: 28cqw;
	text-align: center;
	-webkit-text-stroke: 1.5px black;
	color: transparent;
	opacity: 12%;
	transform: translate(-50%, -51%);
	top: 52.5%;
	left: 49.7%;
	position: absolute;
}

.lynchpin-reflect {
	font-family: "Bebas Neue";
	font-kerning: none;
	letter-spacing: 0.05cqw;
	font-size: 28cqw;
	text-align: center;
	transform: rotatex(180deg) translate(-50%, 50%);
	top: 11%;
	left: 49.8%;
	position: absolute;
	opacity: 54%;
	background: linear-gradient(to top, #949494 30%, #b6b6b6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lynchpin-img {
	opacity: 10%;
	width: 100%;
	height: auto;
	position: absolute;
}


.cycle-svg {
	height: auto;
	width: 56.25cqw;
	overflow: visible;
	position: absolute;
	transform: translate(-50%, -50%) rotate(-90deg);
	left: 50%;
	top: 50%;
	opacity: 25%;
}

.cycle-circle {
	stroke: black;
	stroke-width: 0.3;
	stroke-linecap: butt;
	fill: none;
}

@keyframes cycle-draw {
	from { stroke-dashoffset: var(--dashstart); }
	to   { stroke-dashoffset: 0; }
}

.cycle-circle.animate {
	animation: cycle-draw 1800ms ease forwards;
}

.process-bar-mask {
	height: 100%;
	width: 0.2cqw;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	background-color: black;
	/* 初始隐藏，随后由动画淡入到 20% 不透明度 */
	opacity: 0;
}

@keyframes mask-fade-in {
	from { opacity: 0; }
	to   { opacity: 0.2; }
}

.process-bar-mask.fade {
	animation: mask-fade-in 1000ms ease forwards;
}

.process-bar {
	height: 0%;
	width: 0.2cqw;
	position: absolute;
	transform: translate(-50%, -100%);
	left: 50%;
	top: 100%;
	background-color: black;
}

.process-value {
	position: absolute;
	left: calc(50% + 1.2cqw);
	top: 50%;
	transform: translateY(-50%);
	font-family: "Outfit ExtraBold", sans-serif;
	font-size: 1.1cqw;
	color: black;
	z-index: 20;
	pointer-events: none;
}

.process-value {
	font-family: "Bender";
	font-weight: 10;
	font-size: 1.7cqw;
	transform: translate(-50%, -100%);
	position: absolute;
	left: 50.1%;
	top: 100%;
	padding-bottom: 0.8%;
	opacity: 0;
}

.shadow {
	text-shadow: 0 0.2cqw 0.2cqw rgba(0, 0, 0, 0.15);
}

h1 {
	font-family: "Outfit Black";
	font-weight:600;
	font-size: 9.6cqw;
	color: #313131;
	margin: 0;
	position: absolute;
	transform: translate(0, -50%);
	top: 49.75%;
}

h2 {
	font-family: "Outfit ExtraBold";
	font-size: 4.4cqw;
	letter-spacing: -0.037em;
	color: white;
	background: #313131;
	margin: 0;
	line-height: 0.85;
	padding-left: 0.05em;
	padding-right: 0.07em;
	position: absolute;
	transform: translate(0, -50%);
	top: 60.9%;
}

.DM01 {
	position: absolute;
	top: calc(143 / 2160 * 100%);
	left: calc(176.5 / 3840 * 100%);
	transform: translate(-50%, -50%);
	width: calc(168 / 3840 * 100cqw);
	height: auto;
}

.barcode {
	position: absolute;
	top: 67.22%;
	left: 4.805%;
	transform: translate(-50%, -50%);
	width: 4.7cqw;
	height: auto;
}

.star-killers {
	position: absolute;
	top: 71.11%;
	left: 4.05%;
	transform: translate(-50%, -50%);
	width: 3.15cqw;
	height: auto;
}

.synchronized {
	font-family: "Bender";
	font-size: 1.01cqw;
	letter-spacing: -0.01cqw;
	position: absolute;
	transform: translate(-50%, -50%);
	top: calc(2010 / 2160 * 100%);
	left: calc(247 / 3840 * 100%);
	&::before {
		content: "";
		width: 0.71cqw;
		aspect-ratio: 1 / 1;
		background-color: black;
		display: inline-block;
		margin-right: 0.5cqw;
	}
}

.tape {
	position: absolute;
	top: 75%;
	left: 90.65%;
	transform: translate(-50%, -50%);
	width: 13cqw;
	height: auto;
	opacity: 40%;
}

.success {
	position: absolute;
	top: calc(1983 / 2160 * 100%);
	left: calc(3304 / 3840 * 100%);
	transform: translate(-50%, -50%);
	width: 22.34cqw;
	height: auto;
}

/* .SBHS_box {
	position: absolute;
	top: calc(100 / 2160 * 100%);
	width: 100cqw;
	justify-content: center;
	display: flex;
}

.SBHS{
	font-family: "TW-Sung";
	font-size: 1.7cqw;
	letter-spacing: 2.2cqw;
	color: red;
	&::before {
		content: "";
		margin-right: 1.2cqw;
	};
	&::after {
		content: "";
		margin-left: 1.2cqw;
	};
} */

.stand {
	position: absolute;
	top: calc(119.5 / 2160 * 100%);
	left: calc(1885 / 3840 * 100%);
	transform: translate(-50%, -50%);
	width: calc(1838 / 3840 * 100cqw);
	height: auto;
}


.access-diamond {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 4.75cqw;
	height: 4.75cqw;
	border: 0.75cqw solid black;
	box-sizing: border-box;
	background: transparent;
	opacity: 75%;
}

.access-label {
	display: inline-block;
	transform: translate(-50%, -50%) rotate(-45deg);
	font-family: "Outfit ExtraBold";
	color: black;
	font-size: 0.85cqw;
	position: absolute;
	top: 46%;
	left: 48%;
}

.access-animation {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 4.75cqw;
	height: 4.75cqw;
	border: 0.25cqw solid black;
	box-sizing: border-box;
	background: transparent;
	opacity: 75%;
}

@keyframes access-pulse {
	0% {
		transform: translate(-50%, -50%) rotate(45deg) scale(1);
		opacity: 0.75;
	}
	50% {
		transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
		opacity: 0;
	}
}

.access-animation.animate {
	animation: access-pulse 2000ms ease infinite;
}

audio {
	display: none;
}