/* Multi-screen Mural illustration for JSConf EU
 * Aspect ratio - 48:9
 * Splitted into three parts of 16:9
 * by ilithya | 2019 */

$mural_w: 1920px; // Resize entire mural by editing only this variable, and check FYI below.
$mural_h: ($mural_w / (48 / 9));

$size: round($mural_w / 24); // Resizes all illustration components.

$border: round($size / 38);
$border_sm: round($border / 2);

$wall_h: round($mural_h / 1.5);

$hand_w: $size;
$hand_finger: ($hand_w / 4);
$hand_h: round($hand_w - ($hand_finger / 1.65));
$string_w: $size;

$helmet_w: round($size * 1.75);
$astronaut_w: round($helmet_w * 4.2);
$rainbow: round($size * 4);
$mountains_w: round($size * 5.2);
$planet: round($size * 4.5);
$shrooms_w: round($size * 2.6);

$c_ink: #292929; // Blackish	
$c_01: #efefe2; // Gray 
$c_02: #6f6ef1; // Purple
$c_03: #fff; // White
$c_04: #70bdff; // Blue
$c_05: #92cecc; // Blue-Green 
$c_06: #69e790; // Green
$c_07: #fc6e81; // Pink 
$c_08: #ff5ba5; // Dark Pink
$c_09: #f87d47; // Orange
$c_10: #eeef6e; // Yellow 	
$c_11: #fed352; // Dark Yellow
$c_12: #64a2a0; // Dark Green
$c_13: #70e7db; // Aqua 

$z_index: (
	wall: 120,
	hand: 140,
	finger: 30,
	fingerskin: 40,
	thumb: -10,
	stars: 0,
	string: 100,
	mug_handle: -10,
	laptop_bottom: -10,	
	comet: 10,
	comet_hide: -90,
	nucleus: 20,
	rainbow: 30,
	mountains: 30,
	helmet: 80,
	neck_top: 70,
	neck_bottom: 60,
	body: 50,
	plants: 30,
	leaf: 40,
	planet: 30,
	shrooms: 30,
);

$color: (
	bg_top: $c_12,
	bg_bottom: $c_02,
	finger_01: $c_04,
	finger_02: $c_06,
	finger_03: $c_09,
	mug: $c_06,
	mic: $c_13,
	butter: $c_11,
	syrup: $c_09,
	pancakes: $c_11,
	laptop: $c_13,
	speechbubble: $c_03,
	bottle: $c_06,
	comet: $c_10,
	comet_tail: $c_07,
	comet_tailbottom: $c_02,
	rainbow: $c_07,
	mountain: $c_11,
	mountain_lg: $c_09,
	helmet: $c_05,
	ear: $c_10,
	helmet_necktop: $c_10,
	helmet_neckbottom: $c_11,
	body: $c_05,
	flower: $c_ink,
	leaf: $c_08,
	leaf_even: $c_08,
	planet: $c_07,
	lactarius_cap: $c_08,
	flammulina_cap: $c_10,
	amanita_cap: $c_06,
	psilocybin_cap: $c_09,
);

@function z_index($name) {
  @if map-has-key($z_index, $name) {
    @return map-get($z_index, $name);  
  }
};

@function color($name) {
  @if map-has-key($color, $name) {
    @return map-get($color, $name);  
  }
};

@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}

body {
	background-color: hotpink;
	margin: 0;
}

div,
div::before,
div::after {
	box-sizing: border-box;
}

// PATTERNS (UTILITY)
.p-sketch {
	background-color: $c_01;
	border: $border solid $c_ink;
}

.p-blank {
	background-color: $c_03;
	border: $border solid $c_ink;	
}

.p-border {
	border: $border solid $c_ink;
}

.p-border-sm {
	border: $border_sm solid $c_ink;
}

.p-circle {
	border-radius: 50%;
}

.p-radius-10 {
	border-radius: 10%;
}

