/*==========================================================
 MAIN */
#map-main {
	min-height: 100vh;
	background-image: url(BG.webp);
	background-size: 80% auto;
	background-position: center;
	overflow-x: hidden;
}

#grid-container {
	min-width: 0;
	display: grid;
	padding: 8vh 3vh 0vh;
	background-size: 50px 50px;
	background-image:
		linear-gradient(to right, var(--grid) 2px, transparent 1px),
		linear-gradient(to bottom, var(--grid) 2px, transparent 1px);
}

#info-page {
	z-index: 80;
	position: fixed;
	background-color: var(--bg-info);
	padding: 12px;
	overflow-y: scroll;
}

/*==========================================================
 ITEM */
.item {
	position: relative;
	text-align: center;

	transition: transform 1s ease-in-out 0.8s;
}
.img-container {
	position: absolute;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: black; /* fallback without img */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: solid 3px;
	cursor: pointer;

	transition: translate 0.5s;
}
.img-container:hover {
	translate: 10% -10%;
}
.img-container:active {
	translate: none;
}
.circ {
	position: absolute;
	background-color: currentColor;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;

	transition: all 1s ease-in-out;
}
.name-plate {
	margin-top: 103%;
	display: inline-block;
}
.name-plate p {
	font-size: 1rem;
	overflow-wrap: anywhere;
  border-radius: 8px;
	background-color: var(--bg-map);
}

.rainbow {
	animation: rainbow 5s infinite !important;
}
@keyframes rainbow {
	0% {
		color: yellow;
	}
	30% {
		color: rgb(255, 46, 46);
	}
	60% {
		color: cyan;
	}
	100% {
		color: yellow;
	}
}
/* RANDOM PADDING */
.pad {
	padding-top: 80%;
}
.pad1 {
	padding-top: 20%;
}
.pad2 {
	padding-top: 180%;
}
/*==========================================================
BRANCHES */
#temp-wrapper {
	position: fixed;
	top: 0;
	width: 60vw;
	height: 100vh;
}
#branch-container {
	position: fixed;
	top: 0;
	width: 60vw;
	height: 100vh;
	z-index: 2;
	rotate: 0;
	@starting-style {
		rotate: 30deg;
	}
}
.absolute-wrapper,
.branch {
	position: absolute;
	width: 8vw;
	height: auto;
	z-index: 10;
}
#branch-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--text-info);
	z-index: 7;
}
svg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
svg line {
	stroke: var(--text-info);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

#branch1 {
	top: 8%;
	left: 20%;
}
#branch2 {
	top: 40%;
	left: 8%;
}
#branch3 {
	top: 62%;
	left: 27%;
}
#branch4 {
	top: 8%;
	left: 52%;
}
#branch5 {
	top: 40%;
	left: 75%;
}
#branch6 {
	top: 70%;
	left: 62%;
}
/*==============================================================================
INTERACTIVE */
.invis {
	opacity: 0;
}
.hidden {
	display: none !important;
	opacity: 0;
	transition-behavior: allow-discrete;
	transition: all 1s;
}
#map-main .hidden {
	transition: all 2s; /* Add delay as needed */
}
.display {
	display: inherit !important;
	opacity: 1;

	@starting-style {
		opacity: 0;
	}
}
.centering {
	z-index: 10 !important;
}
.destroy {
	z-index: 1 !important;
}
.big {
	transform: scale(20) !important; /* Apply for behind bg circ*/
}
/*==========================================================
 MAP BORDER & DECOR */
.map-border {
	z-index: 99;
	position: fixed;
	background-color: var(--bg-info);
}
#b-top {
	top: 0;
	left: 0;
	height: 1.8rem;
}
#b-left {
	left: 0;
	width: 12px;
}
#b-right {
	right: 0;
	width: 12px;
}
#b-bottom {
	left: 0;
	height: 12px;
}

#orbit-container {
	position: fixed;
	top: 0;
	left: 15vw;
	height: 120vh;
	aspect-ratio: 1;
	z-index: -1;
}
.orbit {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 50%;
	border: solid rgb(75, 75, 75) 0.2vh;
	aspect-ratio: 1;
	translate: -5% 0px;
}
#or-1 {
	height: 100%;
	animation: orbit 50s linear infinite;
}
#or-2 {
	height: 65%;
	animation: orbit 48s linear infinite;
}
#or-3 {
	height: 30%;
	animation: orbit 34s linear infinite;
}
#or-4 {
	height: 86%;
}

.star {
	position: absolute;
	top: 50%;
	left: -0.4vh;
	height: 0.8vh;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--text-info);
}

