/* === Global & Element settings ===*/
html {
	--light: #ccc;
	--dark: #111;
	--midtones: #999;
	--green: #396;
	--transpgreen: #396;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	text-align: center;
	color: var(--light);
	background-color: var(--dark);
	
	font-family: system-ui, sans-serif;
}
h1, h2, h3, h4 {
	font-family: "Quicksand", Roboto, system-ui, sans-serif;
}

h1 {
	font-size: clamp(4rem, 7vw, 12rem);
	font-weight: 200;
	letter-spacing: 0.5rem;
}
h2 {
	font-size: clamp(1.5rem, 2vw, 4rem);
	font-weight: 400;
	letter-spacing: 0.5rem;
}
h3 {
	font-size: clamp(2rem, 3vw, 6rem);
	font-weight: 600;
}
h4 {
	font-size: clamp(1rem, 1vw, 2rem);
	font-weight: 400;
}
p {
	padding: 1rem 2rem;
	
	font-size: 1rem;
}
section {
	min-height: 100vh;
	width: 100vw;
	border-bottom: solid var(--light) 1px;
	
	
	/* Locks all screens ontop of eachother */
	position: fixed;
	z-index: calc(6 - var(--sectionnumber));
	
	/* Variables and calculations for scroll animation ranges */
	--sectoffset: -50vh;
	--distance: 80vh;
	--areaheight: 140vh;
	--animgap: 30vh;
	--areabegin: calc(var(--sectionnumber) * var(--distance) + var(--sectoffset));
	--areaend: calc(var(--areabegin) + var(--areaheight));
	--animbegin: calc(var(--areabegin) + var(--animgap));
	--animend: calc(var(--areaend) - var(--animgap));
	
	/* Provides the reference frame for the Z translate animation */
	perspective: 500px;
	
	/* Dynamically changes Z-index to allow F12 inspect */
	/* Animation */
	animation: zindex linear both;
	animation-timeline: scroll(block);
	animation-range: contain var(--areabegin) contain var(--areaend);
}
section > * {			
	/* All section direct descendants get the.. :sparkle: */
	/* Animation */
	animation: bluraway linear both;
	animation-timeline: scroll(block);
	animation-range: contain var(--areabegin) contain var(--areaend);
}
.scrollspacer {
	/* Provides space with which to scroll in */
	height: 605vh;
	padding-top: 75vh;
}
.anchor {
	/* Provides anchors for the menu scrolling */
	height: 90vh;
}


/* === Links css reset ===*/
a:hover {
	text-shadow: 0px 0px 10px var(--primarytext);
}
a {
	outline-color: transparent;
	text-decoration: underline var(--green);
	color: var(--primarytext);
}


/* === Reusable classes ===*/
.centeritems {
	display: flex;
	align-items: center;
	justify-content: center;
}
.gridsymmetric {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wrapper {
	display: flex;
}
.svgfilter {
	display: none;
}



/* === Div that appears on page load ===*/
#preloader {
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: 11;
	font-style: italic;
	
	animation: load 2s linear both;
	text-shadow: 0px 0px 5px var(--light);
}



/* === Menu section ===*/
header {
	min-height: 100vh;
	position: fixed;
	z-index: 10;
	
	/* Animation */
	opacity: 0%;
	animation: widefade linear both;
	animation-timeline: scroll(block);
}
#menu {
	margin: 2rem 1rem 4rem;
	border-top: solid var(--midtones) 1px;
	border-bottom: solid var(--midtones) 1px;
	
	color: var(--green);
	text-align: left;
	
	opacity: 30%;
	transition: all 1s ease;
}
#menu:hover {
	opacity: 100%;
}
#menu div {
	padding: 1rem;
	transition: all 1s ease;
}
#menu div:hover {
	letter-spacing: 0.2rem;
}



/* === Contact section ===*/
#contact {
	--sectionnumber: 1;
}
#contactheader {
	position: absolute;
	padding-top: 1rem;
}
#petalcontainer {
	height: clamp(2rem, 3.5vw, 6rem);; /* This realigns the petals to the center for some reason.. */
	position: relative;
}
.petal {
	--itemtotal: 5;
	--offset: -90deg;
	--degrees: calc((360 / var(--itemtotal)) * (-1deg + var(--itemnumber)) + var(--offset));
	
	position: absolute;
	justify-content: right;
	width: 30vmin;
	padding: 1rem;
	border: solid var(--light) 1px;
	border-radius: 6rem;
	rotate: var(--degrees);
	transform-origin: left;
	
	/* Animation */
	animation: petalspinning ease both reverse;
	animation-timeline: scroll(block);
	animation-range: contain var(--animbegin) contain var(--animend);
	transition: all 0.6s ease;
}
.petal:hover {
	width: 35vmin;
}
.petal span {
	display: block;
	height: 10vmin;
	aspect-ratio: 1;
	padding: 1rem;
	
	//background-color: var(--midtones);
	border-radius: 100%;
	rotate: calc(var(--degrees)*-1);
}
.petal:nth-of-type(1) {
	--itemnumber: 1deg
}
.petal:nth-of-type(2) {
	--itemnumber: 2deg;
}
.petal:nth-of-type(3) {
	--itemnumber: 3deg;
}
.petal:nth-of-type(4) {
	--itemnumber: 4deg;
}
.petal:nth-of-type(5) {
	--itemnumber: 5deg;
}
.petal:nth-of-type(6) {
	--itemnumber: 6deg;
}
/* Icons coloring */
.petal svg {
	fill: var(--green);
}