.p-col-center {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.p-xy-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-backface {
	backface-visibility: hidden;
}

// ILLUSTRATION
.mural {
	@include size($mural_w, $mural_h);
	position: relative; // To place wall
	overflow: hidden;
		
	&__bg {
		$stars: $border_sm;

		background-color: color(bg_bottom);
		background-image: 
		// Switch to a gradient colored background by editing the currentcolor: 
			// linear-gradient(180deg, transparent 0%, currentcolor 100%), 
			radial-gradient($c_ink $stars, transparent 0),
			radial-gradient($c_ink $stars, transparent 0);
		position: absolute;
		top: 0;
		left: 0;
		z-index: z_index(stars);
		
		// Background to animate
		&::before {
			content: '';
			display: block;
			background-color: color(bg_top);
			background-image: 
			// Switch to a gradient colored background by editing the currentcolor: 
				// linear-gradient(180deg, transparent 0%, currentcolor 100%), 
				radial-gradient($c_ink $stars, transparent 0),
				radial-gradient($c_ink $stars, transparent 0);
			opacity: 0;
			will-change: opacity;
			animation: spacecolor 120s ease-in-out infinite alternate;
			
			@at-root {
				@keyframes spacecolor {
					50% {
						opacity: 0;
					}
					100% {
						opacity: 1;
					}
				}
			}
		}
	}	
			
	&__bg,
	&__bg::before {
		$stars_gap: round($size / 1.9);

		@include size(100%);
		background-position:
			round($stars_gap / -12) round($stars_gap / 3),
			round($stars_gap / 2.4) round($stars_gap * 0.75); 
    	background-size:
		// Switch to a gradient colored background: 
			// 100%, 
			// $stars_gap $stars_gap, 
			$stars_gap $stars_gap;
	}
}

.wall {
	@include size(60%, $wall_h);
	overflow: hidden; // To avoid folds out of place
	position: absolute;
	top: 0;
	z-index: z_index(wall);
	
	&__fold {
		&::before,
		&::after {
			@include size(100%);
			border-bottom: $border_sm solid $c_ink;
			content: '';
			position: absolute;
		}
		
		&::before {
			bottom: 6.6%;
		}
		
		&::after {
			bottom: 10.6%;
		}
	}
	
	$wall_deg: 10deg;
	$wall_y: round($wall_h * -0.73);
	$fold_lg_gap: 6%;
	$fold_lg_deg: 3deg;
	$fold_sm_gap: 12%;
	$fold_sm_deg: 6deg;

	&--left {
		left: ($border * -1);
		transform: rotateZ(($wall_deg * -1)) translateY($wall_y);

		.wall__fold {
			&::before {
				left: $fold_lg_gap;
				transform: rotateZ($fold_lg_deg);
			}

			&::after {
				left: $fold_sm_gap;
				transform: rotateZ($fold_sm_deg);
			}
		}
	}

	&--right {
		right: ($border * -1);
		transform: rotateZ($wall_deg) translateY($wall_y);

		.wall__fold {
			&::before {
				right: $fold_lg_gap;
				transform: rotateZ(($fold_lg_deg * -1));
			}

			&::after {
				right: $fold_sm_gap;
				transform: rotateZ(($fold_sm_deg * -1));
			}
		}
	}

	&--center {
		$wall_center_w: (($size * 3) - $hand_finger - $border);

		@include size($wall_center_w, $size);
		margin-left: ($wall_center_w / -2);
		top: round($size / -1.15);
		left: 50%;
	}
}

.hands {
	$hands_w: round($hand_w * 3);

	@include size($hands_w, $hand_h);
	display: flex;
	justify-content: space-between;
	margin-left: ($hands_w / -2);
	position: absolute;
	top: ($hand_w / -3.5);
	left: 50%;
	z-index: z_index(hand);
}
.hand {
	@include size(round($hand_w - ($border * 2.7)), $hand_h);
	position: relative; // To place thumb

	$hand_radius: round($hand_w / 8.666);
	
	&--01 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_01);
		}
	}
	
	&--02 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_02);
		}
	}
	
	&--03 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_03);
		}
	}

	&__finger {
		width: $hand_finger;
		border-radius: $hand_radius;
		float: left;
		position: relative; // To place finger's skin
		
		&--02,
		&--03,
		&--04 {
			margin-left: ($border * -1);
		}

		$height: 3.25;

		@for $i from 1 through 4 {		
			$height: ($height - 0.25);

			&--0#{$i} {	
				height: round($hand_finger * $height);
			}
		}
		
		$fingerskin_w: ($hand_finger / 2.5);

		// Finger's Skin
		&--01,
		&--02,
		&--03 {
			&::after {
				@include size($fingerskin_w, $hand_finger);
				content: '';
				position: absolute;
				top: ($border * 3);
				right: (($fingerskin_w + $border) / -2);
				z-index: z_index(fingerskin);
			}
		}

		&--thumb {
			height: round($hand_finger * 2.2);
			position: absolute;
			left: round($hand_finger / 1.65);
			top: round($hand_finger * 1.7);
			transform: rotateZ(90deg);
			z-index: z_index(thumb);

			// Thumbnail
			&::before {
				@include size(round($fingerskin_w * 1.35), round($hand_finger / 1.3));
				@extend .p-border-sm;
				background-color: $c_10;
				border-radius: $hand_radius $hand_radius 0 0;
				content: '';
				position: absolute;
				right: ($border_sm * -1);
				top: 0;
			}
		}
	}
	
	&__mark {
		@include size(70%, round($hand_finger / 1.8));
		position: absolute;
		bottom: 0;
		left: 15%;

		&__line {
			border-bottom: $border_sm solid $c_ink;
			border-radius: $hand_radius;
			margin: $border 0 $border_sm;

			&:last-child {
				width: 80%;
				margin-left: 10%;
			}
		}
	}
}

