@charset "UTF-8";
/** @author ivanmoreno @ivanmoreno_xyz **/

:root {
	--title-text-color: #707070;
	--color-0: #60a7bd;
	--color-1: #a1602b;
	--color-2: #3b5278;
	--text-color: #ffffff;
	--link-hover: #ffffff;
}

html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to bottom right, #3A6073, #16222A);
	font-family: 'Abel', sans-serif;
	color: var(--text-color);
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(to bottom right, #3A6073, #16222A);
	z-index: 1;
	opacity: 0;
	animation: fadeIn 1.8s ease forwards 0.1s;
}

.background span {
	width: 20vmin;
	height: 20vmin;
	border-radius: 20vmin;
	backface-visibility: hidden;
	position: absolute;
	animation-name: move;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.background span:nth-child(1)  { color: var(--color-0); top: 7%;  left: 56%;  animation-duration: 14.4s; animation-delay: -7.7s;  transform-origin: -19vw -23vh; box-shadow: 40vmin 0 9.4968462501vmin currentColor; }
.background span:nth-child(2)  { color: var(--color-0); top: 98%; left: 41%;  animation-duration: 14.5s; animation-delay: -10.1s; transform-origin: 5vw -1vh;    box-shadow: 40vmin 0 11.2010545029vmin currentColor; }
.background span:nth-child(3)  { color: var(--color-1); top: 42%; left: 1%;   animation-duration: 12.2s; animation-delay: -13.6s; transform-origin: -15vw 25vh;  box-shadow: -40vmin 0 8.4293585447vmin currentColor; }
.background span:nth-child(4)  { color: var(--color-0); top: 71%; left: 49%;  animation-duration: 14.9s; animation-delay: -7.2s;  transform-origin: 19vw -23vh;  box-shadow: 40vmin 0 5.743775776vmin currentColor; }
.background span:nth-child(5)  { color: var(--color-1); top: 21%; left: 69%;  animation-duration: 14.2s; animation-delay: -14.8s; transform-origin: -15vw -17vh; box-shadow: -40vmin 0 8.2429791382vmin currentColor; }
.background span:nth-child(6)  { color: var(--color-1); top: 11%; left: 100%; animation-duration: 15.9s; animation-delay: -5.3s;  transform-origin: -24vw -4vh;  box-shadow: 40vmin 0 12.0991324704vmin currentColor; }
.background span:nth-child(7)  { color: var(--color-2); top: 87%; left: 69%;  animation-duration: 11.6s; animation-delay: -13.5s; transform-origin: -13vw -22vh; box-shadow: -40vmin 0 14.9628987206vmin currentColor; }
.background span:nth-child(8)  { color: var(--color-2); top: 47%; left: 53%;  animation-duration: 10.3s; animation-delay: -10.4s; transform-origin: 24vw -3vh;   box-shadow: -40vmin 0 12.590178399vmin currentColor; }
.background span:nth-child(9)  { color: var(--color-0); top: 22%; left: 40%;  animation-duration: 15.7s; animation-delay: -11.6s; transform-origin: -11vw -3vh;  box-shadow: 40vmin 0 13.4253798231vmin currentColor; }
.background span:nth-child(10) { color: var(--color-0); top: 54%; left: 23%;  animation-duration: 14.9s; animation-delay: -6.1s;  transform-origin: -3vw 15vh;   box-shadow: 40vmin 0 9.0936558607vmin currentColor; }
.background span:nth-child(11) { color: var(--color-1); top: 20%; left: 49%;  animation-duration: 12.5s; animation-delay: -8.4s;  transform-origin: 11vw 20vh;   box-shadow: -40vmin 0 13.8686902649vmin currentColor; }
.background span:nth-child(12) { color: var(--color-2); top: 73%; left: 31%;  animation-duration: 10.3s; animation-delay: -8s;    transform-origin: -10vw -3vh;  box-shadow: -40vmin 0 14.0053410606vmin currentColor; }
.background span:nth-child(13) { color: var(--color-2); top: 92%; left: 83%;  animation-duration: 10.3s; animation-delay: -6s;    transform-origin: -23vw -17vh; box-shadow: -40vmin 0 14.8768212405vmin currentColor; }
.background span:nth-child(14) { color: var(--color-0); top: 63%; left: 95%;  animation-duration: 12.5s; animation-delay: -5.4s;  transform-origin: 0vw -18vh;   box-shadow: -40vmin 0 12.7482869839vmin currentColor; }
.background span:nth-child(15) { color: var(--color-2); top: 62%; left: 67%;  animation-duration: 11.7s; animation-delay: -5.5s;  transform-origin: 12vw -5vh;   box-shadow: 40vmin 0 13.541865708vmin currentColor; }
.background span:nth-child(16) { color: var(--color-1); top: 15%; left: 62%;  animation-duration: 12.7s; animation-delay: -13.2s; transform-origin: -5vw -18vh;  box-shadow: -40vmin 0 14.8321488805vmin currentColor; }
.background span:nth-child(17) { color: var(--color-2); top: 27%; left: 17%;  animation-duration: 13.3s; animation-delay: -13.9s; transform-origin: -4vw -14vh;  box-shadow: -40vmin 0 14.5471811901vmin currentColor; }
.background span:nth-child(18) { color: var(--color-1); top: 12%; left: 51%;  animation-duration: 11s;   animation-delay: -13.7s; transform-origin: 7vw 14vh;    box-shadow: -40vmin 0 12.5490122041vmin currentColor; }
.background span:nth-child(19) { color: var(--color-0); top: 72%; left: 100%; animation-duration: 15.4s; animation-delay: -3s;    transform-origin: 4vw 11vh;    box-shadow: -40vmin 0 14.5389189018vmin currentColor; }
.background span:nth-child(20) { color: var(--color-2); top: 11%; left: 2%;   animation-duration: 14.4s; animation-delay: -2.1s;  transform-origin: 5vw -9vh;    box-shadow: -40vmin 0 11.7501128554vmin currentColor; }

@keyframes move {
	100% { transform: translate3d(0, 0, 1px) rotate(360deg); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

#overlay {
	position: fixed;
	inset: 0;
	background: linear-gradient(to bottom right, #3A6073, #16222A);
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	pointer-events: none;
	opacity: 0;
	animation: fadeIn 1.2s ease forwards 0.8s;
}

.title {
	color: #aaaaaa;
	text-align: center;
	font-size: 1.1em;
	margin-bottom: 6px;
}

.subtitle {
	color: #666666;
	font-size: 0.75em;
	letter-spacing: 0.15em;
	text-align: center;
	margin-bottom: 28px;
	pointer-events: auto;
}

.subtitle a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.subtitle a:hover {
	color: #ffffff;
}

.bottom-footer {
	position: fixed;
	bottom: 24px;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	z-index: 20;
	pointer-events: none;
	opacity: 0;
	animation: fadeIn 1.2s ease forwards 1.4s;
}

.perf-warning {
	color: #555555;
	font-size: 0.65em;
	letter-spacing: 0.08em;
	font-family: 'Abel', sans-serif;
	text-align: center;
	padding: 0 16px;
}

.interaction-hint {
	color: #444444;
	font-size: 0.65em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-family: 'Abel', sans-serif;
	text-align: center;
	padding: 0 16px;
}

.nav-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: auto;
}

.chapter-link {
	color: #aaaaaa;
	text-decoration: none;
	font-size: 2.2em;
	text-align: center;
	margin: 4px 0;
	transition: color 0.4s ease;
	cursor: pointer;
}

.chapter-link:hover {
	color: #ffffff;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.remote-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
	pointer-events: auto;
}

#qr-canvas {
	border-radius: 8px;
}

.remote-label {
	color: #666666;
	font-size: 0.75em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-top: 12px;
	text-align: center;
}

@media (max-width: 600px) {
	.chapter-link { font-size: 1.5em; }
	.title { font-size: 0.9em; }
	.bottom-footer { bottom: 14px; gap: 4px; }
	.perf-warning, .interaction-hint { font-size: 0.55em; }
}