/* --------------------------------------------------------------
   AL QUÈRTO HERO ROUTER
-------------------------------------------------------------- */

.aq-hero-router {
	--aq-hero-mx: 50%;
	--aq-hero-my: 50%;

	position: relative;

	width: 100%;
	min-height: 100svh;

	overflow: hidden;
	isolation: isolate;

	background: #03050b;
	color: #fff;
}


/* --------------------------------------------------------------
   DECORATION
-------------------------------------------------------------- */

.aq-hero-router__noise {
	position: absolute;
	inset: 0;

	z-index: 15;

	pointer-events: none;

	opacity: .12;

	mix-blend-mode: screen;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, .055) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .045) 1px,
			transparent 1px
		);

	background-size:
		7px 7px,
		11px 11px;

	-webkit-mask-image:
		linear-gradient(
			180deg,
			transparent,
			#000 18%,
			#000 84%,
			transparent
		);

	mask-image:
		linear-gradient(
			180deg,
			transparent,
			#000 18%,
			#000 84%,
			transparent
		);
}


.aq-hero-router__cursor {
	position: absolute;

	left: var(--aq-hero-mx);
	top: var(--aq-hero-my);

	z-index: 18;

	width: 360px;
	height: 360px;

	margin:
		-180px
		0
		0
		-180px;

	border-radius: 50%;

	pointer-events: none;

	opacity: .62;

	mix-blend-mode: screen;

	background:
		radial-gradient(
			circle,
			rgba(5, 60, 255, .50),
			rgba(5, 60, 255, .16) 38%,
			transparent 68%
		);

	filter: blur(4px);
}


.aq-hero-router__outline {
	position: absolute;

	right: -2vw;
	top: 50%;

	z-index: 8;

	transform:
		translateY(-50%)
		rotate(90deg);

	font-family: var(--aq-font-display);
	font-size: clamp(8rem, 18vw, 21rem);
	font-weight: 400;
	line-height: .8;
	letter-spacing: -.02em;

	color: transparent;

	-webkit-text-stroke:
		1px rgba(255, 255, 255, .18);

	opacity: .62;

	pointer-events: none;

	white-space: nowrap;
}


/* --------------------------------------------------------------
   COLUMN STAGE
-------------------------------------------------------------- */

.aq-hero-router__stage {
	position: absolute;
	inset: 0;

	z-index: 2;

	display: grid;
	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	transition:
		grid-template-columns
		.85s cubic-bezier(.16, 1, .3, 1);
}


.aq-hero-router__stage[data-active="0"] {
	grid-template-columns:
		1.42fr .86fr .86fr .86fr;
}

.aq-hero-router__stage[data-active="1"] {
	grid-template-columns:
		.86fr 1.42fr .86fr .86fr;
}

.aq-hero-router__stage[data-active="2"] {
	grid-template-columns:
		.86fr .86fr 1.42fr .86fr;
}

.aq-hero-router__stage[data-active="3"] {
	grid-template-columns:
		.86fr .86fr .86fr 1.42fr;
}


/* --------------------------------------------------------------
   PANEL
-------------------------------------------------------------- */

.aq-hero-router__panel {
	position: relative;

	min-width: 0;

	overflow: hidden;

	border-right:
		1px solid rgba(255, 255, 255, .17);

	clip-path: inset(0 100% 0 0);

	animation:
		aqHeroPanelReveal
		1.05s
		cubic-bezier(.16, 1, .3, 1)
		both;
}


.aq-hero-router__panel:nth-child(1) {
	animation-delay: .12s;
}

.aq-hero-router__panel:nth-child(2) {
	animation-delay: .25s;
}

.aq-hero-router__panel:nth-child(3) {
	animation-delay: .38s;
}

.aq-hero-router__panel:nth-child(4) {
	animation-delay: .51s;
}


.aq-hero-router__panel::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 2;

	opacity: .66;

	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, .10),
			rgba(0, 0, 0, .72)
		),
		linear-gradient(
			120deg,
			rgba(5, 60, 255, .42),
			rgba(2, 9, 34, .08) 45%,
			rgba(5, 60, 255, .26)
		),
		radial-gradient(
			circle at 50% 36%,
			rgba(5, 60, 255, .36),
			transparent 22rem
		);

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


.aq-hero-router__panel.is-active::before {
	opacity: .46;
}


/* Image */