.strings {	
	@include size(100%, round($wall_h * 1.17));
	position: absolute;
	top: 0;
	left: 0;
}	
.string {
	@include size($string_w, 100%);	
	position: absolute;
	top: 0;
	z-index: z_index(string);
			
	&__thread {
		@include size(0, 90%);
	}
	
	&--mug {
		top: -16%;
		left: round($mural_w / 12.2);
			
		&__mass {
			$mug: round($string_w / 4);

			@include size($mug, round($mug * 1.1));
			background-color: color(mug);
			border-bottom-left-radius: 20%;
			border-bottom-right-radius: 20%;
			border-bottom-width: ($border * 2);
			position: relative; // To place handle

			// Mug's Handle
			&::after {
				$mug_handle: round($mug / 1.8);

				@include size($mug_handle);
				@extend .p-border;
				@extend .p-circle;
				content: '';
				position: absolute;
				top: round($mug_handle / 7.5);
				right: round($mug_handle / -1.5);
				z-index: z_index(mug_handle);
			}
		}
	}
	
	&--phone {
		left: round($mural_w / 6.3);
		
		$phone: round($string_w / 4.5);
		
		&__mass {
			@include size($phone, round($phone * 1.5));
			border-top-width: ($border * 2);
			border-bottom-width: ($border * 2);
			justify-content: center;
		}
		
		&__text {
			$text_w: round($phone / 2);
			
			@include size($text_w, 0);
			border-bottom: $border_sm solid $c_ink;
			border-radius: $text_w;
			margin-bottom: $border;
			
			&--bottom {
				width: round($phone / 3);
			}
		}
	}
	
	&--mic {
		top: -20%;
		left: round($mural_w / 3.725);
		
		$mic: round($string_w / 10);
		
		&__mass {			
			@include size($mic, round($mic * 3.4));
			background-color: color(mic);
			border-top-width: ($border * 2);
		}
		
		&__sound {
			@include size(round($mic * 1.7));
			background-color: $c_ink;
			margin-top: ($border * -1);
		}
	}
	
	&--pancakes {
		top: -45%;
		left: round($mural_w / 2.74);

		$pancake_w: round($string_w / 3);

		&__butter {
			$butter: round($pancake_w / 3);

			@include size($butter, round($butter / 1.8));
			background-color: color(butter);
		}
		
		&__stack {
			position: relative; // To place syrup
		}
		
		&__syrup {
			width: 100%;
			align-items: flex-start;
			margin-top: ($border * -1);
			position: absolute;
			top: 0;
			left: 0;
			
			&__streak {				
				width: round($pancake_w / 7);
				background-color: color(syrup);
				border-bottom-left-radius: $pancake_w;
				border-bottom-right-radius: $pancake_w;
				margin-left: ($border_sm * -1);
				
				$streak_h: round($pancake_w / 2.7);
				
				&--01,
				&--04 {
					height: $streak_h;
				}
				
				&--02 {
					height: round($streak_h * 1.3);
				}
				
				&--03 {
					height: round($streak_h * 1.5);
				}
				
				&--05 {
					height: round($streak_h / 1.2);
				}
			}
		}
		
		&__mass {
			@include size($pancake_w, round($pancake_w / 4.5));
			background-color: color(pancakes);
			border-radius: $pancake_w;
			margin: ($border * -1) auto 0;
			
			&:nth-child(odd) {
				width: round($pancake_w * 1.08);
			}
		}
		
		&__plate {
			@include size($pancake_w, 0);
			margin-top: ($border * -1);
		}
	}
	
	&--laptop {
		top: -23.5%;
		left: round($mural_w / 1.71);
	
		$laptop_w: round($string_w / 2);
		$laptop_h: round($laptop_w / 1.3);
		
		&__mass,
		&__bottom {
			background-color: color(laptop);
		}
		
		&__mass {
			@include size($laptop_w, $laptop_h);
			border-bottom-width: ($border * 2);
			
			// Logo
			&::before {
				content: '\2665';
				display: block;
				font-size: round($laptop_w / 4);
			}
		}
		
		&__bottom {
			@include size($laptop_w, round($laptop_h / 1.5));
			transform: skewX(-30deg) translate(($laptop_w / -6), ($laptop_h * -0.65));
			position: relative;
			z-index: z_index(laptop_bottom);
		}
	}
	
	&--speechbubble {
		top: -15%;
		left: round($mural_w / 1.438);
	
		$speechbubble_w: round($string_w / 2.5);
		$speechbubble_h: round($speechbubble_w / 1.4);
		
		&__mass {
			@include size($speechbubble_w, $speechbubble_h);
			justify-content: center;
			position: relative;
			
			$triangle: round($speechbubble_w / 6);
			$triangle_border: ($triangle + $border);
			
			&::after,
			&::before {
				@include size(0);
				border: solid transparent;
				content: '';
				position: absolute;
				top: (($speechbubble_h - $triangle));
				left: 50%;
			}

			// Triangle
			&::after {
				border-top-color: color(speechbubble);
				border-width: $triangle;
				margin-left: ($triangle * -1);
			}
			
			// Triangle Border
			&::before {
				border-top-color: $c_ink;
				border-width: ($triangle_border);
				margin-top: $border_sm;
				margin-left: ($triangle_border * -1);
			}			
		}
					
		&__text {
			@include size(round($speechbubble_w / 2.4), 0);
			border-bottom: $border solid $c_ink;
			border-radius: $speechbubble_w;
			margin-top: $border_sm;
			margin-bottom: $border_sm;
			
			&--bottom {
				width: round($speechbubble_w / 3.8);
			}
		}
	}
	
	&--bottle {
		top: -35%;
		left: round($mural_w / 1.245);
	
		$bottle_w: round($string_w / 5);
		$bottle_h: round($bottle_w * 2);
		
		&__cap {
			@include size(round($bottle_w / 2.5), 0);
			border-radius: 20%;
		}
		
		&__neck {
			$neck: ($bottle_w / 1.3);
			$neck_gap: ($neck / 4);
			
			@include size($neck, 0);
			border-left: $neck_gap solid transparent;
			border-right: $neck_gap solid transparent;
			border-bottom: $neck solid $c_ink;
			margin-top: ($border_sm * -1);
			position: relative; // To place neck's overlap
			
			// Neck Overlap
			&::before {
				@include size(($neck - ($border * 2)), 0);
				content: '';
				border-left: $neck_gap solid transparent;
				border-right: $neck_gap solid transparent;
				border-bottom: $neck solid color(bottle);
				position: absolute;
				top: $border_sm;
				left: (($neck_gap * -1) + $border);
			}
		}
		
		&__mass {
			@include size($bottle_w, $bottle_h);
			background-color: color(bottle);
			border-top-left-radius: 35%;
			border-top-right-radius: 35%;
			border-bottom-width: ($border * 2);
			margin-top: (($border + $border_sm) * -1);
		}
	}
	
	$duration: 2s;//6s;
	$timing_fn: ease-in-out;
	$iteration_ct: infinite;
	$direction: alternate;
	
	&--mug,
	&--mic,
	&--laptop,
	&--bottle {
		animation: float_left $duration $timing_fn $iteration_ct $direction;
	}
	
	&--phone,
	&--pancakes,
	&--speechbubble {
		animation: float_right $duration $timing_fn $iteration_ct $direction;
	}
	
	@at-root {
		@keyframes float_left {
			50% {
				transform: translate(4%, -3%);
			}
		}

		@keyframes float_right {
			50% {
				transform: translate(-4%, 3%);
			}
		}
	}
}