@keyframes orbit {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

/* dot 1 - 12 */
.dot {
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: yellow;
}
/* Percentage based on the size of map (length of grid container) */
#dot1 {
	top: 18%;
	left: 10%;
	animation: blinking 8s infinite;
}
#dot2 {
	top: 20%;
	left: 40%;
	animation: blinking 11s infinite;
}
#dot3 {
	top: 35%;
	left: 82%;
	animation: blinking 7s infinite;
}
#dot4 {
	top: 47%;
	left: 71%;
	animation: blinking 9s infinite;
}
#dot5 {
	top: 50%;
	left: 55%;
	animation: blinking 12.5s infinite;
}
#dot6 {
	top: 28%;
	left: 94%;
	animation: blinking 8.2s infinite;
}
#dot7 {
	top: 78%;
	left: 56%;
	animation: blinking 9.5s infinite;
}
#dot8 {
	top: 81%;
	left: 8%;
	animation: blinking 13s infinite;
}
#dot9 {
	top: 98%;
	left: 81%;
	animation: blinking 7.8s infinite;
}
#dot10 {
	top: 58%;
	left: 12%;
	animation: blinking 10s infinite;
}
#dot11 {
	top: 38%;
	left: 22%;
	animation: blinking 7.8s infinite;
}
#dot12 {
	top: 8%;
	left: 90%;
	animation: blinking 12s infinite;
}
@keyframes blinking {
	0% {
		opacity: 100%;
	}
	50% {
		opacity: 100%;
	}
	51% {
		opacity: 0%;
	}
	100% {
		opacity: 0%;
	}
}

/*======================================================================================
/*======================================================================================
INFO-SECTION */
.flex-wrapper {
	display: flex;
}
#intro {
	display: flex;
	flex-direction: column;
	min-height: 96vh;
}
#intro footer {
	margin-top: auto;
	padding-top: 40px;
}
.text-hover {
	animation: hover 5s infinite ease-in-out;
	padding-bottom: 20px;
}
@keyframes hover {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(20%);
	}
	100% {
		transform: translateY(0px);
	}
}

#credit:hover #credit-hover {
	opacity: 1;
}
#credit-hover {
	opacity: 0;
	transition: opacity 0.4s;
}

/*==========================================================
Project & STudent info */
#yt-container,
#showreel-container {
	width: 100%;
	overflow: hidden;
  border-radius: 8px;
}
iframe {
	width: 100%;
	aspect-ratio: 16/9;
}
#add-container {
	display: flex;
	flex-wrap: wrap;
}
.add-img {
	padding: 5px;
  max-height: 100vh;
}

#pfp-section {
	display: flex;
	padding-bottom: 20px;
}
#pfp {
	height: 15vh;
	aspect-ratio: 1;
	border-radius: 8px;
	background-color: black; /* fallback without img */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#name-skill {
	padding-left: 12px;
}
#display-name, #project-title {
  margin-bottom: 8px;
}
#tagline {
  margin: 10px 0px;
}
#bio,
#project-description {
	margin: 10px 0 20px;
}

/*==========================================================*/
/* PC & mobile share similiar map layout with 3 columns, otherwise
- Mobile info-page sit bottom half of screen, fixed position */
/* PC screen */
#b-left,
#b-right {
	height: 100%;
}

@media only screen and (min-width: 786px) {
	main {
		display: flex;
	}
	#map-main {
		position: relative;
		width: 60vw;
	}
	#grid-container {
		gap: 3vw;
		grid-template-columns: repeat(5, 1fr);
		padding-bottom: 10vh;
	}
	#info-page {
		width: 40vw;
		height: 100vh;
		right: 0;
		padding-top: 1.8rem;
	}
	#b-top,
	#b-bottom {
		width: 60vw;
	}
	#b-bottom {
		bottom: 0;
	}
	.dot {
		width: 1vh;
	}
	#pull-tab {
		display: none;
	}
}

/* Mobile screen */
@media only screen and (max-width: 787px) {
	#map-main {
		width: 100%;
	}
	#grid-container {
		gap: 5vw;
		grid-template-columns: repeat(4, 1fr);
		padding-bottom: 60vh;
	}
	#info-page {
		height: 40vh; /* Adjustable height */
		width: 100vw;
		padding-top: 20px;
		bottom: 0;
		transition: transform 1s;
	}
	#pull-tab {
		cursor: pointer;
		position: fixed;
		bottom: 40vh;
		right: 0;
		background-color: var(--bg-info);
		border-radius: 8px;
		text-align: center;
		font-size: 1.5rem;
		font-weight: bold;
		padding: 10px 10px 0px;
		transition: transform 1s;
		z-index: 200;
	}
	.hide-info {
		transform: translateY(38vh);
	}
	#pull-tab:hover {
		color: var(--audio);
	}
	#b-top,
	#b-bottom {
		width: 100%;
	}
	.orbit {
		border: solid var(--text-info) 1px;
	}
	.img-container {
		border: solid 2px;
	}
	.dot {
		width: 6px;
	}
	#branch-container,
	#temp-wrapper {
		width: 100vw;
		height: 60vh;
	}
	.absolute-wrapper,
	.branch {
		width: 18vw;
	}
	#intro {
		min-height: auto;
	}
	.name-plate p {
		font-size: 0.7rem;
	}
	#branch3 {
		top: 70%;
		left: 21%;
	}
	#map-main #specialization {
		display: none;
	}
  #display-name {
    font-size: 2rem;
  }
}