:root {
	--EXPLORE-BOX-HIGHLIGHT: #a348ca;
	--EXPLORE-BOX-SHADOW: #26211f95;
	--EXPLORE-BOX-BG: #fffcf2;
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/home/solutionlinks-background-light.avif");
}

:root[data-theme="dark"] {
	--EXPLORE-BOX-HIGHLIGHT: #cb71f2;
	--EXPLORE-BOX-SHADOW: #000000;
	--EXPLORE-BOX-BG: #12100f;
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/home/solutionlinks-background-dark.avif");
}

body {
	overflow-x: hidden;
	background-image: var(--BODY-BG);
}

main h2 {
	font-family: "Nimbu", "Times New Roman", Times, serif;
	font-size: min(3.5rem, 10vw);
	max-width: fit-content;
	border-bottom: 2px var(--ACCENT-COLOR) solid;
}

/* 3. Update #earth-canvas */
#earth-canvas {
	position: fixed;
	bottom: -50vh;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	pointer-events: auto;
}

/* 4. Update #earth-canvas.sticky */
#earth-canvas.sticky {
	position: sticky;
	bottom: -50vh;
	left: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	z-index: 1;
}

.earth-tooltip-img {
	position: absolute;
	left: 15%;
	top: -45%;
	max-width: 35%;
	max-height: 35%;
}

.lines-wrapper {
	min-height: 100vh;
	height: 100vh;
	position: relative;
	overflow: visible;
	width: 100vw;
	max-width: 100vw;
}

.lines-container {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100vw;
	max-width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: "Nimbu", "Times New Roman", Times, serif;
	font-size: min(9rem, 15vw);
	font-weight: 700;
	pointer-events: none;
	padding: 20px;
	transition: opacity 0.6s, transform 0.6s;
	z-index: 10;
	overflow: hidden;
}

.lines-container.fixed {
	position: fixed;
}

.lines-container.scrolled-out {
	opacity: 0;
	transform: translateY(-50px);
}

.line {
	position: absolute;
	opacity: 0;
	width: 90%;
	max-width: 900px;
	line-height: 1.3;
	display: flex;
	justify-content: center;
}

.line.prev {
	opacity: 0;
	transform: translateY(-60px) scale(0.92);
	filter: blur(8px);
}

.line.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
	text-shadow: 0 4px 20px rgba(255, 209, 102, 0.3);
}

.line.next {
	opacity: 0;
	transform: translateY(60px) scale(0.92);
	filter: blur(8px);
}

.progress-indicator {
	position: fixed;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.progress-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--BODY-COLOR);
	opacity: 0.35;
	transition: all 0.4s;
	cursor: pointer;
	position: relative; /* Added for ::after positioning */
}

.progress-dot.active {
	opacity: 1;
	background: var(--ACCENT-COLOR);
	transform: scale(1.4);
	box-shadow: 0 0 10px var(--ACCENT-COLOR), 0 0 20px var(--ACCENT-COLOR);
}

.progress-dot.active::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border: 2px solid var(--ACCENT-COLOR);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: rotate-ring 1.5s linear infinite;
	opacity: 0.8;
}

@keyframes rotate-ring {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg) scale(1);
	}
}

#logo-main {
	width: 60vw;
	height: 20vw;
	background-color: var(--BODY-COLOR);
	/* background-image: url("https://static.igem.wiki/teams/5645/logo/white.avif"); */
	-webkit-mask-image: url("https://static.igem.wiki/teams/5645/logo/white.avif");
	mask-image: url("https://static.igem.wiki/teams/5645/logo/white.avif");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.tree-section {
	padding: 30px 40px;
	margin: 70px 0;
	position: relative;
	z-index: 10;
	/* transform: translateY(30px); */
	transition: opacity 0.8s, transform 0.8s;
	background-color: var(--BODY-BGCOLOR);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tree-section.visible {
	opacity: 1;
	transform: translateY(0);
}

.tree-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 1000px) {
	.tree-container {
		flex-direction: column-reverse;
	}
}

.tree-canvas-wrapper {
	position: relative;
}

.tree-tooltip-img {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 30%;
	max-height: 30%;
}

#tree-canvas {
	box-sizing: border-box;
	max-width: max(35vw, 300px);
	max-height: max(35vw, 300px);
	min-width: max(35vw, 300px);
	min-height: max(35vw, 300px);
	border-radius: 18px;
	margin: 0.5rem;
}

.tree-text {
	max-width: max(45vw, 300px);
	font-family: "Nunito", Calibri, sans-serif;
	font-size: min(1.4rem, 3vw);
	padding: 0 2vw;
}

.tree-text p {
	padding: 1rem 0;
}