/* === About section ===*/
#about {
	--sectionnumber: 2;
	
	--degrees: 20deg;
	--bubbleheight: 70vmin;
	--bubblemargin: 1rem;
	
	flex-direction: column;
}
#about .wrapper {
	rotate: var(--degrees);
}
.bubble {
	rotate: calc(var(--degrees)*-1);
	width: calc((var(--bubbleheight) * 0.7) - 20vmin);
}
.bubble h2 {
	margin: 0.5rem;
}

.bubblecontainer {
	position: relative;
	display: flex;
	height: var(--bubbleheight);
	width: calc(var(--bubbleheight)/2);
	overflow: hidden;
	
	/* Animation */
	animation: mitosis ease both reverse;
	animation-timeline: scroll(block);
	animation-range: contain var(--animbegin) contain var(--animend);
	transition: all 1s ease;
}
#about .wrapper:hover .bubblecontainer {
	box-shadow: 0px 0px 100px -50px var(--green);
}
/* Fix border-radius for left and right bubbles */
.bubblecontainer:nth-of-type(1) {
	border-radius: 100% 0% 0% 100% / 50% 10% 10% 50%;
	--leftrad: 70%;
	--rightrad: 30%;
	--leftvertrad: 50%;
	--rightvertrad: 15%;
}
.bubblecontainer:nth-of-type(2) {
	border-radius: 0% 100% 100% 0% / 10% 50% 50% 10%;
	--leftrad: 30%;
	--rightrad: 70%;
	--leftvertrad: 15%;
	--rightvertrad: 50%;
}

/* Background pattern mechanics */
.cellbackground {
	--leftvalue: -30%;
	
	position: absolute;
	top: -50%;
	left: var(--leftvalue);
	width: 250%; height: 200%;
	/* background-color: #396; */
	
	background: radial-gradient(circle, var(--dark) 0%, var(--green) 60%);
	filter: url(#displacementFilter);
	
	/* Animation */
	animation: mitosisbg ease both reverse;
	animation-timeline: scroll(root);
	animation-range: contain var(--areabegin) contain var(--areaend);
}
.bubblecontainer:nth-of-type(2) .cellbackground {
	--leftvalue: -120%;
}



/* === Hero section ===*/
#hero {
	--sectionnumber: 3;
}
#herowrapper {
	height: 100vh;
	width: 100vw;
	flex-direction: row-reverse;
	justify-content: space-evenly;
}
#herowrapper div {
	margin: 6rem 0;
}
#herowrapper div:nth-of-type(1) {
	align-self: start;
	text-align: right;
}
#herowrapper div:nth-of-type(2) {
	align-self: end;
	text-align: left;
}
#hero h2 {
	margin: 0.5rem 1rem 0rem;
	color: var(--green);
	opacity: 100%;
}
#scrollinfo {
	position: absolute;
}
.scrolltriangle {
	width: 3vmin;
	aspect-ratio: 1;
	margin: 2vmin;
	
	border-left: solid var(--midtones) 2px;
	border-top: solid var(--midtones) 2px;
}
#hero:hover .scrolltriangle {
	animation: 1.5s ease infinite alternate scrollmovement;
}
.scrolltriangle:nth-of-type(1) {
	rotate: 45deg;
}
.scrolltriangle:nth-of-type(2) {
	rotate: -135deg;
}


