.bekaa-fleet-hover-showcase {
	--fleet-paper: #404040;
	--fleet-ink: #fff;
	--fleet-red: #ec1d25;
	--fleet-guide: rgba(17, 17, 17, 0.2);
	--fleet-page-margin: clamp(56px, 5vw, 96px);
	--fleet-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fleet-display: var(--bekaa-display, "Gilda Display", Georgia, "Times New Roman", serif);
	position: relative;
	width: 100vw;
	min-height: 100vh;
	margin-left: calc(50% - 50vw);
	padding: 3em 0 6em;
	overflow: hidden;
	background: var(--fleet-ink);
	color: var(--fleet-paper);
	font-family: var(--fleet-system);
	font-size: max(16px, 1.111111vw);
	-webkit-font-smoothing: antialiased;
}

.bekaa-fleet-hover-showcase,
.bekaa-fleet-hover-showcase * {
	box-sizing: border-box;
}

.bekaa-fleet-hover-showcase__container {
	width: calc(100% - (2 * var(--fleet-page-margin)));
	margin-inline: var(--fleet-page-margin);
}

.bekaa-fleet-hover-showcase__desktop {
	position: relative;
	z-index: 3;
}

.bekaa-fleet-hover-showcase__stage {
	position: relative;
}

.bekaa-fleet-hover-showcase__layout {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.bekaa-fleet-hover-showcase__media-column {
	position: relative;
	z-index: 4;
	grid-column: 9 / span 4;
	grid-row: 1;
	pointer-events: none;
	will-change: transform;
}

.bekaa-fleet-hover-showcase__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: visible;
}