/* DNA SECTION */
.dna-section {
	position: relative;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.8s, transform 0.8s;
	overflow: hidden;
	font-family: "Nunito", Calibri, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dna-section.visible {
	opacity: 1;
	/* transform: translateY(0); */
}

.dna-section p {
	font-family: "Nunito", Calibri, sans-serif;
	font-size: min(1.4rem, 3vw);
	width: max(300px, 60vw);
	padding: 5vh 0 0;
}

.dna-canvas-container {
	position: relative;
	width: 100%;
	height: 25vw;
	background: transparent;
	pointer-events: none;
	padding-left: 15vw;
}

#dna-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* SOLUTION SECTION */
.solution-section {
	padding: 40px;
	min-height: 100vh;
	position: relative;
	z-index: 10;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.8s, transform 0.8s;
	background-color: var(--BODY-BGCOLOR);
	display: flex;
	align-items: center;
	justify-content: center;
}

.solution-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 5vh;
}

.solution-canvas-wrapper {
	display: grid;
	gap: 2vh;
	order: 2;
	margin: 0.5rem;
	position: relative;
}

.solution-canvas-wrapper .tree-tooltip-img {
	left: auto;
	right: 0;
}

.solution-text {
	padding: 1.5rem;
}

.solution-text p {
	padding: 1rem 0;
	font-family: "Nunito", Calibri, sans-serif;
	font-size: min(1.4rem, 3vw);
	width: max(300px, 35vw);
}

.solution-canvas-box {
	position: relative;
	width: 100%;
	height: 700px;
	background: linear-gradient(
		135deg,
		rgba(47, 42, 40, 0.4),
		rgba(26, 22, 20, 0.6)
	);
	border-radius: 24px;
	border: 2px solid rgba(102, 255, 178, 0.2);
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(102, 255, 178, 0.1),
		0 0 40px rgba(102, 255, 178, 0.15);
	transition: all 0.3s ease;
	overflow: hidden; /* Ensure canvas is not clipped */
}

.solution-canvas-box:hover {
	border-color: rgba(102, 255, 178, 0.4);
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(102, 255, 178, 0.2),
		0 0 50px rgba(102, 255, 178, 0.25);
}

#solution-canvas {
	box-sizing: border-box;
	max-width: max(35vw, 300px);
	max-height: max(35vw, 300px);
	min-width: max(35vw, 300px);
	min-height: max(35vw, 300px);
	border-radius: 18px;
	margin: 0.5rem;
}

.solution-tooltip {
	margin-top: 24px;
	text-align: center;
	color: #1a120f;
	font-size: 1.1rem;
	font-family: "Nunito", Calibri, sans-serif;
	padding: 10px 22px;
	background: #fafbe5;
	border-radius: 12px;
	border: none;
	box-shadow: 0 2px 18px rgba(255, 209, 102, 0.18);
	letter-spacing: 0.02em;
	display: inline-block;
	min-width: 220px;
	font-weight: 500;
	transition: box-shadow 0.4s;
}

.solution-tooltip strong {
	color: #1a120f;
	font-weight: 700;
	background: none;
	font-size: 1em;
	text-shadow: none;
	padding: 0 2px;
}

.solution-canvas-wrapper {
	display: grid;
	gap: 2vh;
}

.solution-tooltip::before {
	content: "";
	margin-right: 8px;
	font-size: 1.2em;
	vertical-align: middle;
	filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.3));
}

.solution-tooltip:hover {
	box-shadow: 0 4px 32px rgba(255, 209, 102, 0.32);
}

.solution-loading-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #66ffb2;
	font-family: "Nimbu";
	font-size: 22px;
	z-index: 100;
	text-align: center;
	text-shadow: 0 0 20px rgba(102, 255, 178, 0.5);
}

.solution-box a {
	background-color: #211b1a;
}

.explore-more {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 3vh;
}

.explore-boxes-container {
	margin-top: 3vh;
	padding: 0 5vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* width: 100%; */
	margin-bottom: 15vh;
}

.explore-box {
	text-align: center;
	min-width: max(20vw, 280px);
	border: 3px solid var(--ACCENT-COLOR);
	border-radius: 1rem;
	margin: 2vh 2vw;
	aspect-ratio: 3/2;
	transition: 0.15s all ease-in-out;
	box-shadow: 0px 0px 4px var(--EXPLORE-BOX-SHADOW);
	background: var(--EXPLORE-BOX-BG);
	background-size: cover;
}

.explore-box a {
	display: flex;
	color: var(--ACCENT-COLOR);
	text-decoration: none;
	font-size: min(2.5rem, 8vw);
	font-family: "Nimbu";
	background-size: cover;
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
	align-items: center;
	justify-content: center;
	transition: 0.15s all ease-in-out;
	opacity: 0.7;
}

.explore-box:hover {
	border: 3px solid var(--EXPLORE-BOX-HIGHLIGHT);
}

.explore-box:hover a {
	color: var(--EXPLORE-BOX-HIGHLIGHT);
	opacity: 1;
}

#explore-box-description {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/description-mascot.webp");
}
#explore-box-engineering {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/engineering-mascot.webp");
}
#explore-box-results {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/results-mascot.webp");
}
#explore-box-software {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/software-mascot.webp");
}
#explore-box-iHP {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/ihp-mascot.webp");
}
#explore-box-education {
	background-image: url("https://static.igem.wiki/teams/5645/wiki-images/pages/home/education-mascot.webp");
}