@layer desktop {

	body {
		margin-top: 0;
	}

	.section#intro {
		min-height: 100vh;
		display: grid;
		place-items: center;
		position: relative;
		z-index: -1;
	}

	.intro-scroll-down {
		position: absolute;
		display: none;
		bottom: calc(var(--site-margin)*2);
	}

	.section#about {
		position: relative;
		/*z-index: -1;*/
	}

	.section-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		overflow-x: clip;
	}

	.crystal-image {
		width: calc(120px + 12vw);
		height: auto;
		position: absolute;
		transform: translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		opacity: calc((var(--parallax-scale) - 0.2)*var(--visibility));
		animation: float 20s ease-in-out infinite;
	}

	#crystal-01 {
		top: -30%;
		left: 75%;
		animation-delay: 0.9s;
	}

	#crystal-02 {
		top: 75%;
		left: 32%;
		animation-delay: 3.7s;
	}

	#crystal-03 {
		top: -10%;
		left: -3%;
		animation-delay: 0.8s;
	}

	@keyframes float {
		0%,
		100% {
			transform: translateY(0px) rotate(0deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		25% {
			transform: translateY(calc(var(--parallax-scale) * 30px)) rotate(3deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		50% {
			transform: translateY(calc(var(--parallax-scale) * -20px)) rotate(-2deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
		75% {
			transform: translateY(calc(var(--parallax-scale) * -30px)) rotate(0.5deg) translateY(var(--parallax-offset)) scale(var(--parallax-scale));
		}
	}

}