/* Medusa 3D a scorrimento. Palco: foto subacquea fissa (si ingrandisce e scurisce con lo scroll:
   «scorri = scendi»), canvas WebGL fisso sopra, testi sopra tutto. Colori e font da base.css. */

html {
	scroll-behavior: auto;
}
body {
	background: #02161b;
}

.fondo,
.velo,
#scena {
	position: fixed;
	inset: 0;
}
.fondo {
	overflow: hidden;
	z-index: 0;
}
.fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% 40%;
	display: block;
}
/* Velo scuro: rende leggibili i testi sulla parte chiara della foto. */
.velo {
	z-index: 1;
	background: linear-gradient(180deg, rgb(0 12 16 / 0.5), rgb(0 12 16 / 0.42) 45%, rgb(0 12 16 / 0.62));
	pointer-events: none;
}
#scena {
	z-index: 2;
	pointer-events: none;
}

/* Scorrimento → profondità: la foto si ingrandisce e il velo si scurisce. Dove la
   scroll timeline non c'è (Firefox) resta la foto ferma, che va benissimo. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.fondo img {
			animation: scendi linear both;
			animation-timeline: scroll(root block);
		}
		.velo {
			animation: scurisci linear both;
			animation-timeline: scroll(root block);
		}
	}
}
@keyframes scendi {
	from {
		transform: scale(1.02);
	}
	to {
		transform: scale(1.3) translateY(-4%);
	}
}
@keyframes scurisci {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

/* Firma dello studio sopra gli strati fissi. */
body > nav[aria-label='Loop Studio'],
.studio-mark {
	position: relative;
	z-index: 4;
}

main {
	position: relative;
	z-index: 3;
}
.sezione {
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 6rem clamp(1.25rem, 6vw, 5rem);
}
.contenuto {
	width: min(100%, 27rem);
}
.sezione--banner {
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	padding-top: clamp(4rem, 14svh, 9rem);
}
.sezione--banner .contenuto {
	width: min(100%, 44rem);
}
.sezione--dx {
	justify-content: flex-end;
}
.sezione--contatti {
	justify-content: center;
	text-align: center;
}
.sezione--contatti .contenuto {
	width: min(100%, 38rem);
}

.kicker {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9fe9e2;
}
h1 {
	font-size: clamp(2.6rem, 7.5vw, 5.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 30px rgb(0 20 26 / 0.6);
}
h2 {
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	margin-bottom: 1rem;
	text-shadow: 0 2px 24px rgb(0 20 26 / 0.6);
}
.sezione p {
	color: rgb(255 255 255 / 0.9);
	line-height: 1.65;
	text-shadow: 0 1px 14px rgb(0 20 26 / 0.7);
}
.lead {
	margin: 1.25rem auto 0;
	max-width: 34rem;
	font-size: 1.0625rem;
}
.numero {
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 9vw, 6.5rem);
	font-weight: 800;
	line-height: 1;
	color: transparent !important;
	-webkit-text-stroke: 1.5px rgb(255 255 255 / 0.55);
	text-shadow: none !important;
}

.contatti {
	margin: 2rem auto 0;
	text-align: left;
}
.contatti > div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.9rem;
	border-bottom: 1px dashed rgb(255 255 255 / 0.3);
}
.contatti dt {
	font-weight: 600;
}
.contatti dd {
	margin: 0;
	font-weight: 300;
	text-align: right;
	overflow-wrap: anywhere;
}
.credito {
	margin-top: 2rem;
	font-size: 0.75rem;
	color: rgb(255 255 255 / 0.7) !important;
}

@media (max-width: 700px) {
	.sezione--sx,
	.sezione--dx {
		justify-content: center;
		align-items: flex-end;
		padding-bottom: 14svh;
	}
	.contenuto {
		width: min(100%, 30rem);
	}
}