.comet {
	$comet: round($size / 5.5);

	@include size($comet);
	position: absolute;
	top: round($mural_h - $comet);
	left: 0;
	z-index: z_index(comet);
	
	&__nucleus {
		@include size($comet);
		background-color: color(comet);
		border-color: color(comet_tail);
		border-radius: 50% 50% 50% 0;
		position: relative;
		z-index: z_index(nucleus);
	}

	&__tail {
		$tail_w: round($comet * 0.375);

		@include size(0);
		border-color: transparent color(comet_tail) transparent transparent;
		border-style: solid;
		border-width: $tail_w round($comet * 2.2) $tail_w 0;
		margin-left: ($comet * -2);
		position: absolute;
		top: $comet;
		left: 50%;
		transform: rotateZ(-45deg);

		$delay_tail: -1s;
		$delay_tailbottom: -1.3s;
		
		animation: float_tail 0.1s $delay_tail ease-in-out infinite alternate;
		
		@at-root {
			@keyframes float_tail {
				100% {
					transform: scale(1.07) rotateZ(-45deg);
				}	
			}
		}

		&--bottom {
			$tail_bottom: round($comet * 0.4);

			border-right-color: darken(color(comet_tailbottom), 6%);
			border-width: $tail_bottom round($comet * 5) $tail_bottom 0;
			margin-left: round($comet * -4.42);
			top: round($comet * 2);
			
			animation-delay: $delay_tailbottom;
		}
	}
	
	transform: rotateZ(20deg);
	animation: fly 80s ease-in-out infinite;
	// animation: fly 180s ease-in-out infinite;

	@at-root {
		@keyframes fly {
			3% {
				transform: translate(round($mural_w / 4), round($mural_h / -1.9)) rotateZ(20deg);
			}
			7% {
				transform: translate(round($mural_w / 2), round($mural_h / -1.3)) rotateZ(45deg);
			}
			11% {
				transform: translate(round($mural_w / 1.3), round($mural_h / -2.3)) rotateZ(75deg);
			}
			15% {
				transform: translate(round($mural_w * 1.03), 0) rotateZ(85deg);
				z-index: z_index(comet);
			}
			15.1%, 100% {
				z-index: z_index(comet_hide);
			}
		}
	}
}

