/* --------------------------------------------------------------
   AL QUÈRTO - FULL VIEWPORT CONTENT BANDS
-------------------------------------------------------------- */

.aq-snap-band {
	--aq-img-x: 0px;
	--aq-img-y: 0px;

	--aq-photo-x: 0px;
	--aq-photo-y: 0px;

	--aq-scroll-y: 0px;
	--aq-scroll-rotate: 0deg;

	position: relative;

	display: flex;
	align-items: center;

	width: 100%;

	height: 100vh;
	height: 100svh;

	min-height: 800px;

	overflow: hidden;
	isolation: isolate;

	padding:
		clamp(44px, 5vw, 76px)
		clamp(20px, 5vw, 76px);

	color:
		var(--aq-black, #04070f);

	background:
		radial-gradient(
			circle at 88% 52%,
			rgba(5, 60, 255, .13),
			transparent 32rem
		),
		linear-gradient(
			180deg,
			#fffef9 0%,
			#fbfaf5 100%
		);
}


/* Alternanza della luce */

.aq-snap-band--text-right {
	background:
		radial-gradient(
			circle at 12% 48%,
			rgba(5, 60, 255, .13),
			transparent 32rem
		),
		linear-gradient(
			180deg,
			#fbfaf5 0%,
			#fffef9 100%
		);
}


/* --------------------------------------------------------------
   GHOST TEXT
-------------------------------------------------------------- */

.aq-snap-band__ghost {
	position: absolute;

	z-index: 0;

	top: 7%;

	color:
		rgba(5, 60, 255, .055);

	font-family:
		var(--aq-font-display);

	font-size:
		clamp(10rem, 22vw, 28rem);

	font-weight: 400;
	line-height: .72;
	letter-spacing: -.055em;

	text-transform: uppercase;
	white-space: nowrap;

	pointer-events: none;
}


.aq-snap-band--text-left
.aq-snap-band__ghost {

	right: -3vw;
}


.aq-snap-band--text-right
.aq-snap-band__ghost {

	left: -3vw;
}


/* --------------------------------------------------------------
   GRID
-------------------------------------------------------------- */

.aq-snap-band__inner {
	position: relative;

	z-index: 2;

	display: grid;

	width: min(1540px, 100%);

	margin: 0 auto;

	gap:
		clamp(44px, 7vw, 120px);

	align-items: center;
}


.aq-snap-band--text-left
.aq-snap-band__inner {

	grid-template-columns:
		minmax(320px, .88fr)
		minmax(420px, 1.12fr);

	grid-template-areas:
		"content visual";
}


.aq-snap-band--text-right
.aq-snap-band__inner {

	grid-template-columns:
		minmax(420px, 1.12fr)
		minmax(320px, .88fr);

	grid-template-areas:
		"visual content";
}


/* --------------------------------------------------------------
   CONTENT
-------------------------------------------------------------- */

.aq-snap-band__content {
	grid-area: content;

	position: relative;

	z-index: 3;

	max-width: 700px;

	opacity: 0;

	transform:
		translateY(44px);

	transition:
		opacity .8s cubic-bezier(.16, 1, .3, 1),
		transform .8s cubic-bezier(.16, 1, .3, 1);
}


.aq-snap-band.is-in-view
.aq-snap-band__content {

	opacity: 1;

	transform: none;
}


/* --------------------------------------------------------------
   META
-------------------------------------------------------------- */

.aq-snap-band__meta {
	display: flex;
	align-items: center;

	gap: 12px;

	margin-bottom:
		clamp(16px, 2vw, 24px);

	color:
		var(--aq-blue, #053cff);

	font-family:
		var(--aq-font-body);

	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .09em;

	text-transform: uppercase;
}


.aq-snap-band__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 38px;
	height: 27px;

	padding: 0 8px;

	color: #fff;

	background:
		var(--aq-blue, #053cff);
}


.aq-snap-band__kicker {
	display: inline-flex;
	align-items: center;

	gap: 10px;
}


.aq-snap-band__kicker::before {
	content: "";

	width: 24px;
	height: 2px;

	background:
		currentColor;
}


/* --------------------------------------------------------------
   TITLE
-------------------------------------------------------------- */

.aq-snap-band h2 {
max-width: 670px;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-family: var(--aq-font-display);
  font-size: clamp(3.2rem, 5.3vw, 4rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------
   TEXT
-------------------------------------------------------------- */

.aq-snap-band__text {
	max-width: 650px;

	color: #171e2f;

	font-family:
		var(--aq-font-body);

	font-size:
		clamp(1rem, 1.25vw, 1.18rem);

	font-weight: 400;
	line-height: 1.56;
}


.aq-snap-band__text p {
	margin: 0;
}


.aq-snap-band__text p + p {
	margin-top: 14px;
}


.aq-snap-band__text strong {
	font-weight: 800;
}


/* --------------------------------------------------------------
   BUTTON
-------------------------------------------------------------- */

.aq-snap-band__button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 16px;

	width: fit-content;

	margin-top:
		clamp(26px, 3vw, 38px);

	padding: 16px 23px;

	border:
		1px solid var(--aq-blue, #053cff);

	color: #fff;

	background:
		var(--aq-blue, #053cff);

	box-shadow:
		0 20px 54px
		rgba(5, 60, 255, .18);

	font-family:
		var(--aq-font-body);

	font-size: .74rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .07em;

	text-transform: uppercase;

	transition:
		color .35s ease,
		background .35s ease,
		transform .35s cubic-bezier(.16, 1, .3, 1),
		box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}


.aq-snap-band__button i {
	font-style: normal;

	transition:
		transform .35s cubic-bezier(.16, 1, .3, 1);
}


.aq-snap-band__button:hover,
.aq-snap-band__button:focus-visible {

	color:
		var(--aq-blue, #053cff);

	background: #fff;

	transform:
		translateY(-4px);

	box-shadow:
		0 30px 70px
		rgba(5, 60, 255, .24);
}


.aq-snap-band__button:hover i,
.aq-snap-band__button:focus-visible i {

	transform:
		translateX(5px);
}


/* --------------------------------------------------------------
   VISUAL
-------------------------------------------------------------- */

.aq-snap-band__visual {
	grid-area: visual;

	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height:
		min(72vh, 760px);

	opacity: 0;

	transform:
		translateY(42px);

	transition:
		opacity .9s cubic-bezier(.16, 1, .3, 1),
		transform .9s cubic-bezier(.16, 1, .3, 1);
}


.aq-snap-band.is-in-view
.aq-snap-band__visual {

	opacity: 1;

	transform: none;
}


/*
 * Alone / sfumatura sotto la fotografia.
 * È volutamente esterna alla foto.
 */
.aq-snap-band__visual::after {
	content: "";

	position: absolute;

	z-index: 0;

	left: 10%;
	right: 10%;

	bottom: 0;

	height: 36%;

	background:
		radial-gradient(
			ellipse at center,
			rgba(5, 60, 255, .38) 0%,
			rgba(5, 60, 255, .16) 38%,
			transparent 72%
		);

	filter:
		blur(32px);

	opacity: .85;

	pointer-events: none;
}


/* --------------------------------------------------------------
   PHOTO
-------------------------------------------------------------- */

.aq-snap-band__photo {
	position: relative;

	z-index: 2;

	width:
		min(92%, 760px);

	height:
		min(70vh, 740px);

	margin: 0;

	overflow: hidden;

	border:
		1px solid rgba(5, 60, 255, .22);

	background: #071a5c;

	box-shadow:
		0 46px 120px
		rgba(5, 60, 255, .22);

	transform:
		translate3d(
			var(--aq-photo-x),
			var(--aq-photo-y),
			0
		)
		rotate(
			calc(
				var(--aq-photo-tilt)
				+
				var(--aq-scroll-rotate)
			)
		);

	transition:
		transform .25s ease-out;
}


/* Tonalità blu */

.aq-snap-band__photo::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 2;

	mix-blend-mode: color;

	opacity: 0;

	pointer-events: none;
}


.aq-snap-band--blue
.aq-snap-band__photo::before {

	opacity: 1;
}


/*
 * Sfumatura scura / blu sul fondo della foto.
 */
.aq-snap-band__photo::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 3;

	pointer-events: none;
}


.aq-snap-band__photo img {
	position: absolute;
	inset: -4%;

	width: 108%;
	height: 108%;

	max-width: none;

	object-fit: cover;

	filter:
		saturate(1.02)
		contrast(1.08)
		brightness(.92);

	transform:
		translate3d(
			var(--aq-img-x),
			calc(
				var(--aq-img-y)
				+
				var(--aq-scroll-y)
			),
			0
		)
		scale(1.055);

	will-change:
		transform;
}


/* --------------------------------------------------------------
   ELEMENTOR EDITOR
-------------------------------------------------------------- */

.elementor-editor-active
.aq-snap-band__content,
.elementor-editor-active
.aq-snap-band__visual {

	opacity: 1;

	transform: none;
}


/* --------------------------------------------------------------
   DESKTOP CON VIEWPORT BASSO
   <= 800px di altezza:
   niente fascia bloccata a viewport,
   contenuto libero di crescere.
-------------------------------------------------------------- */

@media
	(min-width: 1024px)
	and
	(max-height: 800px) {

	.aq-snap-band {
		height: auto;
		min-height: 100svh;

		overflow: visible;
	}


	/*
	 * Manteniamo foto e contenuto centrati,
	 * ma permettiamo alla fascia di diventare
	 * più alta del viewport se necessario.
	 */
	.aq-snap-band__inner {
		align-items: center;
	}


	/*
	 * Evitiamo che il blocco visuale imponga
	 * un'altezza minima eccessiva.
	 */
	.aq-snap-band__visual {
		min-height: 0;
	}


	/*
	 * La foto rimane proporzionata al viewport,
	 * ma non forza più la fascia a 800px.
	 */
	.aq-snap-band__photo {
		height:
			min(
				68vh,
				620px
			);
	}

}


/* --------------------------------------------------------------
   TABLET / MOBILE
-------------------------------------------------------------- */

@media (max-width: 1023px) {

	.aq-snap-band {
		height: auto;

		min-height: 100svh;

		padding:
			80px
			24px;
	}


	.aq-snap-band--text-left
	.aq-snap-band__inner,
	.aq-snap-band--text-right
	.aq-snap-band__inner {

		grid-template-columns: 1fr;

		grid-template-areas:
			"content"
			"visual";

		gap: 52px;
	}


	.aq-snap-band__content {
		max-width: 760px;
	}


	.aq-snap-band h2 {
		font-size:
			clamp(3rem, 10vw, 5rem);
	}


	.aq-snap-band__visual {
		min-height: 58svh;
	}


	.aq-snap-band__photo {
		width: 92%;

		height:
			min(62svh, 660px);
	}

}


/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

@media (max-width: 767px) {

	.aq-snap-band {
		padding:
			70px
			18px;
	}


	.aq-snap-band h2 {
		font-size:
			clamp(2.8rem, 13vw, 4.6rem);
	}


	.aq-snap-band__text {
		font-size: 1rem;
	}


	.aq-snap-band__visual {
		min-height: 52svh;
	}


	.aq-snap-band__photo {
		width: 100%;

		height: 52svh;
	}


	.aq-snap-band__ghost {
		font-size: 12rem;
	}

}


/* --------------------------------------------------------------
   REDUCED MOTION
-------------------------------------------------------------- */

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

	.aq-snap-band__content,
	.aq-snap-band__visual {

		opacity: 1;

		transform: none;

		transition: none;
	}


	.aq-snap-band__photo,
	.aq-snap-band__photo img {

		transform: none !important;

		transition: none;
	}

}