:root {
    	--box-scale: min(12vw, 12vh);
		--box-half-scale: calc(var(--box-scale) * 0.5);

		--box-colour: #8f541f;

		--scene-scale: min(75vw, 75vh);
		--scene-half-scale: calc(var(--scene-scale) * 0.5);
		--scene-z-global: min(-5vw, -5vh); /* Z-Offset of entire scene */

		--scene-unit: min(1.2vw, 1.2vh);
	}

    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        width: 100vw;
        background-color: black;
        color: white; /* Optional: makes text visible if you add any */
        display: flex; /* Optional: helps with centering content */
        align-items: center; /* Optional: centers content vertically */
        justify-content: center; /* Optional: centers content horizontally */
    }

	#overlay {
   		width: 100%;
   	 	height: 100%;
        position: absolute;
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	background: linear-gradient(135deg, #1b2f4e54, #000000);
    	align-items: center;
		transition: opacity 1s ease;
		z-index: 2;
		top: 0;
	}

	.header {
    	background: linear-gradient(45deg, #000000 0%, #243843eb 50%, #4a5b6b 15%);
    	padding: 10px 0;
    	border-bottom: 2px solid white;
		position: absolute;
    	top: 0;
    	width: 100%;
    	z-index: 3;
	}

	.header-container {
		display: flex;
    	flex-direction: column;
    	align-items: center;
    	width: 90%;
    	max-width: 1200px;
    	margin: 0 auto;
    	cursor: pointer;
	}

	.header-logo {
    	max-width: min(45vh, 400px);
    	padding: 2vh;
    	pointer-events: none;
	}

	.overlay-options {
		width: 100%;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	margin-top: 10vh;
	}

	.overlay-option {
		width: 100%;
    	display: flex;
		flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	border: 1px solid white;
    	padding: 10px 10px 10px 5px;
    	cursor: pointer;
    	transition: transform 1s ease;
    	margin: 3vw;
    	max-width: 300px;
    	height: 50vh;
    	border-radius: 25px 0 25px 0;
    	background-color: #00000066; 
	}

	.overlay-option:hover {
    	border: 1px solid white;
		transform: translateY(-5px);
		background-color: #465b8d29;
	}

	.overlay-option-icon {
		height: 30%;
    	width: auto;
    	margin-bottom: 10%;
    	margin-top: 10%;
		display: flex;
    	justify-content: center;
    	pointer-events: none;
	}

	.overlay-option-icon img {
		height: 100%;
	}

	.overlay-option-title {
		height: 12%;
    	font-size: min(5vw, 5vh, 30px);
    	font-weight: bold;
    	font-family: monospace;
		width: 100%;
    	padding-left: 10%;
    	pointer-events: none;
	}

	.overlay-option-desc {
		height: 20%;
    	font-size: min(3.5vw, 3.5vh, 20px);
    	font-family: monospace;
		padding: 0 15px;
		pointer-events: none;
	}

	@media (max-width: 699px) {
		.overlay-options {
			flex-direction: column;
			align-items: center;
			margin-top: 10vh;
		}
		.overlay-option {
			height: 20vh;
        	width: 80%;
        	max-width: 100%;
        	margin-bottom: 2vw;
			justify-content: space-around;
			border-radius: 0 25px 0 25px;
		}
		.overlay-option-icon {
			margin-bottom: 0;
			margin-top: 0;
			height: 40%;
			width: auto;
		}
		.overlay-option-icon img {
			height: 100%;
			width: auto;
		}
		
		.overlay-option-title {
			display: flex;
    			align-items: flex-end;
			height: auto;
			width: auto;
			padding-left: 0;
		}

		.overlay-option-desc {
			height: auto;
			padding: 0px 15px;
		}
	}

	#content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		position: absolute;
	}

	#footer {
		background-color: #333;
		color: white;
		text-align: center;
		width: 100%;
		font-size: min(4vw, 12px);
	}

	/* 3D Render Visuals */
	#scene-visual {
		perspective: 800px;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	#rotation-plane {
		position:absolute;
		width: var(--scene-scale);
		height: var(--scene-scale);
		transform-style: preserve-3d;
		transform: rotateX(70deg);
		background: transparent; /*#80808014;*/
		border-radius: 25px;
		cursor: grab;
	}

	.floor {
		position:absolute;
		width: var(--scene-scale);
		height: var(--scene-scale);
		transform-style: preserve-3d;
		transform: translateZ(calc(-1px + var(--scene-z-global)));
		background: transparent; /*#80808014;*/
		border-radius: 25px;
		cursor: grab;

		background-image: url('/media/images/landing/landing_floor.jpg');
  		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center;

		opacity: 0.9;
		transition: opacity 2s ease;
	}

	.box-bounds {
		transform-style: preserve-3d;
		position: absolute;
		transform-origin: center;
		width: var(--box-scale);
		height: var(--box-scale);
	}
   
	.box-face {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: var(--box-colour);
		box-sizing: border-box;
		background-size: cover;
  		background-position: center;
	}

	.box-face:nth-child(1) { transform: rotateY(0deg) translateZ(var(--box-half-scale));
		background-image: url('/media/images/landing/landing_cardboard_top_high.jpg');
	}
        .box-face:nth-child(2) { transform: rotateY(90deg) translateZ(var(--box-half-scale)) rotate(270deg);
		background-image: url('/media/images/landing/landing_cardboard_side_high2.jpg');
	}
        .box-face:nth-child(3) { transform: rotateY(180deg) translateZ(var(--box-half-scale)); 
		background-image: url('/media/images/landing/landing_cardboard_top_low.jpg');
	}
        .box-face:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--box-half-scale)) rotate(90deg); 
		background-image: url('/media/images/landing/landing_cardboard_side_high2.jpg');
	}
        .box-face:nth-child(5) { transform: rotateX(90deg) translateZ(var(--box-half-scale)) rotate(180deg);
		background-image: url('/media/images/landing/landing_cardboard_side_high2.jpg');
	}
        .box-face:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--box-half-scale)); 
		background-image: url('/media/images/landing/landing_cardboard_side_high2.jpg');
	}

	/* Additional Visuals */
	.box-shadow {
		width: 100%;
		height: 100%;
		background-color: transparent;
		transform: translateZ(calc(-1 * var(--box-half-scale)));
    	transform-origin: top;
		box-shadow: 0px 0px 11px 6px rgb(0 0 0 / 45%);
	}

	.box-shadow-faint {
		width: 100%;
		height: 100%;
		background-color: transparent;
		transform: translateZ(calc(-1 * var(--box-half-scale)));
    	transform-origin: top;
		box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 58%);
	}

	.box-face-extra {
		transform-style: preserve-3d;
		position: absolute;
		transform-origin: center;
		width: var(--box-scale);
		height: var(--box-scale);
	}

	.box-face-extra .box-panel {
		width: 100%;
    	height: 50%;
    	background: var(--box-colour);

		background-image: url('/media/images/landing/landing_cardboard_top_high.jpg');
  		background-size: cover;
  		background-position: center;
	}

	.box-face-extra .box-panel:nth-child(1) { transform-origin: top; }
	.box-face-extra .box-panel:nth-child(2) { transform-origin: bottom; }

	.box-face-extra .paper-flat {
		width: 100%;
		height: 100%;
		background-color: transparent;
		transform: translateZ(calc(var(--scene-unit)* -2)) rotateZ(180deg);
    	transform-origin: top;
		display: flex;
		justify-content: center;
    	align-items: center;
	}

	/* Set div width and height to below 100% so that it doesn't overlap with box bounds */
	.box-face-extra .paper-flat div:nth-child(1) {
		width: 95%;
		height: 95%;
		background-color: #e1d0b1;

		background-image: url('/media/images/landing/landing_paper_low.jpg');
  		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center;
	}

	.box-face-extra .paper-flat div:nth-child(n+2) {
		width: 40%;
		height: 55%;
		background-color: white;

		background-image: url('/media/images/landing/landing_paper_mid.jpg');
  		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center;
		
		position: absolute;

		font-size: 0.2vw;
    	word-wrap: break-word;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	color: #666666;
	}  

	.box-face-extra .paper-flat div:nth-child(2) {
    	top: 2%;
    	left: 3%;
    	transform: rotate(2deg);
	}

	.box-face-extra .paper-flat div:nth-child(3) {
    	top: 4%;
    	left: 17%;
    	transform: rotate(10deg);
	}

	.box-face-extra .paper-flat div:nth-child(4) {
    	top: 5%;
    	right: 10%;
    	transform: rotate(5deg);
	}

	.box-face-extra .paper-flat div:nth-child(5) {
    	top: 34%;
    	right: 18%;
    	transform: rotate(-5deg);
	}

	.box-face-extra .paper-flat div:nth-child(6) {
    	top: 40%;
    	left: 2%;
    	transform: rotate(-4deg);
	}

	.box-face-extra .paper-flat div:nth-child(7) {
    	top: 42%;
    	right: 6%;
    	transform: rotate(1deg);
	}

	.trak-element {
    	width: calc(var(--scene-unit)* 40);
   		height: calc(var(--scene-unit)* 10);
    	background: #3b58709e;
    	border: 1px solid white;
    	border-radius: 8px;
    	transform: translate3d(calc(var(--scene-half-scale) - calc(var(--scene-unit)* 20)), calc(var(--scene-half-scale) - calc(var(--scene-unit)* 5)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 25) )) rotateX(270deg);
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	text-align: center;
    	font-size: calc(var(--scene-unit)* 2);
    	font-family: system-ui;
		box-shadow: 0px 0px 20px 13px rgb(132 143 167 / 45%);
		opacity: 0;
		transition: opacity 2s, transform 3s ease;
	}

	.trak-device {
    	background: #3b58709e;
    	border: 1px solid white;
    	border-radius: 5px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	text-align: center;
    	font-size: calc(var(--scene-unit)* 2);
    	font-family: system-ui;
		box-shadow: 0px 0px 20px 13px rgb(132 143 167 / 45%);
		opacity: 0;
		transition: opacity 2s, transform 3s ease, width 3s ease, height 3s ease;
		position: absolute;
		width: 0px;
    	height: 0px;
		transform: translate3d(var(--scene-half-scale), var(--scene-half-scale), calc(var(--scene-z-global) +  calc(var(--scene-unit)* 50))) rotateX(200deg);
	}

	.trak-device div {
		border: 1px solid white;
    	border-radius: 3px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
		transition: width 3s ease, height 3s ease;
	}

	.trak-device img {
		width: 90%;
    	height: auto;
    	transition: width 2s, height 2s;
	}

	.trak-device.type-phone {
    	width: calc(var(--scene-unit)* 6);
    	height: calc(var(--scene-unit)* 10);
    	transform: translate3d(calc(var(--scene-half-scale) - calc(var(--scene-unit)* 3)), calc(var(--scene-half-scale) - calc(var(--scene-unit)* 3)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 5) + calc(var(--scene-unit)* 21))) rotateX(270deg);
    	opacity: 1;
	}

	.trak-device.type-phone div {
		height: 85%;
    	width: 80%;
	}

	.trak-device.type-tablet {
    	width: calc(var(--scene-unit)* 15);
    	height: calc(var(--scene-unit)* 11);
    	transform: translate3d(calc(var(--scene-half-scale) - calc(var(--scene-unit)* 7.5)), calc(var(--scene-half-scale) - calc(var(--scene-unit)* 7.5)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 5.5) + calc(var(--scene-unit)* 21))) rotateX(270deg);
    	opacity: 1;
	}

	.trak-device.type-tablet div {
		height: 85%;
    	width: 88%;
	}
	
	.trak-device.type-final {
	    width: calc(var(--scene-unit)* 50);
        height: calc(var(--scene-unit)* 11);
        transform: translate3d(calc(var(--scene-half-scale) - calc(var(--scene-unit)* 25)), calc(var(--scene-half-scale) - calc(var(--scene-unit)* 5.5)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 6))) rotateX(270deg);
        overflow: hidden;
        opacity: 1;
        cursor: pointer;
	}
	
	.trak-device.type-final:hover .trak-arrow {
	    color: #f9b114;
	    transform: scaleX(1.5);
	}
	
	.trak-device.type-final div {
	    height: 85%;
        width: 96.5%;
        pointer-events: none;
	}
	
	.trak-device.type-final img {
	    width: 25%;
        margin-left: 10px;
        pointer-events: none;
	}
	
	.trak-device .trak-text {
	    border: none;
        width: 100%;
        font-size: 100%;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: none;
        pointer-events: none;
	}
	
	.trak-device .trak-arrow {
        border: none;
        position: absolute;
        right: 2.5%;
        bottom: 1%;
        font-size: 150%;
        pointer-events: none;
        transition: transform 1s;
        transform-origin: right;
	}

	.info-popup {
		background: #000000ba;
    	border: 2px solid white;
    	border-radius: 5px;
    	display: flex;
		flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	text-align: center;
    	font-family: system-ui;
    	box-shadow: 0px 0px 16px 6px rgb(255 255 255 / 25%);
    	opacity: 0;
    	transition: opacity 0.4s;
    	position: absolute;
    	width: 100px;
    	height: 0px;
    	overflow: hidden;
	}

	.info-popup .title {
		font-size: min(2.5vh, 2.5vw, 130%); /*calc(var(--scene-unit)* 1.3);*/
		margin-bottom: 5px;
		font-weight: bold;
		text-shadow: 0 0 1px #ffffff;
		will-change: transform;
	}

	.info-popup .content {
		font-size: min(1.5vh, 1.5vw, 120%); /*calc(var(--scene-unit)* 1);*/
		padding: 3px;
		text-shadow: 0 0 1px #ffffff;
		will-change: transform; /* Attempt to fix blurry text */
	}
	
	@media (max-width: 899px) {
    	.info-popup .title {
    		font-size: min(5vh, 5vw, 130%); /*calc(var(--scene-unit)* 1.3);*/
    	}
    
    	.info-popup .content {
    		font-size: min(4vh, 4vw, 120%); /*calc(var(--scene-unit)* 1);*/
    	}
	}

	.info-popup .rotate-helper {
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url('/media/images/landing/icon_anim_rotate.gif');
  		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center;
		width: 20%;
    	height: 20%;
    	margin: 1px;
    	will-change: transform;
	}
	
	.info-popup video {
	    width: 75%;
        margin-top: 10px;
        opacity: 0.8;
	}

    /* Note: Scale 0.5 fixes the text blur problem. */
	.info-popup-1 {
		width: calc(var(--scene-unit)* 35);
		height: calc(var(--scene-unit)* 13);
		transform: translate3d(calc(var(--scene-half-scale) - calc(var(--scene-unit)* 4)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* 15)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 20))) rotateX(270deg) scale(0.5);
	}
	
	.info-popup-2 {
		width: calc(var(--scene-unit)* 40);
		height: calc(var(--scene-unit)* 14);
		transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -5)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* 3)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 17))) rotateX(270deg) rotateY(60deg) scale(0.5);
	}
	
	.info-popup-3 {
		width: calc(var(--scene-unit)* 40);
		height: calc(var(--scene-unit)* 14);
		transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -1)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -7)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 19))) rotateX(270deg) rotateY(90deg) scale(0.5);
	}
	
	.info-popup-4 {
		width: calc(var(--scene-unit)* 55);
		height: calc(var(--scene-unit)* 35);
		transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -9)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -31)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 19))) rotateX(270deg) rotateY(120deg) scale(0.5);
	}
	
	.info-popup-5 {
		width: calc(var(--scene-unit)* 45);
		height: calc(var(--scene-unit)* 20);
		transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -21)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -27)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 18))) rotateX(270deg) rotateY(175deg) scale(0.5);
	}
	
	.info-popup-6 {
		width: calc(var(--scene-unit)* 45);
		height: calc(var(--scene-unit)* 20);
		transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -37)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -23)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 16))) rotateX(270deg) rotateY(230deg) scale(0.5);
	}

	@media (max-width: 899px) {
	    
		.info-popup-1 {
			width: calc(var(--scene-unit)* 70);
			height: calc(var(--scene-unit)* 25);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -35)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* 15)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 30))) rotateX(270deg) scale(0.5);
		}
		
		.info-popup-2 {
			width: calc(var(--scene-unit)* 75);
			height: calc(var(--scene-unit)* 35);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -25)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -5)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 28))) rotateX(270deg) rotateY(50deg) scale(0.5);
		}
		
		.info-popup-3 {
			width: calc(var(--scene-unit)* 75);
			height: calc(var(--scene-unit)* 35);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -20)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -16)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 28))) rotateX(270deg) rotateY(90deg) scale(0.5);
		}
		
		.info-popup-4 {
			width: calc(var(--scene-unit)* 95);
			height: calc(var(--scene-unit)* 75);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -20)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -58)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 28))) rotateX(270deg) rotateY(130deg) scale(0.5);
		}
		
		.info-popup-5 {
			width: calc(var(--scene-unit)* 95);
			height: calc(var(--scene-unit)* 45);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -47)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -40)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 28))) rotateX(270deg) rotateY(180deg) scale(0.5);
		}
		
		.info-popup-6 {
			width: calc(var(--scene-unit)* 95);
			height: calc(var(--scene-unit)* 35);
			transform: translate3d(calc(var(--scene-half-scale) + calc(var(--scene-unit)* -65)), calc(var(--scene-half-scale) + calc(var(--scene-unit)* -35)), calc(var(--scene-z-global) + calc(var(--scene-unit)* 28))) rotateX(270deg) rotateY(230deg) scale(0.5);
		}
	}