/* ==========================================================================
   Hero slider home
   File autosufficiente: non dipende dalle vecchie regole in style.css
   ========================================================================== */

/* Contenitore
   -------------------------------------------------------------------------- */
.hedslider {
	position: relative;
	display: block;
	width: 100%;
	height: calc(100vh - 60px);
	height: calc(100svh - 60px);
	overflow: hidden;
	background: #000;
}

@media screen and (max-width: 1024px) {
	.hedslider {
		height: calc(100vh - 55px);
		height: calc(100svh - 55px);
	}
}

/* Logo
   -------------------------------------------------------------------------- */
.hedslider-logo {
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 10;
	max-width: 100%;
	height: auto;
	box-sizing: content-box;
	padding: 30px 40px;
	margin: -30px 0 0 -40px;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), transparent);
}

@media screen and (max-width: 1024px) {
	.hedslider-logo {
		top: 30px;
		left: 30px;
		max-width: 180px;
	}
}

@media screen and (max-width: 667px) {
	.hedslider-logo {
		max-width: 110px;
		padding: 20px 25px;
		margin: -20px 0 0 -25px;
	}
}

/* Slide
   -------------------------------------------------------------------------- */
.hedslide {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: hedslider-fade 20s linear infinite;
	will-change: opacity, transform;
}

.hedslide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* come background-size: cover */
	object-position: center;    /* punto di ritaglio: regolabile per singola slide */
}

.hedslide--1 { animation-delay: -2s; }  /* parte già visibile */
.hedslide--2 { animation-delay: 8s; }

@keyframes hedslider-fade {
	0%   { opacity: 0; transform: scale(1.05); }
	10%  { opacity: 1; }
	50%  { opacity: 1; }
	55%  { opacity: 0; transform: scale(1); }
	100% { opacity: 0; transform: scale(1); }
}

/* Pulsante scroll
   -------------------------------------------------------------------------- */
.scroll-btn {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	z-index: 10;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus {
	color: #fff;
	opacity: 0.8;
}

.scroll-btn .mouse {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 35px;
	height: 55px;
	margin: 0 auto 20px;
	border: 3px solid #fff;
	border-radius: 23px;
}

.scroll-btn .mouse > * {
	position: absolute;
	top: 29%;
	left: 50%;
	display: block;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: #fff;
	border-radius: 50%;
	animation: hedslider-mouse 2.5s linear infinite;
}

@keyframes hedslider-mouse {
	0%   { opacity: 1; top: 29%; }
	15%  { opacity: 1; top: 50%; }
	50%  { opacity: 0; top: 50%; }
	100% { opacity: 0; top: 29%; }
}

/* Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hedslide { animation: none; }
	.hedslide--1 { opacity: 1; }
	.scroll-btn .mouse > * { animation: none; }
}