body {
	overflow: hidden;
}

.showcase .selected[data-color]::before {
	font-weight: 800;
	font-size: var(--fontSizeOK);
}

.showcase .selected[data-color="light-green"]::before {
	background-color: #82c841;
}

.showcase .selected[data-color="purple"]::before {
	background-color: #5959ff;
}

.showcase .selected[data-color="violet"]::before {
	background-color: #ab6ddb;
}

.showcase .selected[data-color="ocean-blue"]::before {
	background-color: #2090f2;
}

.showcase .selected[data-color="orange"]::before {
	background-color: #ff9133;
}

.showcase .selected[data-color="pink"]::before {
	background-color: #f02878;
}

.showcase .selected[data-color="yellow"]::before {
	background-color: #ffb92e;
}

.showcase .selected[data-color="red"]::before {
	background-color: #ff1e27;
}

.showcase .selected[data-color="turquoise"]::before {
	background-color: #00b5ad;
}

.showcase .selected[data-color="logo"]::before {
	background-color: var(--bgLogo);
}

.showcase {
}

/* inpage title line heigh */
.in-page .title-wrapper h2,
.in-page .title-wrapper h1 {
	line-height: 1.1;
	margin-top: 0.5rem;
}

.showcase .sub-navi {
	display: flex;
	gap: 1rem;
}

.sub-navi {
	width: fit-content;
	border: 1px solid #ddd;
	border-radius: 25px;
	font-weight: bold;
	line-height: 2rem;
	margin-bottom: 3rem;
	margin-top: 2rem;
}

.sub-navi li {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding: 0.5rem 2rem;
	flex-shrink: 1;
}

/* .sub-navi li:not(.selected):hover {
	clip-path: unset;
} */

.sub-navi li.selected {
	background-color: none;
	color: var(--textWhite);
	border-radius: 15px;
	z-index: 0;
	flex-shrink: 0;
}

.showcase li:not(.selected)::after {
	position: absolute;
	left: 50%;
	bottom: -15px;
	color: transparent;
	transition: 800ms;
	translate: -50% 0;
	width: 300%;
	text-align: center;
	font-weight: 400;
}

.showcase li::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 25px;
	clip-path: circle(0%);
	z-index: -1;
	transition: var(--speedNormal);
}

.showcase li.selected::before {
	clip-path: circle(100%);
}

.showcase li.selected::after {
	padding-left: 1rem;
	color: var(--textWhite);
	font-weight: 400;
	font-size: var(--defaultFontSize);
	white-space: nowrap;
}

.showcase li:not(.selected):hover::after {
	color: rgb(77, 77, 77);
	translate: -50% 15px;
	pointer-events: none;
}

li[data-name="Illustration"]::after {
	content: "Illustration";
	transition: 500ms;
}

li[data-name="Visual Effect"]::after {
	content: "Visual Effects";
	transition: 500ms;
}

li[data-name="Digital Media Design"]::after {
	content: "Digital Media Design";
	transition: 500ms;
}

li[data-name="Advertising and Graphic Design"]::after {
	content: "Advertising & Graphic Design";
	transition: 500ms;
}

li[data-name="Fashion Design"]::after {
	content: "Fashion Design & Pattern Making";
	transition: 500ms;
}

li[data-name="Fine Art"]::after {
	content: "Fine Arts";
	transition: 500ms;
}

li[data-name="Digital Animation"]::after {
	content: "Digital Animation";
	transition: 500ms;
}

li[data-name="Interior Design"]::after {
	content: "Interior Architecture & Design";
	transition: 500ms;
}

/*  */
.showcase-card:not([style]) {
	visibility: hidden;
}

.showcase-card {
	transition: 0ms;
}

.showcase-card.loaded {
	transition: var(--speedNormal);
}

.showcase-card img.hidden {
	visibility: hidden;
}

.masonry-grid {
	position: relative;
	transition: var(--speedNormal);
}

.masonry-grid > * {
	position: absolute;
}

.container.wide {
	--optimalWidth: clamp(815px, 98vw, 2400px);
}

.fixed {
	position: fixed;
	top: 5%;
	right: 5%;
	z-index: 1;
}

/* Mobile Nav */

.wheel {
	--wheelD: 7rem;
	--moveX: 20vw;

	isolation: isolate;
	user-select: none;
}

.showcase.wheel-container {
	z-index: 1;
	position: fixed;
	left: -3%;
	bottom: 25%;
}

.wheel > .animation-container {
	position: absolute;
	transition: var(--speedNormal);
	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	margin-top: 3rem;
	margin-left: 3rem;
	z-index: -1;
	opacity: 0;
}

.wheel.active > .animation-container {
	opacity: 1;
}

.wheel.active::before {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.527);
	top: 0;
	left: 0;
	z-index: -1;
}

.wheel > .animation-container li {
	width: 3rem;
	height: 3rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 100%;
	color: var(--textWhite);
	box-shadow: 2px 1px 10px #bdbdbd80;
	cursor: pointer;
}

.wheel > .animation-container li::before {
	clip-path: unset !important;
	border-radius: 100% !important;
}

.choosen {
	color: var(--textWhite);
	background: var(--bgLogo);
	margin-left: 2rem;
	font-size: var(--fontSizeOK);
	padding: 1rem;
	text-align: center;
	width: var(--wheelD);
	height: var(--wheelD);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 50%;
	transition: filter 50ms, var(--speedFast);
	position: absolute;
	box-shadow: 1px 1px 1px #6464649e;
	cursor: pointer;
}

.choosen:hover {
	filter: brightness(1.2);
}

/* .wheel:not(.wheel.active) .choosen {
	animation: hint 1s infinite;
} */

.user-hint {
	animation: hint 1s infinite;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes hint {
	0% {
		transform: translateX(0) scale(1);
	}
	5% {
		transform: translateX(15px) scale(1.1);
	}
	10% {
		transform: translateX(0) scale(1);
	}
	15% {
		transform: translateX(15px) scale(1.1);
	}
	30% {
		transform: translateX(0) scale(1);
	}
}

.wheel.active .choosen {
	width: calc(var(--wheelD) * 1.45);
	height: calc(var(--wheelD) * 1.45);
}

/* Overlay */

overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -5;
	opacity: 0;
	top: 0;
	left: 0;

	background-color: var(--bgTheme);
	color: var(--textWhite);
	pointer-events: none;
}

overlay.show {
	transition: var(--speedNormal);
	z-index: 4;
	opacity: 1;
	pointer-events: unset;
	overflow-y: scroll;
}

overlay .container {
	gap: 3rem;
}

overlay .arrow {
	position: fixed;
	top: 50%;
}

overlay .arrow svg {
	width: 30px;
	height: auto;
}

overlay .arrow:hover svg {
	filter: opacity(0.5);
}

overlay .right.arrow {
	right: 10vw;
	translate: unset;
}

overlay .left.arrow {
	left: 10vw;
	translate: unset;
}

.by,
.major,
.awards,
.subject {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: fit-content;
}

added {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 3rem;
}

added p {
	margin: 0.5rem 0;
}

added img {
	max-height: 100vh;
	max-width: 100%;
	width: max-content;
	object-fit: contain;
	object-position: left;
}

.video-container {
	height: clamp(500px, 50vh, 700px);
}

@media only screen and (min-width: 300px) and (max-width: 910px) {
	.wheel {
		--wheelD: 5rem;
		--moveX: 70vw;
	}

	.showcase.wheel-container {
		left: -15%;
		bottom: 20%;
	}

	.showcase .sub-navi {
		display: none;
	}

	overlay .arrow {
		display: none;
	}
}