.rainbow {	
	$rainbow_gap: ($rainbow / -2);
	
	@include size($rainbow);
	position: absolute;
	bottom: round($rainbow_gap / 1.08);
	left: $rainbow_gap;
	z-index: z_index(rainbow);
	transform: rotateZ(80deg);
	
	$rainbow_space: round((($rainbow / 2) / 6) - $border);
	$rainbow_border: ($rainbow_space + $border);
	$rainbow_colors: (
		$c_09, 
		$c_10, 
		$c_06, 
		$c_04,
		$c_03, 
	);
	$shadow_list: ();

	@for $i from 1 through 5 {			
		$shadow: 
			inset 0 ($rainbow_border * $i) 0 $c_ink,
			inset 0 (($rainbow_border * $i) + $rainbow_space) 0 nth($rainbow_colors, $i);
		$shadow_list: append($shadow_list, $shadow, comma);
	}
	
	box-shadow: 
		inset 0 $rainbow_space 0 color(rainbow), 
		$shadow_list,
		inset 0 ($rainbow_border * 6) 0 $c_ink;
}

.mountains {
	$mountains_h: round($mountains_w / 1.48);

	@include size($mountains_w, $mountains_h);
	position: absolute;
	bottom: round($mountains_h / -2);
	left: round($rainbow / 1.6);
	z-index: z_index(mountains);
}
.mountain {
	$mountain: round($mountains_w / 3.6);
	
	background-color: color(mountain);
	overflow: hidden; // To avoid ice out of place
	position: absolute;
	transform: rotateZ(45deg);
	
	&--sm {
		@include size($mountain);
		top: round($mountain / 1.2);
		left: round($mountain / 4.5);
	}
	
	&--lg {
		$mountain_gap: round($mountain / 2.7);
		
		@include size(round($mountain * 1.7));
		background-color: color(mountain_lg);
		top: $mountain_gap;
		right: $mountain_gap;
	}
	
	&__ice {
		@include size(100%);
		margin-top: -80%;
		margin-left: -40%;
		position: relative; // To place lines
		transform: rotateZ(-20deg);
		
		// Lines
		&::before,
		&::after {
			@include size(100%);
			border-bottom: $border_sm solid $c_ink;
			content: '';
			position: absolute;
		}
		
		&::before {
			top: 8%;
			left: -15%;
		}
		
		&::after {
			top: 14%;
			left: -30%;
		}
	}
}

