/*
 * ImperialCraft - sfondi: cielo stellato che segue il giorno e la notte di Aurion, montagne, castello,
 * rosa dei venti, onde, damasco, mura. I disegni sono in img/sfondi (strumenti/sfondi.py).
 * html[data-ora] = alba | giorno | tramonto | notte, lo scrive sito.js dall'ora del server.
 */

:root {
	--stelle: .45;
	--tinta-cielo: linear-gradient(180deg, rgba(40, 30, 70, .25), transparent 60%);
}

html[data-ora="notte"] {
	--stelle: .95;
	--tinta-cielo: linear-gradient(180deg, rgba(6, 14, 44, .72), rgba(10, 18, 52, .35) 55%, rgba(10, 18, 52, .15));
}

html[data-ora="alba"] {
	--stelle: .35;
	--tinta-cielo: linear-gradient(180deg, rgba(120, 90, 160, .3), rgba(255, 150, 110, .18) 60%, transparent);
}

html[data-ora="giorno"] {
	--stelle: .12;
	--tinta-cielo: linear-gradient(180deg, rgba(110, 160, 255, .16), rgba(255, 230, 190, .06) 60%, transparent);
}

html[data-ora="tramonto"] {
	--stelle: .4;
	--tinta-cielo: linear-gradient(180deg, rgba(70, 40, 90, .3), rgba(255, 110, 50, .22) 60%, transparent);
}

/* ---------- cielo stellato dietro tutta la pagina ---------- */

body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--stelle);
	transition: opacity 3s ease;
}

body::before {
	background: url("../img/sfondi/stelle-1.svg");
}

body::after {
	background: url("../img/sfondi/stelle-2.svg") 120px 60px;
}

.js body::after {
	animation: scintillio 6s ease-in-out infinite alternate;
}

@keyframes scintillio {
	from {
		opacity: calc(var(--stelle) * .35);
	}

	to {
		opacity: var(--stelle);
	}
}

/* ---------- l'apertura cambia colore con l'ora di Aurion ---------- */

.tinta-cielo {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: var(--tinta-cielo);
}

.eroe-stelle {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: url("../img/sfondi/stelle-1.svg"), url("../img/sfondi/stelle-2.svg") 200px 90px;
	opacity: calc(var(--stelle) - .1);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 58%);
	mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 58%);
	transition: opacity 3s;
}

.pagina-testata .eroe-stelle {
	z-index: -1;
}

.js .eroe-stelle {
	animation: scintillio 5s ease-in-out infinite alternate;
}

/* ---------- decorazioni delle sezioni ---------- */

.sfondo {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	translate: 0 calc(var(--p, 0) * 1px);
}

/* montagne lontane in fondo alla leggenda */
.sfondo.montagne {
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(150px, 20vw, 300px);
	background: url("../img/sfondi/montagne.svg") bottom center / max(1600px, 100%) 100% no-repeat;
	opacity: .95;
}

/* rosa dei venti dietro il viaggio */
.sfondo.rosa {
	top: 50%;
	left: 50%;
	width: min(980px, 120vw);
	aspect-ratio: 1;
	margin: calc(min(980px, 120vw) / -2) 0 0 calc(min(980px, 120vw) / -2);
	background: url("../img/sfondi/rosa.svg") center / contain no-repeat;
	opacity: .07;
}

.js .sfondo.rosa {
	animation: gira 240s linear infinite;
}

/* bagliore di lava e cenere sotto i boss */
.sezione-boss::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	pointer-events: none;
	background:
		radial-gradient(ellipse 50% 70% at 20% 100%, rgba(255, 90, 31, .16), transparent 70%),
		radial-gradient(ellipse 40% 60% at 80% 100%, rgba(255, 120, 40, .12), transparent 70%);
}

.js .sezione-boss::after {
	animation: lava 7s ease-in-out infinite alternate;
}

@keyframes lava {
	from {
		opacity: .55;
	}

	to {
		opacity: 1;
	}
}

.sezione-boss .braci {
	z-index: 0;
}

/* il mare sotto la carta dell'isola */
.sezione-isola {
	background:
		url("../img/sfondi/onde.svg"),
		radial-gradient(ellipse 70% 60% at 70% 50%, rgba(18, 40, 90, .45), transparent 70%);
}

.js .sezione-isola {
	animation: onde 40s linear infinite;
}

@keyframes onde {
	to {
		background-position: 160px 20px, 0 0;
	}
}

/* damasco araldico: "prima di partire", guida e regolamento */
.sezione-damasco,
.pagina-documento main {
	background-image: url("../img/sfondi/damasco.svg");
}

.pagina-documento .pagina-testata {
	background: var(--notte);
}

/* il castello con le finestre accese in fondo a "come entrare" */
.sfondo.castello {
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(170px, 24vw, 360px);
	background: url("../img/sfondi/castello.svg") bottom center / auto 100% no-repeat;
	opacity: .9;
}

.entra {
	padding-bottom: clamp(160px, 22vw, 300px);
}

/* mura di pietra nel piede */
.piede {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(142, 35, 32, .18), transparent 60%),
		linear-gradient(180deg, rgba(14, 9, 6, .55), rgba(14, 9, 6, .92) 60%),
		url("../img/sfondi/mattoni.svg"),
		#1a120d;
}

/* il regno, adesso */
.sezione-regno {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212, 174, 98, .07), transparent 70%),
		linear-gradient(180deg, transparent, rgba(10, 18, 52, .25) 50%, transparent);
}

/* ---------- la luce della torcia segue il mouse ---------- */

.torcia {
	position: fixed;
	inset: 0;
	z-index: 70;
	pointer-events: none;
	background: radial-gradient(560px circle at var(--lx, -999px) var(--ly, -999px), rgba(255, 176, 90, .09), transparent 62%);
	mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
	.torcia {
		display: none;
	}

	.sfondo {
		translate: none;
	}
}

.con-montagne {
	padding-bottom: clamp(190px, 24vw, 340px);
}

.sezione-viaggio {
	overflow: hidden;
}

.js .online-titolo .stato-punto {
	animation: pulsa 2s ease-out infinite;
}

/* ---------- il plastico dell'isola (img/isola.webp, fondo trasparente) ---------- */

.carta-plastico {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
}

.carta-plastico::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -4%;
	height: 22%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
	filter: blur(8px);
}

.carta-plastico .carta-isola {
	background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(212, 174, 98, .1), transparent 72%);
}

.js .carta-plastico .carta-isola {
	animation: galleggia 9s ease-in-out infinite;
}

@keyframes galleggia {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -8px;
	}
}

.elenco-segni.in-riga {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 1000px;
	margin: 36px auto 0;
}

.centrato {
	margin-top: 32px;
	text-align: center;
}

.mappa-riserva {
	background: radial-gradient(ellipse at 50% 45%, #2a1f16, #120c08 75%);
}

.mappa-riserva .carta-isola {
	max-width: 1100px;
	margin: 24px auto;
}

@media (max-width: 720px) {
	.elenco-segni.in-riga {
		grid-template-columns: 1fr;
	}
}

/* ---------- pagina 404 ---------- */

.pagina-persa {
	min-height: min(88svh, 820px);
	align-items: center;
	padding-bottom: 80px;
}

.persa-numero {
	margin: 0;
	font-family: var(--gotico);
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 800;
	line-height: .9;
	color: transparent;
	-webkit-text-stroke: 2px rgba(242, 214, 143, .55);
	text-shadow: 0 0 40px rgba(242, 214, 143, .15);
}