/* HERO SLIDER */
.slider {
	position:relative;
	width:100%;
	height:100vh;
	height: 100dvh; /* "dynamic viewport height" */
	overflow:hidden;
	background:#000;
	color:#fff;
}
/* Altezza 100% anche su Safari */
@supports (-webkit-touch-callout: none) {
.slider {
        height: 100dvh;
    }
}
.slide{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity var(--fade) cubic-bezier(.77,0,.18,1);
}
.slide.active{
	opacity:1;
	z-index:2;
}
.slide img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:blur(10px);
	transform:scale(1.2);
	transition:filter 1.5s ease, transform 8s ease;
}
.slide img{
  object-position: 65% center; /* sposta a sinistra, centro verticale */
}
.slide.active img{
	filter:blur(0);
	transform:scale(1.05); /* Ken Burns */
}
.overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.4));
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	padding:20px;
}
.content{
	/* max-width:900px;*/
	width:90%;
}

.title span,
.subtitle span {
	display:inline-block;
	opacity:0;
	transform:translateY(40px);

/* DIMENSIONI CARATTERI HERO */
}
.content h1 {
    font-family: var(--font-general);
    font-size: 3.53em; /* 46px */
    font-weight: 400;
	color: #D7D1C2;
    text-transform: uppercase;
    line-height:46px;
	letter-spacing:-4px;
    margin: 15px auto; 
	 /* Animazione */
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUpHero 1.2s cubic-bezier(.16,.84,.44,1) forwards;
    animation-delay: 0.4s;
}
@keyframes fadeUpHero {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.content h2 {
    font-family: var(--font-general);
    font-size: 2.15em; /* 28px */
    font-weight: 400;
	text-transform: uppercase;
    color: #E91F33;
    line-height: 32px;
	margin-bottom:35px;
/* Animazione */
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUpHero 1s cubic-bezier(.16,.84,.44,1) forwards;
    animation-delay: 0.5s; /* leggero ritardo rispetto all'h1 */
}
/* arrows */
.arrow {
	display:none;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	font-size:40px;
	cursor:pointer;
	z-index:5;
	padding:20px;
	opacity:.7;
}

.left{
	left:20px;
}
.right{
	right:20px;
}
/* dots */
.dots{
	position:absolute;
	bottom:40px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	gap:12px;
	z-index:10;
}
.dot{
	width:12px;
	height:12px;
	border-radius:50%;
	background:rgba(255,255,255,0.4);
	cursor:pointer;
	transition:all .4s ease;
}
.dot.active{
	background:#fff;
	transform:scale(1.4);
}
.btn {
	position: relative;
	font-family: var(--font-general);
	font-size: 1.15em;
	text-transform:uppercase;
	font-weight: 600; /* <-- qui cambi il peso del font */
	margin-top: 20px;
	padding: 18px 35px;
	border-radius:10px;
	color: #FFF;
	background:rgba(209, 10, 17, 0.8);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	overflow: hidden;
	opacity: 0;
	transform: translateY(40px);
	transition: transform .25s ease-out, background .25s ease-out, border-color .25s ease-out;
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #121C22; /* colore layer che anima sopra */
	transform: translateY(100%);
	transition: transform .25s ease-out;
	z-index: -1;
}
.btn span {
	position: relative;
	z-index: 1;
	color: #FFF; /* testo iniziale nero */
	transition: none; /* testo cambia subito */
}
/* hover */
.btn:hover {
	transform: translateY(-3px);
	border-color: #121C22;
	text-decoration:none;
}
.btn:hover span {
	color: #CCC; /* testo diventa bianco subito */
}
.btn:hover::before {
	transform: translateY(0); /* layer scorre sopra */
}
/* ==========================
   RESPONSIVE BREAKPOINTS
   ========================== */
/* Layout tablet portrait: da 480 px a 820 px. Eredita stili da: Layout mobile. */
@media only screen and (min-width: 480px ) {
/* DIMENSIONI CARATTERI HERO */
.content h1 {
    font-size: 5.07em; /* 66px */
    font-weight: 400;
    line-height:66px;
	letter-spacing:-4px;
    margin: 15px auto; 
}
.content h2 {
    font-size: 2.30em; /* 30px */
    font-weight: 400;
    line-height: 30px;
	margin-bottom:30px;
	}
}
/* Layout landscape: da 820 px a 1024 px max.  Eredita stili da: Layout mobile e Layout tablet portrait */
@media only screen and (min-width: 820px ) {
/* arrows */
.arrow {
	display:block;
}
/* DIMENSIONI CARATTERI HERO */
.content h1 {
    font-size: 5.07em; /* 66px */
    font-weight: 400;
    line-height:66px;
	letter-spacing:-4px;
    margin: 15px auto; 
}
.content h2 {
    font-size: 2.30em; /* 30px */
    font-weight: 400;
    line-height: 30px;
	margin-bottom:30px;
	}
}
/* Layout desktop: da 1024 px a superiori. Eredita stili da: Layout tablet landscape */
@media only screen and (min-width: 1024px ) {
/* DIMENSIONI CARATTERI HERO */
.content h1 {
    font-size: 5.84em; /* 76px */
    font-weight: 400;
    text-transform: uppercase;
    line-height:76px;
	letter-spacing:-4px;
    margin: 15px auto;
}
.content h2 {
    font-size: 2.76em; /* 36px */
    font-weight: 400;
	text-transform: uppercase;
    line-height: 36px;
	margin-bottom:30px;
}
}