* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

img, svg, video {
	max-width: 100%;
}

@font-face {
    font-family: AktivGroteskLight;
    src: url(../fonts/AktivGrotesk_W_Lt.eot);
    src: url(../fonts/AktivGrotesk_W_Lt.eot?#iefix) format("embedded-opentype"),url(../fonts/AktivGrotesk_W_Lt.woff) format("woff"),url(../fonts/AktivGrotesk_W_Lt.woff2) format("woff2")
}

@font-face {
    font-family: AktivGroteskMedium;
    src: url(../fonts/AktivGrotesk_W_Md.eot);
    src: url(../fonts/AktivGrotesk_W_Md.eot?#iefix) format("embedded-opentype"),url(../fonts/AktivGrotesk_W_Md.woff) format("woff"),url(../fonts/AktivGrotesk_W_Md.woff2) format("woff2")
}

@font-face {
    font-family: AktivGroteskRegular;
    src: url(../fonts/AktivGrotesk_W_Rg.eot);
    src: url(../fonts/AktivGrotesk_W_Rg.eot?#iefix) format("embedded-opentype"),url(../fonts/AktivGrotesk_W_Rg.woff) format("woff"),url(../fonts/AktivGrotesk_W_Rg.woff2) format("woff2")
}

@font-face {
    font-family: AktivGroteskBold;
    src: url(../fonts/AktivGrotesk_W_Bd.eot);
    src: url(../fonts/AktivGrotesk_W_Bd.eot?#iefix) format("embedded-opentype"),url(../fonts/AktivGrotesk_W_Bd.woff) format("woff"),url(../fonts/AktivGrotesk_W_Bd.woff2) format("woff2")
}

:root {
	--color-saab-grey-1: #34322e;
	--color-saab-yellow: #FFB600;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
	background: #222;
}

::-webkit-scrollbar-thumb {
	background: var(--color-saab-yellow);
	border-radius: 0;
}

::-webkit-scrollbar-track {
	background: #424349;
}

/* * {
	scrollbar-width: thin;
	scrollbar-color: var(--color-saab-yellow) #222;
} */

body {
	margin: 0;
	padding: 0;
	font-family: AktivGroteskRegular, Arial, sans-serif;
	h2 {
		font-family: AktivGroteskMedium, Arial, sans-serif;
		font-size: 2.5rem;
		color: var(--color-saab-yellow);
		line-height: 1.4;
		font-weight: 400;
		margin: 0;
		max-width: 100dvw;
	}
}

#app {
	--padding: 1rem;
	height: 600px;
	position: relative;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	overflow: hidden;
}


.scene-background {
	background-image: url('../assets-mk2/scene-desktop-mk3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	@media (width < 860px) {
		background-image: none;
	}
}


.scene-relative {
	isolation: isolate;
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 600px;		
	display: grid;
	grid-template-areas: 'stack';

	& > * {
		grid-area: stack;
	}
}

.hotspot {
	pointer-events: all;
	cursor: pointer;
	display: flex;
	align-items: center;
	background-color: var(--color-saab-yellow);

	transition: background-color .3s ease, transform .3s ease;
	&:hover {
		background-color: #F49812;
		/* transform: scale(1.1);
		.icon {
			transform: rotate(180deg) scale(1.1);
		} */
	}
	
	.icon {
		width: 1.5rem;
		height: 1.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		transition: transform .3s ease;
		transform-origin: center;

		svg {
			width: 1rem;
			height: 1rem;
			position: relative;
			z-index: 1;
			overflow: visible;
		}

		/* &:before {
			display: block;
			content: '';
			background: #f8b749;
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			animation: pulse 2s ease-out infinite;
		} */
	}

	.label {
		/* background: white; */
		font-size: 0.875rem;
		font-weight: bold;
		padding: 0 .5rem;
		height: 1.5rem;
		display: flex;
		align-items: center;
	}

}

.scene-background {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1800px;
	max-width: unset;
	margin: 0 auto;
	height: 600px;	
}

.scene-foreground-container {
	overflow-x: auto;
	width: 100%;
	height: 100%;
}

.scene-foreground {
	position: relative;
	z-index: 2;
	pointer-events: none;
	width: 860px;
	height: 100%;
	padding: var(--padding);

	@media (width < 860px) {
		background-image: url('../assets-mk2/scene-desktop-mk3.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to top, #0008 10%, #0000 40%);
			transition: opacity .3s ease;
		}
	}

	.hotspot {
		position: absolute;
		top: calc(var(--y) * 1%);
		left: calc(var(--x) * 1%);
	}
}

.scroll-prompt {
	display: flex;
	justify-content: start;
	align-items: center;
	pointer-events: none;
	gap: 1rem;
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	padding: 3rem;
	color: white;
	font-size: 1.125rem;
	transition: opacity .3s ease;
	svg {
		overflow: visible;
		width: 1rem;
		height: 1rem;
	}
}

@media (width > 860px) {
	.scroll-prompt {
		display: none;
	}
}

.scene-foreground-container.scrolled {
	.scroll-prompt {
		opacity: 0 !important;
	}

	.scene-foreground {
		&:after {
			opacity: 0;
		}
	}
}

.scene-content {
	position: relative;
	z-index: 1;
}


.scene-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;

	.modal-inner {
		background: black;
		color: white;
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns: 1fr 1fr;
		
		p {
			font-size: 1rem;
			margin-bottom: 1rem;
		}

		ul {
			margin: 0;
			padding: 0 0 0 1em;
			li {
				&:not(:last-child) {
					margin-bottom: .5em;
				}
			}
		}

		.button-close {
			background-color: var(--color-saab-yellow);
			width: 2rem;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 10;
			top: 0;
			right: 0;
			cursor: pointer;
			font-size: 1rem;

			transition: background-color .3s ease;
			&:hover {
				background-color: #F49812;
			}

			svg {
				width: .75rem;
				height: .75rem;
				overflow: visible;
			}

		}
	}
	
	.modal-heading {
		font-size: 2.25rem;
		margin: 0;
	}

	.modal-body {
		padding: 2rem;
		height: 100%;
		overflow: hidden;
		display: grid;
		grid-template-rows: auto auto 1fr;
		gap: 1.25rem;

		.modal-tabs {
			display: flex;
			gap: 1.618rem;
			justify-content: start;
			align-items: center;
			font-size: 1.1255rem;
			font-weight: bold;

			button {
				font-size: inherit;
				background: transparent;
				border: none;
				border-bottom: 2px solid transparent;
				color: var(--color-saab-yellow);
				color: white;
				cursor: pointer;
				padding: .5rem .625rem;
				padding: .25rem 0rem;
				font-size: 1.5rem;
				transition: border-color .3s ease;
				&:hover {
					border-bottom: 2px solid var(--color-saab-yellow);
				}

				&.active {
					border-bottom: 2px solid var(--color-saab-yellow);
				}
			}
		}
					
		.modal-content-scrollable {
			overflow: auto;
			flex: 1;
			padding-right: 2rem;
			padding-left: .125rem;
			margin-left: -.125rem;
			> * {
				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}

			p, li {
				max-width: 66ch;
			}

			p.heading:not(:has(+ p.heading)) {
				margin-bottom: 0;
				& + *:not(p.heading) {
					margin-top: 0;
				}
			}

		}
	}

	.modal-image {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		overflow: hidden;
		position: relative;
		isolation: isolate;

		user-select: none;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: var(--object-position, center);
		}
	}

	img.modal-image-contained {
		padding: 3rem;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
}

@media (width < 860px) {
	.scene-modal {
		h3.modal-heading {
			font-size: 1.5rem;
		}
		.modal-tabs button.tab {
			font-size: 1.125rem;
		}
	}
}


@media (width < 600px) {
	.item-grid, .scene-modal .modal-inner {
		grid-template-columns: 1fr;
	}

	.scene-modal {
		.modal-body {
			padding: 1rem;
			gap: .75rem;
			/* .modal-tabs {
				justify-content: center;
				> * {
					flex: 1;
				}
			} */
		}
		.modal-inner {
			grid-template-rows: .618fr 1fr;
			
			.modal-image {
				grid-row: 1;
			}
		}
	}

}

.image-load-grid {
	background: white;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	display: none;
}

.image-arrows {
	user-select: none;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	/* pointer-events: none; */

	.arrow-left, .arrow-right {
		pointer-events: all;
		cursor: pointer;
		width: 2rem;
		height: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--color-saab-yellow);
		border-radius: 50%;
		transition: background-color .3s ease;
		&:hover {
			background-color: #F49812;
		}
		svg {
			width: 0.75rem;
			height: 0.75rem;
			overflow: visible;
			color: black;
		}
	}
}

@keyframes pulse {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(1.5);
		opacity: 0;
	}
}
.fade-enter-active, .fade-leave-active {
	transition: opacity .3s ease;
}

.fade-enter-from, .fade-leave-to {
	opacity: 0;
}

.interesting-fade-enter-active, .interesting-fade-leave-active {
	transition: opacity .3s ease, transform .3s ease;
	transform-origin: 50% 25%;
}
.interesting-fade-enter-from, .interesting-fade-leave-to {
	opacity: 0;
	transform: scale(0.9);
}
	

/* Utility classes for responsive show/hide */

@media (width < 600px) {
	.hide-mobile {
		display: none !important;
	}
	.show-mobile {
		display: block !important;
	}
}

/* Hide on tablet (>=600px and <900px) */
@media (width >= 600px) and (width < 900px) {
	.hide-tablet {
		display: none !important;
	}
	.show-tablet {
		display: block !important;
	}
}

@media (width >= 900px) {
	.hide-desktop {
		display: none !important;
	}
	.show-desktop {
		display: block !important;
	}
}