:root{
	--white:#fff;
	--black:#000;
	--discord:#5865f2;
}

*{
	box-sizing:border-box;
}

html{
	scroll-behavior:auto;
}

html,
body{
	margin:0;
	background:var(--black);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
	overflow-x:hidden;
}

.showcase{
	position:relative;
	display:grid;
	place-items:center;
	width:100%;
	height:100svh;
	overflow:hidden;
	background:#000;
	color:var(--white);
	text-decoration:none;
}

/* Sfondo sfocato */

.showcase::before{
	content:"";
	position:absolute;
	inset:-35px;
	background-image:var(--backdrop);
	background-position:center;
	background-size:cover;
	filter:blur(28px) brightness(.45);
	opacity:0;
	transition:opacity .65s ease;
}

.showcase.has-backdrop::before,
.hero::before{
	opacity:1;
}

/* Immagini e video */

.showcase > img,
.showcase > video{
	position:relative;
	z-index:1;
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	opacity:0;
	transition:opacity .65s ease;
}

/* Contenuti caricati progressivamente */

.showcase img.loaded,
.showcase video.loaded{
	opacity:1;
}

/* Le prime immagini e i primi video sono subito visibili */

.hero img,
.hero video:not([data-src]),
.showcase img:not([data-src]),
.showcase video:not([data-src]){
	opacity:1;
}

/* Evita controlli o interazioni involontarie sul video */

.showcase video{
	pointer-events:none;
}

/* Ombra sopra immagini e video */

.showcase::after{
	content:"";
	position:absolute;
	z-index:1;
	inset:0;
	background:linear-gradient(
		180deg,
		rgba(0,0,0,.20),
		rgba(0,0,0,.06) 45%,
		rgba(0,0,0,.35)
	);
	pointer-events:none;
}

/* Contenuto iniziale */

.hero-content{
	position:absolute;
	z-index:2;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:24px;
	text-shadow:0 2px 30px #000;
}

.hero-content p{
	margin:0 0 10px;
	font-size:clamp(12px,1.2vw,18px);
	font-weight:600;
}

.hero-content h1{
	margin:0;
	font-size:clamp(54px,10vw,150px);
	line-height:.9;
	letter-spacing:-.065em;
}

.hero-content span{
	margin-top:18px;
	font-size:clamp(13px,1.4vw,20px);
	color:rgba(255,255,255,.78);
}

.hero-content b{
	margin-top:24px;
	padding:10px 18px;
	background:rgba(255,255,255,.12);
	color:#fff;
	border:1px solid rgba(255,255,255,.1);
	border-radius:999px;
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(10px);
	font-size:13px;
	text-shadow:none;
}

/* Titoli degli script */

.script-title{
	position:absolute;
	z-index:2;
	top:calc(
		(100svh - min(100svh,56.25vw)) / 2
		+ clamp(18px,3vw,50px)
	);
	left:calc(
		(100vw - min(100vw,177.78svh)) / 2
		+ clamp(18px,4vw,70px)
	);
	right:20px;
	text-shadow:0 2px 25px #000;
}

.script-title small{
	display:block;
	margin-bottom:5px;
	font-size:clamp(10px,1vw,14px);
	font-weight:600;
}

.script-title h2{
	margin:0;
	font-size:clamp(28px,5vw,76px);
	line-height:.95;
	letter-spacing:-.05em;
}

/* Schermata di caricamento */

.lazy-showcase.loading::before{
	content:"Loading";
	position:absolute;
	z-index:0;
	inset:0;
	display:grid;
	place-items:center;
	color:#777;
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	background:linear-gradient(
		100deg,
		#111 35%,
		#1b1b1b 50%,
		#111 65%
	);
	background-size:300% 100%;
	animation:loading 1.3s linear infinite;
}

@keyframes loading{
	to{
		background-position:-300% 0;
	}
}

/* Contenuto finale */

.hero-content2{
	position:absolute;
	z-index:2;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	text-align:center;
	color:#fff;
	padding:8% 24px 24px;
	text-shadow:0 2px 30px #000;
}

.hero-content2 b{
	padding:7px 20px;
	background:rgba(255,255,255,.12);
	color:#fff;
	border:1px solid rgba(255,255,255,.1);
	border-radius:999px;
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(10px);
}

.discord-button{
	color:#fff;
	text-decoration:none;
}

/* Titoli generali */

h4{
	font-weight:200;
}

.hero-content h2{
	margin:0;
}

h2{
	margin:6px 0 0;
	font-family:Impact,"Arial Narrow",sans-serif;
	font-weight:400;
	font-size:clamp(32px,5vw,72px);
}

h3{
	font-family:"Times New Roman",Times,serif;
	font-style:italic;
	font-weight:300;
	letter-spacing:.03em;
	text-shadow:
		0 2px 4px rgba(0,0,0,.9),
		0 8px 25px rgba(0,0,0,.65);
}

/* Crediti */

.credits{
	margin-top:20px;
	font-size:10px;
	font-weight:300;
	letter-spacing:.08em;
	color:rgba(255,255,255,.55);
}

