:root {
	--bg-space: url(/resources/bg-space.webp) left/auto 100%;
	--font-futura: "futura-100", sans-serif;
	--col-shadow-default: rgba(45, 122, 166, 0.75);
}

img {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
}
.page-content {
	display: grid;
	width: 100%;
	min-height: 100%;
	align-content: center;
	justify-items: center;
}

/* #region - SHADOW BUTTON - */
.shadow-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.3);
	border: 0.6cqw #ffffff solid;
	border-radius: 100cqw;
	min-width: 36.5cqw;
	--col-shadow: var(--col-theme-shadow, var(--col-shadow-default));
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		box-shadow: 0.45cqw 0.45cqw 2cqw var(--col-shadow);
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	.btn__text {
		color: #ffffff;
		font-family: var(--font-futura);
		font-size: 6.2cqw;
		line-height: 1.1;
		transform: translateY(-0.5cqw);
		text-shadow: 0.45cqw 0.45cqw 1cqw var(--col-shadow);
	}
}
/* #endregion */

/* #region - SPLASH - */
.splash {
	background: var(--bg-space);
	&::before, &::after {
		content: "";
		position: absolute;
		pointer-events: none;
	}
	&::before {
		top: 10cqw;
		right: 7cqw;
		background: url(/resources/bg-home-side.webp) center/100% 100%;
		width: 7.26cqw;
		aspect-ratio: 85/1385;
		mix-blend-mode: screen;
	}
	&::after {
		top: 10cqw;
		right: 17cqw;
		background: url(/resources/bg-home-top.webp) center/100% 100%;
		width: 16.24cqw;
		aspect-ratio: 190/20;
	}
}
.splash .sp__bar-wrap {
	position: relative;
	z-index: 1;
	width: 65cqw;
	gap: 3.5cqw;
}
.splash .sp__bar-bg {
	height: 2cqw;
	border: 0.25cqw solid rgba(255, 255, 255, 0.9);
	border-radius: 100cqw;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 2cqw rgba(122, 231, 247, 0.35);
}
.splash .sp__bar-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8beafa, #effdff);
	box-shadow: 0 0 1.5cqw rgba(155, 242, 255, 0.55);
}
.splash .sp__pct {
	font-family: var(--font-futura);
	font-size: 3.6cqw;
	line-height: 1.2;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}
/* #endregion */

/* #region - P00 HOME - */
.home .bg-layer {
	background: var(--bg-space);
	&::before, &::after {
		content: "";
		position: absolute;
	}
	&::before {
		top: 10cqw;
		right: 7cqw;
		background: url(/resources/bg-home-side.webp) center/100% 100%;
		width: 7.26cqw;
		aspect-ratio: 85/1385;
		mix-blend-mode: screen;
	}
	&::after {
		top: 10cqw;
		right: 17cqw;
		background: url(/resources/bg-home-top.webp) center/100% 100%;
		width: 16.24cqw;
		aspect-ratio: 190/20;
	}
}
.home-logo {
	width: 70.5cqw;
}

.theme-icons {
	width: 59.66cqw;
}
.shadow-btn--start {
	padding: 1.8cqw 15cqw;
	margin-top: 5cqw;
	.btn__image {
		width: 20.68cqw;
	}
}

.home-exhibit {
	margin-top: 5cqw;
	width: 58.55cqw;
}
/* #endregion */

/* #region - P01 EXHIBIT MENU - */
.exhibit-menu .bg-layer {
	background: var(--bg-space);
	background-position: right;
}
.menu-info-panel {
	width: 80.26cqw;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		aspect-ratio: 936/1196;
		top: 0;
		background: url(/resources/soft-light.webp) no-repeat center/100%100%;
		mix-blend-mode: soft-light;
		pointer-events: none;
	}
}
.menu-info-panel__image {
	display: block;
	width: 100%;
	height: auto;
}
.btn--menu {
	position: absolute;
	width: 10.3cqw;
	aspect-ratio: 1;
	padding: 0;
	background: transparent;

	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		transition: transform 0.1s ease;
		pointer-events: none;
	}

	&::before {
		z-index: 0;
		background-image: url(/resources/btn-bg.webp);
		mix-blend-mode: screen;
	}

	&::after {
		z-index: 1;
		background-image: url(/resources/btn-light.webp);
		mix-blend-mode: lighten;
	}

	.btn__image {
		position: absolute;
		inset: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.1s ease, filter 0.1s ease;
		pointer-events: none;
	}

	&:hover {
		filter: none;

		.btn__image {
			filter: brightness(1.02);
		}
	}

	&:active {
		transform: none;
		filter: none;

		&::before,
		&::after,
		.btn__image {
			transform: translateY(0.2cqw);
		}

		.btn__image {
			filter: brightness(0.95);
		}
	}
}
/* #endregion */

/* #region - P02 EXHIBIT - */
.theme-A {
	--theme-bg-top: url(/resources/bg-theme-a-top.webp);
	--theme-bg-bottom: url(/resources/bg-theme-a-bottom.webp);
	--col-theme-shadow: #2f6da4;
	--col-theme-progress: #a9cfe4;
}

.theme-B {
	--theme-bg-top: url(/resources/bg-theme-b-top.webp);
	--theme-bg-bottom: url(/resources/bg-theme-b-bottom.webp);
	--col-theme-shadow: #216d86;
	--col-theme-progress: #96c7cb;
}

.theme-C {
	--theme-bg-top: url(/resources/bg-theme-c-top.webp);
	--theme-bg-bottom: url(/resources/bg-theme-c-bottom.webp);
	--col-theme-shadow: #4c2d8b;
	--col-theme-progress: #bbb1d5;
}

.theme-D {
	--theme-bg-top: url(/resources/bg-theme-d-top.webp);
	--theme-bg-bottom: url(/resources/bg-theme-d-bottom.webp);
	--col-theme-shadow: #b16033;
	--col-theme-progress: #e4bca9;
}
.exhibit .bg-layer {
	background-color: #ffffff;
	&::before, &::after {
		content: "";
		position: absolute;
		width: 100%;
	}
	&::before {
		background: var(--theme-bg-top) no-repeat top/100% 100%;
		aspect-ratio: 390/550;
		top: 0;
		z-index: 1;
	}
	&::after {
		background: var(--theme-bg-bottom) no-repeat bottom/100% auto;
		height: calc(100% - 10.25cqw);
		bottom: 0;
	}
}

.exhibit .page-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 13cqw;
	padding-bottom: 25cqw;
}
.poster-area {
	width: 100%;
}
.poster-area .progress-bar {
	background-color: #ffffff;
	box-shadow: 0.45cqw 0.45cqw 2cqw var(--col-theme-shadow);
	transform: translateY(20cqw);
	&::after {
		background: var(--col-theme-progress);
	}
}
.exhibit .exhibit__btn-group {
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3cqw;
	flex-shrink: 0;
}
.exhibit .exhibit__btn-group .btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	filter: none;
	transform: none;
}
/* #endregion */