.bekaa-fleet-hover-showcase__aircraft {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bekaa-fleet-hover-showcase__aircraft.is-exiting {
	z-index: 1;
	animation: bekaa-fleet-showcase-exit 540ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.bekaa-fleet-hover-showcase__aircraft:not(.is-exiting) {
	z-index: 2;
}

.bekaa-fleet-hover-showcase__aircraft-image {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: -42%;
	width: 172%;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transform: translate3d(18%, -50%, 0);
	animation: bekaa-fleet-showcase-enter 1280ms cubic-bezier(0.22, 0.66, 0.38, 1) both;
	will-change: opacity, transform;
}

.bekaa-fleet-hover-showcase img.bekaa-fleet-hover-showcase__aircraft-image {
	max-width: none;
}

.bekaa-fleet-hover-showcase__aircraft-shadow {
	--fleet-shadow-blur: 0.35em;
	--fleet-shadow-opacity: 0.72;
	position: absolute;
	z-index: 0;
	right: 38%;
	bottom: 10%;
	width: 82%;
	height: 1.125em;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(17, 19, 24, 0.28) 0%,
		rgba(17, 19, 24, 0.14) 46%,
		rgba(17, 19, 24, 0) 78%
	);
	opacity: 0;
	transform: translate3d(18%, 0, 0) scaleY(0.55);
	filter: blur(var(--fleet-shadow-blur));
	animation: bekaa-fleet-showcase-shadow-enter 1280ms cubic-bezier(0.22, 0.66, 0.38, 1) both;
	pointer-events: none;
	will-change: opacity, transform;
}

.bekaa-fleet-hover-showcase__aircraft--formation .bekaa-fleet-hover-showcase__aircraft-image {
	top: auto;
	height: auto;
	transform: translate3d(22%, 0, 0);
	animation-name: bekaa-fleet-showcase-formation-enter;
}

.bekaa-fleet-hover-showcase__aircraft-image--far {
	z-index: 1;
	right: -50%;
	bottom: 37%;
	width: 105%;
	animation-delay: 0ms;
}

.bekaa-fleet-hover-showcase__aircraft-image--middle {
	z-index: 2;
	right: -38%;
	bottom: 18%;
	width: 126%;
	animation-delay: 180ms;
}

.bekaa-fleet-hover-showcase__aircraft-image--near {
	z-index: 3;
	right: -42%;
	bottom: 0;
	width: 148%;
	animation-delay: 360ms;
}

.bekaa-fleet-hover-showcase__aircraft-shadow--near {
	--fleet-shadow-blur: 0.4em;
	--fleet-shadow-opacity: 0.76;
	right: 34%;
	bottom: 2%;
	width: 62%;
	animation-delay: 360ms;
}

@keyframes bekaa-fleet-showcase-enter {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes bekaa-fleet-showcase-shadow-enter {
	0% {
		opacity: 0;
		transform: translate3d(18%, 0, 0) scaleY(0.55);
	}

	100% {
		opacity: var(--fleet-shadow-opacity);
		transform: translate3d(0, 0, 0) scaleY(0.55);
	}
}

@keyframes bekaa-fleet-showcase-exit {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	to {
		opacity: 0;
		transform: translate3d(-6%, 0, 0);
	}
}

@keyframes bekaa-fleet-showcase-formation-enter {
	0% {
		opacity: 0;
		transform: translate3d(22%, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.bekaa-fleet-hover-showcase__list {
	position: relative;
	z-index: 3;
	grid-column: 1 / span 5;
	grid-row: 1;
}

.bekaa-fleet-hover-showcase__item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 4.5em 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--fleet-paper);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 300ms ease-out;
	appearance: none;
}

.bekaa-fleet-hover-showcase__item::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(100vw - var(--fleet-page-margin));
	content: "";
}

.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item,
.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item:link,
.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item:visited,
.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item:hover,
.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item:focus,
.bekaa-fleet-hover-showcase a.bekaa-fleet-hover-showcase__item:active {
	color: var(--fleet-paper);
	text-decoration: none;
}

.bekaa-fleet-hover-showcase__title {
	display: block;
	font-family: var(--fleet-display);
	font-size: 2.625em;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.bekaa-fleet-hover-showcase__title::after {
	display: inline;
	color: var(--fleet-red);
	content: ".";
	font-style: normal;
	opacity: 0;
	transition: opacity 180ms ease-out;
}

.bekaa-fleet-hover-showcase__preview {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: calc(160% - 0.5em);
	margin-top: 1.25em;
	border-top: 1px solid var(--fleet-guide);
	border-bottom: 1px solid var(--fleet-guide);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 180ms ease-out,
		visibility 0s linear 180ms;
}

.bekaa-fleet-hover-showcase__item:hover .bekaa-fleet-hover-showcase__preview,
.bekaa-fleet-hover-showcase__item:focus-visible .bekaa-fleet-hover-showcase__preview {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.bekaa-fleet-hover-showcase__metric {
	display: block;
	min-width: 0;
	padding: 0.75em 1em;
	border-left: 1px solid var(--fleet-guide);
}

.bekaa-fleet-hover-showcase__metric:first-child {
	border-left: 0;
	padding-left: 0;
}

.bekaa-fleet-hover-showcase__metric-label,
.bekaa-fleet-hover-showcase__metric-value {
	display: block;
	font-family: var(--fleet-system);
	white-space: nowrap;
}

.bekaa-fleet-hover-showcase__metric-label {
	margin-bottom: 0.5em;
	font-size: 0.5625em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bekaa-fleet-hover-showcase__metric-value {
	font-size: 0.875em;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.bekaa-fleet-hover-showcase__layout.is-hovering .bekaa-fleet-hover-showcase__item {
	opacity: 0.2;
}

.bekaa-fleet-hover-showcase__layout.is-hovering .bekaa-fleet-hover-showcase__item.is-active {
	opacity: 1;
}

.bekaa-fleet-hover-showcase__layout.is-hovering .bekaa-fleet-hover-showcase__item.is-active .bekaa-fleet-hover-showcase__title::after {
	opacity: 1;
}

.bekaa-fleet-hover-showcase__item:focus-visible .bekaa-fleet-hover-showcase__title {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.bekaa-fleet-hover-showcase__guide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	width: 100%;
	height: 100%;
	pointer-events: none;
	will-change: transform;
}

.bekaa-fleet-hover-showcase__guide span {
	position: relative;
	grid-column: 1 / span 8;
	width: calc(100% - 0.5em);
	height: 0.5px;
	margin-right: auto;
	border-top: 0.5px dashed var(--fleet-guide);
}

.bekaa-fleet-hover-showcase__guide span::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0.25em;
	height: 0.25em;
	border-radius: 50%;
	background: var(--fleet-red);
	content: "";
	transform: translate(50%, -55%);
}

@media (max-width: 767px) {
	.bekaa-fleet-hover-showcase {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bekaa-fleet-hover-showcase__item,
	.bekaa-fleet-hover-showcase__aircraft,
	.bekaa-fleet-hover-showcase__aircraft-shadow,
	.bekaa-fleet-hover-showcase__aircraft-image {
		transition: none;
		animation-duration: 1ms;
		animation-delay: 0ms;
	}
}