.astronaut {
	@include size($astronaut_w, round($helmet_w * 1.142));
	margin-left: ($astronaut_w / -2);
	position: absolute;
	left: 50%;
	bottom: 0;
	
	$helmet_h: round($helmet_w / 1.1);
	
	&__helmet {
		@include size($helmet_w, $helmet_h);
		background-color: color(helmet);
		border-radius: round($helmet_w / 2);
		position: relative; // To place ears
		z-index: z_index(helmet);	
		
		&__visor {
			$visor_h: round($helmet_w * 0.6);

			@include size($helmet_h, $visor_h);
			border-radius: round($helmet_h / 2);
						
			// Glow
			&::before {
				$glow: round($helmet_w * 0.017);

				@include size($glow);
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($helmet_h / 1.22) round($visor_h / 2.5) 0 round($glow * 0.4) $c_ink,
					round($helmet_h / 1.31) round($visor_h / 3.5) 0 round($glow * 1.3) $c_ink,
					round($helmet_h / 1.44) round($visor_h / 4.8) 0 $c_ink;
			}
		}	
		
		&__ear {
			$ear_w: round($helmet_w * 0.055);
			$ear_gap: ($ear_w * -1);
			
			@include size($ear_w, round($ear_w * 2.5));
			background-color: color(ear);
			border-radius: $ear_w;
			position: absolute;
			
			&--left {
				left: $ear_gap;
			}
			
			&--right {
				right: $ear_gap;
			}
		}
	}
	
	&__neck {
		border-radius: 100% / 0 0 100% 100%;
		
		&--top {
			$neck_h: round($helmet_h * 0.313);
			
			@include size(round($helmet_w / 1.3), $neck_h);	
			background-color: color(helmet_necktop);
			margin-top: round($neck_h / -1.8);
			z-index: z_index(neck_top);	
		}
		
		&--bottom {		
			$neck_h: round($helmet_h * 0.207);
			
			@include size(round($helmet_w / 1.4), $neck_h);	
			background-color: color(helmet_neckbottom);
			margin-top: round($neck_h / -2);
			z-index: z_index(neck_bottom);	
		}
	}
	
	&__body {
		$body_w: round($helmet_w * 1.4);
		$body_h: round($helmet_h * 0.5);

		@include size(round($helmet_w * 1.4), $body_h);	
		background-color: color(body);
		margin-left: ($body_w / -2);
		position: absolute;
		left: 50%;
		bottom: round($body_h / -1.5);
		z-index: z_index(body);
	}
}
.plants {
	@include size(100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: z_index(plants);	
}
.plant {
	$plant_w: round($size * 0.24);
	$plant_h: round($plant_w * 5.4);
	$stem: round($plant_h / 1.675);
	$leaf: round($plant_w / 1.3);
	
	$duration: 2s;//6s;
	$timing_fn: ease-in-out;
	$iteration_ct: infinite;
	$direction: alternate;

	@include size($plant_w, $plant_h);
	position: absolute;
	
	&--01,
	&--02,
	&--04,
	&--06,
	&--08,
	&--09 {
		animation: float_flip $duration $timing_fn $iteration_ct $direction;
	}
	
	&--03,
	&--05,
	&--07 {
		animation: float $duration $timing_fn $iteration_ct $direction;
	}

	@at-root {
		@keyframes float {
			50% {
				transform: rotateZ(-6deg);
			}
		}
		
		@keyframes float_flip {
			50% {
				transform: rotateZ(6deg) scaleX(-1);
			}
		}
	}
	
	&__stem {
		@include size($stem);
		border-color: transparent;
		position: absolute;

		&--top {
			border-right-color: $c_ink;
			top: 1%;
			right: 6%; // FYI - Change this value if after resizing the component, the stem is no longer aligned.
			
			// Flower
			&::before {
				@include size(round($border * 2.5));
				@extend .p-circle;
				background-color: color(flower);
				content: '';
				position: absolute;
				top: round($plant_h / 20);
				right: round($plant_w / 4);
			}
		}
		
		&--bottom {
			border-left-color: $c_ink;
			bottom: 0;
			left: 0;
		}
	}
			
	&__leaf {		
		@include size($leaf);
		background-color: color(leaf);
		border-width: $border_sm;
		border-top-left-radius: $leaf;
		border-bottom-right-radius: $leaf;
		position: absolute;
		z-index: z_index(leaf);
		
		// Top
		&--01 {
			bottom: round($stem / 1.7);
			right: round($stem / -5.6);
			transform: rotateZ(-30deg);
		}
		
		&--02 {
			bottom: round($stem / 4);
			left: round($stem / 1.45);
			transform: rotateZ(20deg);
		}
		
		// Bottom
		&--03 {
			bottom: round($stem / 2);
			right: round($stem / 1.55);
			transform: rotateZ(100deg);
		}
		
		&--04 {
			top: round($stem / 3);
			left: round($stem / -4);
			transform: rotateZ(10deg);
		}
	}
	
	&--flip {
		transform: scaleX(-1);
	}
	
	@for $i from 1 through 9 {  
		@if $i % 2 == 0 {
			&--0#{$i} {
				.plant__leaf {
					background-color: color(leaf_even);
				}
			}
		}
	}
	
	// Left Part
	&--01 {
		bottom: round($stem / -2.1);
		left: 0;
	}
	
	&--02 {
		bottom: round($stem / -1.25);
		left: round($astronaut_w / 9);
	}
	
	&--03 {
		bottom: round($stem / -2.5);
		left: round($astronaut_w / 5);
	}
	
	&--04 {
		bottom: round($stem / -6.3);
		left: round(($astronaut_w / 2) - ($helmet_w / 1.2));
	}
	
	// Top Part
	&--05 {
		top: round($plant_h * -0.7);
		left: round(($astronaut_w / 2) - ($helmet_w / 2.5));
	}

	&--06 {
		top: round($plant_h * -0.5);
		right: round(($astronaut_w / 2) - ($helmet_w / 1.87));
	}
	
	// Right Part
	&--07 {
		bottom: round($stem / -2.7);
		right: round(($astronaut_w / 2) - ($helmet_w / 1.05));
	}
	
	&--08 {
		bottom: round($stem / -1.25);
		right: round(($astronaut_w / 6));
	}
	
	&--09 {
		bottom: round($stem / -6);
		right: round($leaf * 2);
	}
}