/* === Projects section ===*/
#projects {
	--sectionnumber: 4;
}
#projects span {
	padding: 1rem clamp(2rem, 8vw, 10rem);;
	margin: 0.5rem;
	transition: all 1s ease;
	
	width: 25vmin;
	flex-direction: column;
}
#projects .wrapper:hover span:not(:hover) {
	opacity: 40%;
}
#projects span:hover {
	opacity: 100%;
}
#projects h3 {
	padding-top: 1rem;
}
.particle {
	position: relative;
	height: 16vmin;
	aspect-ratio: 1;
	background-color: var(--transpgreen);
	background-blend-mode: multiply;
	border-radius: 20vmin;
	
	/* Animation */
	animation: particlecollapse ease both;
	animation-timeline: scroll(block);
	animation-range: contain var(--animbegin) contain var(--animend);
}
span:nth-of-type(1) .particle {
	background:
		linear-gradient(var(--transpgreen), var(--transpgreen)),
		no-repeat center/cover url("PXL_20240219_Cat.jpg");
	--x: -100%;
	--y: -30%;
}
span:nth-of-type(2) .particle {
	background:
		linear-gradient(var(--transpgreen), var(--transpgreen)),
		no-repeat center/cover url("IMG_20231014_114215332_MP-01.jpeg");
	--x: -70%;
	--y: 50%;
}
span:nth-of-type(3) .particle {
	background:
		linear-gradient(var(--transpgreen), var(--transpgreen)),
		no-repeat center/cover url("IMG_20231014_120238629 (1).jpg");
	--x: 30%;
	--y: -100%;
}
span:nth-of-type(4) .particle {
	background:
		linear-gradient(var(--transpgreen), var(--transpgreen)),
		no-repeat center/cover url("PXL_20230721_230650051.jpg");
	--x: 100%;
	--y: 30%;
}




/* === Skills section ===*/
#skills {
	--sectionnumber: 5;
}
#skillheader {
	height: 0;
	margin-left: -20vmin;
	margin-right: -8vmin;
	rotate: -90deg;
}
#skills h1 {
	transition: all 0.7s ease;
}



/* === Quotes and Credits section ===*/
#quotes {
	--sectionnumber: 0;
}
#credits {
	--sectionnumber: 6;
}



/* === At-rules ===*/
@keyframes load {
	0% {
		opacity: 100%;
		background-color: var(--dark);
	}
	50% {
		opacity: 100%;
		background-color: var(--dark);
		color: var(--midtones);
	}
	99% {
		z-index: 11;
	}
	100% {
		z-index: -1;
		opacity: 0%;
		color: var(--dark);
	}
}

@keyframes zindex {
	0% {
		z-index: 0;
	}
	30% {
		z-index: calc(6 - var(--sectionnumber));
	}
	70% {
		z-index: calc(6 - var(--sectionnumber));
	}
	100% {
		z-index: 0;
	}
}
@keyframes bluraway {
	0% {
		transform: translateZ(-10vh);
		filter: blur(6rem);
		opacity: 0%;
	}
	30% {
		filter: blur(0);
		opacity: 100%;
	}
	70% {
		filter: blur(0);
		opacity: 100%;
	}
	100% {
		transform: translateZ(10vh);
		filter: blur(6rem);
		opacity: 0%;
	}
}
@keyframes widefade {
	10% {
		opacity: 0%;
	}
	20% {
		opacity: 100%;
	}
	80% {
		opacity: 100%;
	}
	90% {
		opacity: 0%;
	}
}

@keyframes petalspinning {
	0% {
		rotate: var(--offset);
	}
	100 {
	}
}

@keyframes mitosis {
	0% {
	}
	20% {
		width: calc(var(--bubbleheight)/2);
		border-radius: var(--leftrad) var(--rightrad) var(--rightrad) var(--leftrad) / var(--leftvertrad) var(--rightvertrad) var(--rightvertrad) var(--leftvertrad);
	}
	50% {
		margin: 0;
	}
	100% {
		height: calc(var(--bubbleheight)*0.7);
		width: calc(var(--bubbleheight)*0.7);
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
		margin: 0 var(--bubblemargin);
	}
}
@keyframes mitosisbg {
	10% {
		left: var(--leftvalue);
	}
	100% {
		left: -80%;
	}
}

@keyframes scrollmovement {
	0% {
		margin: 2vmin;
	}
	100% {
		margin: 5vmin;
	}
}

@keyframes particlecollapse {
	0% {
		left: var(--x);
		top: var(--y);
	}
	100% {
		left: 0%;
		top: 0%;
	}
}

@keyframes rowwidth {
	0% {
	}
	100% {
		grid-template-columns: 5vw repeat(4, 1vw) 20vw;
	}
}


@media (max-width: 130vh) {
	.gridsymmetric {
		grid-template-columns: 1fr 1fr;
	}
	
	#herowrapper {
		flex-direction: column;
		justify-content: space-between;
	}
	#herowrapper div {
		margin: 6rem 4rem;
	}
	#herowrapper div:nth-of-type(1) {
		align-self: end;
	}
	#herowrapper div:nth-of-type(2) {
		align-self: start;
	}
}
@media (max-width: 950px) {
	.gridsymmetric {
		grid-template-columns: 1fr;
	}
	#about {
		--degrees: 80deg;
	}
	.bubble div {
		rotate: -80deg;
		background-color: #f005
	}
}