.aq-hero-router__panel-image {
	position: absolute;

	inset:
		-3vh
		-4vw;

	z-index: 1;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	transform:
		scale(1.10)
		translate3d(
			calc(var(--aq-panel-tx, 0) * 1px),
			calc(var(--aq-panel-ty, 0) * 1px),
			0
		);

	filter:
		saturate(1.05)
		contrast(1.08)
		brightness(.80);

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


.aq-hero-router__panel.is-active
.aq-hero-router__panel-image,
.aq-hero-router__panel:hover
.aq-hero-router__panel-image {

	transform:
		scale(1.02)
		translate3d(
			calc(var(--aq-panel-tx, 0) * 1px),
			calc(var(--aq-panel-ty, 0) * 1px),
			0
		);

	filter:
		saturate(1.10)
		contrast(1.08)
		brightness(.96);
}


/* Shade */

.aq-hero-router__panel-shade {
	position: absolute;

	inset:
		auto 0 0 0;

	z-index: 3;

	height: 44%;

	background:
		linear-gradient(
			transparent,
			rgba(0, 0, 0, .74)
		);

	pointer-events: none;
}


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

.aq-hero-router__panel-content {
	position: absolute;

	left: clamp(18px, 2.2vw, 34px);
	right: clamp(18px, 2.2vw, 34px);
	bottom: clamp(74px, 8vw, 112px);

	z-index: 4;

	max-width: 380px;

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


.aq-hero-router__panel:not(.is-active)
.aq-hero-router__panel-content {

	transform: translateY(24px);

	opacity: .70;
}


.aq-hero-router__panel-num {
	position: absolute;

	left: 0;
	bottom: calc(100% + 118px);

	font-family: var(--aq-font-display);
	font-size: clamp(3.2rem, 8vw, 8rem);
	font-weight: 400;
	line-height: .8;
	letter-spacing: -.02em;

	color: rgba(255, 255, 255, .24);

	-webkit-text-stroke:
		1px rgba(255, 255, 255, .28);
}


.aq-hero-router__panel-eyebrow {
	margin: 0 0 12px;

	color: rgba(255, 255, 255, .78);

	font-family: var(--aq-font-body);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .09em;

	text-transform: uppercase;
}


.aq-hero-router__panel h2 {
	margin: 0;

	font-family: var(--aq-font-display);
	font-size: clamp(3.2rem, 6vw, 4.4rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;

	text-transform: uppercase;

	transform: translateX(-3px);
}


.aq-hero-router__panel-text {
	max-width: 300px;

	margin: 16px 0 0;

	color: rgba(255, 255, 255, .9);

	font-family: var(--aq-font-body);
	font-size: .97rem;
	font-weight: 400;
	line-height: 1.45;
}


/* Full panel link */

.aq-hero-router__hit {
	position: absolute;
	inset: 0;

	z-index: 10;

	cursor: pointer;
}


.aq-hero-router__hit:focus-visible {
	outline:
		3px solid rgba(255, 255, 255, .9);

	outline-offset: -10px;
}


/* Elementor editor:
   prevents links intercepting widget controls.
-------------------------------------------------------------- */

.elementor-editor-active
.aq-hero-router__hit {
	pointer-events: none;
}


/* --------------------------------------------------------------
   MAIN COPY
-------------------------------------------------------------- */

.aq-hero-router__copy {
	position: absolute;

	left: clamp(20px, 4.8vw, 72px);
	top: clamp(112px, 15vh, 168px);

	z-index: 22;

	width: min(700px, 48vw);

	pointer-events: none;
}


.aq-hero-router__kicker {
	margin: 0 0 20px;

	color: #baceff;

	font-family: var(--aq-font-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .09em;

	text-transform: uppercase;
}


.aq-visually-hidden {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip:
		rect(0, 0, 0, 0) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


.aq-hero-router__display {
	margin: 0;

	font-family: var(--aq-font-display);
	font-size: clamp(3rem, 7.6vw, 6.6rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;

	text-transform: uppercase;
}


.aq-hero-router__display span,
.aq-hero-router__display em {

	display: block;

	opacity: 0;

	transform:
		translateY(35px)
		skewX(-5deg);

	animation:
		aqHeroBigTitle
		.88s
		cubic-bezier(.16, 1, .3, 1)
		both;
}


.aq-hero-router__display span {
	animation-delay: .78s;
}


.aq-hero-router__display em {
	color: #dbe6ff;

	font-style: normal;

	animation-delay: .94s;
}


.aq-hero-router__actions {
	display: flex;

	gap: 14px;

	margin-top: 34px;

	pointer-events: auto;

	opacity: 0;

	animation:
		aqHeroRise
		.8s
		cubic-bezier(.16, 1, .3, 1)
		both
		1.10s;
}


.aq-hero-router__button {
	position: relative;

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

	min-width: 148px;

	overflow: hidden;

	padding: 15px 24px;

	border:
		1px solid rgba(255, 255, 255, .9);

	color: #fff;

	font-family: var(--aq-font-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .065em;

	text-align: center;
	text-transform: uppercase;

	transition:
		color .3s ease,
		background .3s ease;
}


.aq-hero-router__button:hover {
	background: #fff;

	color: var(--aq-blue);
}


/* --------------------------------------------------------------
   SCROLL INDICATOR
-------------------------------------------------------------- */

.aq-hero-router__scroll {
	position: absolute;

	left: clamp(20px, 4.8vw, 72px);
	bottom: clamp(22px, 3.5vw, 46px);

	z-index: 28;

	display: inline-flex;
	align-items: center;

	gap: 14px;

	max-width:
		min(520px, calc(100vw - 40px));

	color: rgba(255, 255, 255, .86);

	font-family: var(--aq-font-body);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .045em;

	text-transform: uppercase;

	opacity: 0;

	animation:
		aqHeroRise
		.8s
		cubic-bezier(.16, 1, .3, 1)
		both
		1.24s;
}


.aq-hero-router__scroll > span {
	color: #fff;
}


.aq-hero-router__scroll strong {
	color: #baceff;

	font-size: inherit;
	font-weight: inherit;
}


.aq-hero-router__scroll i {
	position: relative;

	display: block;

	width: 54px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#fff,
			rgba(255, 255, 255, .12)
		);
}


.aq-hero-router__scroll i::after {
	content: "";

	position: absolute;

	right: -2px;
	top: 50%;

	width: 7px;
	height: 7px;

	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;

	transform:
		translateY(-50%)
		rotate(-45deg);
}


/* --------------------------------------------------------------
   ANIMATIONS
-------------------------------------------------------------- */

@keyframes aqHeroPanelReveal {

	to {
		clip-path: inset(0);
	}

}


@keyframes aqHeroBigTitle {

	to {
		opacity: 1;

		transform: none;
	}

}


@keyframes aqHeroRise {

	from {
		opacity: 0;

		transform: translateY(24px);
	}

	to {
		opacity: 1;

		transform: none;
	}

}


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

@media (max-width: 1080px) {

	.aq-hero-router__stage[data-active="0"],
	.aq-hero-router__stage[data-active="1"],
	.aq-hero-router__stage[data-active="2"],
	.aq-hero-router__stage[data-active="3"] {

		grid-template-columns:
			repeat(4, 1fr);
	}


	.aq-hero-router__copy {
		width: min(700px, 62vw);
	}


	.aq-hero-router__panel-content {
		left: 18px;
		right: 18px;
	}


	.aq-hero-router__cursor {
		display: none;
	}

}


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

@media (max-width: 767px) {

	.aq-hero-router {
		display: flex;
		flex-direction: column;

		min-height: auto;

		padding-top: 0;
	}


	.aq-hero-router__copy {
		position: relative;

		order: 1;

		left: auto;
		top: auto;

		width: 100%;

		padding:
			46px
			18px
			38px;

		background: #001fad;
	}


	.aq-hero-router__display {
		font-size:
			clamp(4rem, 18vw, 6.8rem);
	}


	.aq-hero-router__stage {
		position: relative;

		order: 2;

		display: grid;

		grid-template-columns: 1fr !important;
	}


	.aq-hero-router__panel {
		min-height: 52svh;

		border-right: 0;

		border-bottom:
			1px solid rgba(255, 255, 255, .16);

		clip-path: inset(0);

		animation: none;
	}


	.aq-hero-router__panel:not(.is-active)
	.aq-hero-router__panel-content {

		transform: none;

		opacity: 1;
	}


	.aq-hero-router__panel-num {
		bottom: calc(100% + 48px);
	}


	.aq-hero-router__outline {
		display: none;
	}


	.aq-hero-router__scroll {
		position: relative;

		order: 3;

		left: auto;
		bottom: auto;

		width: 100%;
		max-width: none;

		padding: 22px 18px;

		background:
			rgba(3, 5, 11, .96);
	}


	.aq-hero-router__actions {
		flex-wrap: wrap;
	}


	.aq-hero-router__button {
		min-width: 140px;
	}

}


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

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

	.aq-hero-router *,
	.aq-hero-router *::before,
	.aq-hero-router *::after {

		animation-duration: .01ms !important;
		animation-delay: 0ms !important;

		transition-duration: .01ms !important;
	}

}