.planet {	
	@include size($planet);
	background-color: color(planet);
	position: absolute;
	right: round($shrooms_w * 1.3);
	bottom: round($planet / -1.45);
	z-index: z_index(planet);
	
	&__x {
		@include size(round($planet / 20), round($planet / 5));
		border-radius: round($planet / 16);
		position: absolute;
		top: 5%;
		left: 35%;
		
		&--left {
			transform: rotateZ(45deg) translate(-25%, 6%);
		}
		
		&--right {
			transform: rotateZ(-45deg);
		}
	}
}

.shrooms {
	@include size(round($shrooms_w * 1.1), round($shrooms_w * 0.75));
	position: absolute;
	right: 0.5%;
	bottom: 0;
	z-index: z_index(shrooms);
}
.shroom {
	position: absolute;
	bottom: 0;
	
	&__cap {
		border-bottom-width: ($border * 2);
	}
	
	&__stem {
		border-bottom: 0;
		margin-top: ($border * -1);
	}

	&--lactarius {
		$lactarius_w: round($shrooms_w * 0.49); 

		width: $lactarius_w;
		right: round($shrooms_w / 8);

		&__cap {
			$cap_h: round($lactarius_w * 0.28);
			$cap_radius: round($cap_h / 1.2);

			@include size(100%, $cap_h); 
			background-color: color(lactarius_cap);
			border-top-left-radius: $cap_radius;
			border-top-right-radius: $cap_radius;

			// Ovals
			&::before {
				$oval_sm: round($lactarius_w / 11);
				$oval_lg: round($oval_sm / 7);

				@include size($oval_sm, round($oval_sm / 2));
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($lactarius_w / 14) round($cap_h / 2.5) 0 $oval_lg $c_ink, 
					round($lactarius_w / 2.8) round($cap_h / 7) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.56) round($cap_h / 2.2) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.3) round($cap_h / 4) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.75) round($cap_h / 9) 0 $c_ink,
					round($lactarius_w / 2.13) round($cap_h / 2.5) 0 $c_ink,
					round($lactarius_w / 5.3) round($cap_h / 6) 0 $c_ink,
					round($lactarius_w / 3.7) round($cap_h / 2.15) 0 $c_ink;
			}	
		}

		&__stem {
			$stem_w: round($lactarius_w / 5.5);
			$stem_h: round($stem_w * 7);

			@include size($stem_w, $stem_h);
		}
	}

	&--flammulina {
		$flammulina_w: round($shrooms_w * 0.223);

		width: $flammulina_w;
		left: 0;
	
		&__cap {		
			@include size($flammulina_w, round($flammulina_w / 1.15)); 
			background-color: color(flammulina_cap);
			border-top-left-radius: $flammulina_w;
			border-top-right-radius: $flammulina_w;
		}

		&__stem {
			$stem_w: round($flammulina_w / 3.7);
			$stem_h: round($stem_w * 7.5);

			@include size($stem_w, $stem_h);
		}
	}

	&--amanita {
		$amanita_w: round($shrooms_w * 0.396); 

		width: $amanita_w;
		left: round($shrooms_w / 5);

		&__cap {
			$cap_h: round($amanita_w * 0.6);

			@include size(100%, $cap_h); 
			background-color: color(amanita_cap);
			border-top-left-radius: $cap_h;
			border-top-right-radius: $cap_h;

			// Dots
			&::before {
				$dot_lg: round($amanita_w / 6.5);
				$dot_sm: round(($dot_lg / 4.5) * -1);
				$dot_color: $c_ink;

				@include size($dot_lg);
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($amanita_w / 7) round($cap_h / 4.2) 0 $dot_sm $dot_color, 
					round($amanita_w / 4.2) round($cap_h / 1.8) 0 $dot_sm $dot_color, 
					round($amanita_w / 2.6) round($cap_h / 2.4) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.43) round($cap_h / 4.5) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.9) round($cap_h / 14) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.31) round($cap_h / 1.75) 0 $dot_sm $dot_color, 
					round($amanita_w / 3.1) round($cap_h / 8.5) 0 $dot_color,
					round($amanita_w / 18) round($cap_h / 1.9) 0 $dot_color,
					round($amanita_w / 1.73) round($cap_h / 2.2) 0 $dot_color;
			}	
		}

		&__stem {
			$stem_w: round($amanita_w / 3.3);
			$stem_h: round($stem_w * 1.6);

			@include size($stem_w, $stem_h);
		}
	}

	&--psilocybin {
		$psilocybin_w: round($shrooms_w * 0.236);

		width: $psilocybin_w;
		right: 0;

		&__cap {		
			$cap_top_h: round($psilocybin_w / 4);

			@include size($psilocybin_w); 
			background-color: color(psilocybin_cap);
			border-top-left-radius: $psilocybin_w;
			border-top-right-radius: $psilocybin_w;
			margin-top: round($cap_top_h - ($border * 1.5)); // To fit inside parent container
			position: relative; // To place cap and gills

			// Top Cap
			&::before {
				$cap_top_w: round($psilocybin_w / 2);

				@include size($cap_top_w, $cap_top_h);
				@extend .p-border;
				background-color: color(psilocybin_cap);
				border-top-left-radius: $cap_top_w;
				border-top-right-radius: $cap_top_w;
				border-bottom: 0;
				content: '';
				margin-left: ($cap_top_w / -2);
				position: absolute;
				top: round(($cap_top_h - ($border * 1.5)) * -1);
				left: 50%;
			}	

			// Gills
			&::after {
				$gill_gap: (($psilocybin_w - ($border * 1.4)) / 9);

				@include size($border_sm, round($psilocybin_w / 4));
				content: '';
				margin-left: ($border_sm * -1);
				position: absolute;
				bottom: 0;
				left: 0;

				$shadow_list: ();

				@for $i from 1 through 8 {		
					$shadow: ($gill_gap * $i) 0 0 $c_ink;

					$shadow_list: append($shadow_list, $shadow, comma);
				}

				box-shadow: $shadow_list;
			}
		}

		&__stem {
			$stem_w: round($psilocybin_w / 3.3);
			$stem_h: round($stem_w * 4);

			@include size($stem_w, $stem_h);
		}
	}	
}

// DEVPHASE
/* This class was created only for testing during development phase.
 * The 3 multi-screen feature must fit the full aspect ratio of 48:9. *
 * Each screen must have a 16:9 aspect ratio. */
.dev-grid {
	@include size(100%, $mural_h);
	display: grid;
	grid-template-areas: "a b c";
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	
	&__01 {
		grid-area: a;
		background-color: pink;
	}
	
	&__02 {
		grid-area: b;
		background-color: peachpuff;
	}
	
	&__03 {
		grid-area: c;
		background-color: pink;
	}
}