.credits2{
	margin-top:-7px;
	font-size:9px;
	font-weight:700;
	letter-spacing:.35em;
	color:rgba(255,255,255,.7);
}

.credits3{
	font-size:24px;
	font-weight:700;
	letter-spacing:.15em;
	color:#fff;
	
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.credits3 img{
	width:1.2em;
	height:1.2em;
	object-fit:contain;
	flex-shrink:0;
	transform:translateY(4px);
}

body.site-loading{
	overflow:hidden;
}

#site-loader{
	position:fixed;
	z-index:99999;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.94);
	opacity:1;
	visibility:visible;
	transition:
		opacity .7s ease,
		visibility .7s ease;
}

#site-loader.hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.loader-box{
	width:min(320px,calc(100% - 50px));
	text-align:center;
	color:#fff;
}

.loader-title{
	font-size:18px;
	font-weight:700;
	letter-spacing:.18em;
}

.loader-subtitle{
	margin-top:7px;
	color:rgba(255,255,255,.45);
	font-size:9px;
	font-weight:400;
	letter-spacing:.25em;
	text-transform:uppercase;
}

.loader-bar{
	width:100%;
	height:2px;
	margin-top:22px;
	overflow:hidden;
	background:rgba(255,255,255,.15);
}

#loader-progress{
	width:0;
	height:100%;
	background:#fff;
	transition:width .45s ease;
}

#loader-percent{
	margin-top:9px;
	color:rgba(255,255,255,.45);
	font-size:8px;
	letter-spacing:.15em;
}

/* Telefono */

@media(max-width:600px){
	
	.credits2{
		margin-top:-4px;
		font-size:7px;
	}

	.showcase::before{
		display:none;
	}
	
	.showcase{
		display:block;
		width:100%;
		height:auto;
		aspect-ratio:16/9;
		overflow:hidden;
	}

	.showcase > img,
	.showcase > video{
		position:relative;
		inset:auto;
		display:block;
		width:100%;
		height:auto;
		aspect-ratio:16/9;
		object-fit:contain;
		object-position:center;
	}

	.showcase::before{
		display:none;
	}

	.hero-content span{
		max-width:280px;
		line-height:1.35;
	}

	.hero-content b{
		margin-top:17px;
		padding:8px 14px;
		font-size:11px;
	}

	.script-title{
		top:auto;
		left:16px;
		right:16px;
		bottom:14px;
	}

	.script-title small{
		margin-bottom:2px;
		font-size:9px;
	}

	.script-title h2{
		font-size:20px;
		line-height:1;
		letter-spacing:-.02em;
	}

	.script-title h3{
		margin:4px 0 0;
		font-size:11px;
		line-height:1.2;
		font-weight:300;
	}

	.credits2{
		margin-top:-4px;
		font-size:7px;
	}

	.credits3{
		font-size:16px;
	}

	.hero-content span{
		max-width:280px;
		line-height:1.35;
	}

	.hero-content b{
		margin-top:17px;
		padding:8px 14px;
		font-size:11px;
	}

	.script-title{
		top:auto;
		left:16px;
		right:16px;
		bottom:14px;
	}

	.script-title small{
		margin-bottom:2px;
		font-size:9px;
	}

	.script-title h2{
		font-size:20px;
		line-height:1;
		letter-spacing:-.02em;
	}

	.script-title h3{
		margin:4px 0 0;
		font-size:11px;
		line-height:1.2;
		font-weight:300;
	}

	.credits2{
		font-size:7px;
	}

	.credits3{
		font-size:16px;
	}
	
	.hero-content .credits2{
		bottom:10px;
		margin:0;
		font-size:7px;
	}
}

/* Accessibilità */

@media(prefers-reduced-motion:reduce){

	html{
		scroll-behavior:auto;
	}

	.showcase > img,
	.showcase > video{
		transition:none;
	}

	.lazy-showcase.loading::before{
		animation:none;
	}
}








@media screen and (max-width:600px){

	.showcase{
		position:relative !important;
		display:block !important;
		width:100vw !important;
		height:56.25vw !important;
		min-height:0 !important;
		aspect-ratio:auto !important;
		overflow:hidden !important;
	}

	.showcase > video,
	.showcase > img{
		position:absolute !important;
		inset:0 !important;
		display:block !important;
		width:100% !important;
		height:100% !important;
		max-width:none !important;
		transform:none !important;
		object-fit:contain !important;
		object-position:center center !important;
	}

	.showcase::before{
		display:none !important;
	}

	.hero-content,
	.hero-content2,
	.script-title{
		z-index:2 !important;
	}
}








.showcase video{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:scale(1.015);
	background:#000;
}

@media(max-width:600px){
	.showcase video{
		width:100% !important;
		height:100% !important;
		object-fit:cover !important;
		object-position:center !important;
		transform:scale(1.02) !important;
	}
}



.hero-content .credits2{
	position:absolute !important;
	left:0 !important;
	right:0 !important;
	bottom:24px !important;
	margin:0 !important;
	text-align:center;
}

@media(max-width:600px){
	.hero-content .credits2{
		bottom:10px !important;
		font-size:7px;
	}
}