@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300';
$black: #444;
$white: #fff;

$primary-color: #315a7b;
$primary-color-dark: darken( $primary-color, 5% );
$primary-color-tint: lighten( $primary-color, 30% );

$secondary-color: #f6e6bd;
$secondary-color-dark: darken( $secondary-color, 10% );
$secondary-color-tint: lighten( $secondary-color, 10% );

$blush: #e68b9c;
$foot-bean: #a47352;
$pokeball: #cd394a;

@mixin triangle($size: 1rem, $color: $white) {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 $size $size $size;
	border-color: transparent transparent $color transparent;
}

* { box-sizing: border-box; }
body {
	display: flex;
	justify-content: center;
	height: 100vh;
	background-color: $primary-color-tint;
	font-size: 16px;
	line-height: 1;
}
.container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: auto 0;
	flex: 1 0 auto;
}

.snor {
	position: relative;
	margin-top: 5rem;
	perspective: 50rem;
	
	&-head-container {
		position: absolute;
		z-index: 2;
		top: -5.5rem;
		left: calc(50% - (11rem / 2));
		height: 7.75rem;
		width: 11rem;
		transform-origin: center 10rem;
	}
	
	&-head {
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		border: {
			top: {
				left-radius: 50% 55%;
				right-radius: 50% 55%;
			}
			bottom: {
				left-radius: 35% 45%;
				right-radius: 35% 45%;
			}
		}
		background-color: $primary-color;
		overflow: hidden;
		
		&::before,
		&::after {
			content: '';
			position: absolute;
		}
		
		&::before {
			bottom: 0;
			left: 10%;
			height: 85%;
			width: 80%;
			border: {
				top: {
					left-radius: 45% 60%;
					right-radius: 45% 60%;
				}
				bottom: {
					left-radius: 50% 40%;
					right-radius: 50% 40%;
				}
			}
			background-color: $secondary-color;
		}
		
		&::after {
			position: absolute;
			bottom: calc(100% - 2.75rem);
			left: calc(50% - (3.5rem / 2));
			height: 3.5rem;
			width: 3.5rem;
			background-color: $primary-color;
			border-bottom-right-radius: 0.25rem;
			transform-origin: center;
			transform: rotate(45deg) skew(-15deg, -15deg);
		}
	}
	
	&-ears {
		will-change: transform;
	}
	
	&-ear {
		position: absolute;
		z-index: 1;
		background-color: $primary-color;
		bottom: calc(100% - 4.5em);
		height: 4em;
		width: 3.5em;
		border-top-left-radius: 60% 0.5em;
		border-top-right-radius: 60% 0.5em;
		
		&-left {
			left: 0;
			border-bottom-left-radius: 0.5em 60%;
			transform: skewY(20deg);
		}
		
		&-right {
			right: 0;
			border-bottom-right-radius: 0.5em 60%;
			transform: skewY(-20deg);
		}
	}
	
	&-face {
		position: absolute;
		z-index: 3;
		top: 3.75rem;
		width: 100%;
	}
	
	&-eye {
		position: absolute;
		top: 0;
		height: 0.5rem;
		width: 2rem;
		border-top: solid 5px $black;
		border-radius: 50%;
		
		&-left {
			left: 2rem;
		}
		
		&-right {
			right: 2rem;
		}
	}
	
	&-blush {
		position: absolute;
		top: 0.5rem;
		height: 0.75rem;
		width: 1.5rem;
		border-radius: 50%;
		background-color: $blush;
		opacity: 0.7;
		transform-origin: center;
		
		&-left {
			left: 1.5rem;
			transform: rotate(2deg);
		}
		
		&-right {
			right: 1.5rem;
			transform: rotate(-2deg);
		}
	}
	
	&-mouth {
		position: absolute;
		left: calc(50% - (3rem / 2));
		top: 1rem;
		height: 0.25rem;
		width: 3rem;
		border-bottom: solid 3px $black;
		border-radius: 50%;
		
		&::before,
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			@include triangle(0.375rem);
		}
		
		&::before {
			left: 0;
		}
		
		&::after {
			right: 0;
		}
		
		&-inner {
			position: absolute;
			z-index: -1;
			left: 0;
			bottom: -3px;
			height: 1rem;
			width: 100%;
			border-radius: 50%;
			background-color: $black;
			transform-origin: center bottom;
		}
	}
	
	&-body {
		position: relative;
		z-index: 5;
		height: 10.5rem;
		width: 16rem;
		border: {
			top: {
				left-radius: 50% 65%;
				right-radius: 50% 65%;
			}
			bottom: {
				left-radius: 50% 35%;
				right-radius: 50% 35%;
			}
		}
		background-color: $primary-color;
		overflow: hidden;
		transform-origin: center bottom;
		
		&::after {
			content: '';
			position: absolute;
			top: -1%;
			left: 10%;
			height: 70%;
			width: 80%;
			border: {
				top: {
					left-radius: 50% 60%;
					right-radius: 50% 60%;
				}
				bottom: {
					left-radius: 50% 40%;
					right-radius: 50% 40%;
				}
			}
			background-color: $secondary-color;
		}
	}
	
	&-arm-container {
		position: absolute;
		z-index: 1;
		top: -3rem;
		height: 5.5rem;
		width: 3.75rem;
		transform-origin: bottom center;
	}
	
	&-arm {
		height: 100%;
		width: 100%;
		border: {
			top: {
				left-radius: 50% 65%;
				right-radius: 50% 65%;
			}
			bottom: {
				left-radius: 10% 30%;
				right-radius: 10% 30%;
			}
		}
		background-color: $primary-color-dark;
		
		&-claws {
			z-index: -1;
			top: -0.375rem;
			left: 50%;
			transform: translateX(-50%);
			
			&,
			&::before,
			&::after {
				position: absolute;
				@include triangle(0.5rem);
			}
			
			&::before,
			&::after {
				content: '';
				top: 0.5rem;
				transform-origin: center;
			}
			
			&::before {
				right: calc(100% + 0.5rem);
				transform: rotate(-40deg);
			}
			
			&::after {
				left: calc(100% + 0.5rem);
				transform: rotate(40deg);
			}
		}
		
		&-left {
			left: 2.5rem;
		}
		
		&-right {
			right: 2.5rem;
		}
	}
	
	&-foot-container {
		position: absolute;
		z-index: 6;
		bottom: -0.25rem;
		height: 5rem;
		width: 5.5rem;
	}
	
	&-foot {
		height: 100%;
		width: 100%;
		border-radius: 50%;
		background-color: $secondary-color;
		transform-origin: center;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0.75rem;
			left: 25%;
			height: 50%;
			width: 50%;
			border-radius: 50%;
			background-color: $foot-bean;
		}
		
		&-toes {
			z-index: -1;
			top: -0.75rem;
			left: 50%;
			transform: translateX(-50%);
			
			&,
			&::before,
			&::after {
				position: absolute;
				@include triangle;
			}
			
			&::before,
			&::after {
				content: '';
				top: 0.75rem;
				transform-origin: center;
			}
			
			&::before {
				right: calc(100% + 1rem);
				transform: rotate(-40deg);
			}
			
			&::after {
				left: calc(100% + 1rem);
				transform: rotate(40deg);
			}
		}
		
		&-left {
			left: -1rem;
			transform: rotate(-30deg);
		}
		
		&-right {
			right: -1rem;
			transform: rotate(30deg);
		}
	}
	
	&-bubble {
		position: absolute;
		bottom: calc(100% - 2rem);
		left: 2rem;
		height: 3rem;
		width: 3rem;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 10%;
		background-color: lighten($primary-color-tint, 30%);
		transform: rotate(20deg);
		transform-origin: bottom right;
		opacity: 0;
	}
}

.poke-flute {
	position: fixed;
	z-index: 5;
	bottom: 2rem;
	right: 2rem;
	height: 4.5rem;
	width: 4.5rem;
	cursor: pointer;
	transform: rotate(50deg);
	
	&::before {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		border-radius: 50%;
		box-shadow: 0.325rem 0 0 rgba($black, 0.3);
		background-color: $primary-color;
		transition: 0.3s ease-in-out;
	}
	
	&:hover {
		&::before {
			transform: scale(1.2);
		}
	}
	
	&-stick {
		position: absolute;
		top: -0.5rem;
		left: calc(50% - 0.625rem);
		height: 6rem;
		width: 1.25rem;
		background-color: $secondary-color;
		will-change: transform;
		
		&::before {
			content: '';
			position: absolute;
			top: 0.25rem;
			left: 0;
			height: 0.25rem;
			width: 100%;
			background-color: $pokeball;
		}
	}
	
	&-ball {
		position: absolute;
		bottom: 0.5rem;
		left: calc(50% - 1.25rem);
		height: 2.5rem;
		width: 2.5rem;
		border-radius: 50%;
		background-color: $pokeball;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 50%;
			width: 100%;
			background-color: $white;
		}
	}
	
	&-holes {
		top: 1.5rem;
		
		&::before,
		&::after,
		& {
			position: absolute;
			left: calc(50% - 0.25rem);
			height: 0.5rem;
			width: 0.5rem;
			border-radius: 50%;
			background-color: $black;
		}
		
		&::before,
		&::after {
			content: '';
		}
		
		&::before {
			top: -0.75rem;
		}
		
		&::after {
			top: 0.75rem;
		}
	}
	
	&-music-note {
		position: absolute;
		left: calc(50% - 0.625rem);
		top: calc(50% - 0.625rem);
		height: 1.25rem;
		width: 1.25rem;
		border: solid 3px currentColor;
		border-top-width: 6px;
		border-bottom: 0;
		color: $blush;
		mix-blend-mode: overlay;
		opacity: 0;
		
		&::before,
		&::after {
			content: '';
			position: absolute;
			bottom: -0.25em;
			height: 0.5em;
			width: 0.75em;
			border-radius: 50%;
			background-color: currentColor;
			transform: rotate(-25deg);
		}
		
		&::before {
			right: 100%;
		}
		
		&::after {
			right: -3px;
		}
	}
	
	&-control {
		position: absolute;
		opacity: 0;
	}
}

.poke-flute-control {
	+ .poke-flute {
		+ .snor {
			.snor {
				&-head-container {
					transform: translateY(4rem) rotateX(40deg) scale(0.9);
					transition: 0.45s 1.3s ease-in;
				}
					
				&-mouth-inner {
					transform: scaleY(0);
				}
					
				&-face {
					transform: translateY(-1rem);
					transition: 0.45s 1.3s ease-in;
				}
				
				&-ear {
					transition: 0.45s 1.4s ease-in;
					
					&-left {
						transform: translateY(40%) rotateX(40deg) skewY(20deg);
					}
					
					&-right {
						transform: translateY(40%) rotateX(40deg) skewY(-20deg);
					}
				}
				
				&-arm {
					&-container {
						transition: 0.5s 1s ease-in;
					}
					
					&-left {
						transform: rotate(-130deg);
					}

					&-right {
						transform: rotate(130deg);
					}
				}
			}
		}
	}
	
	&:checked {
		+ .poke-flute {
			.poke-flute-stick {
				animation: wiggle 1.2s infinite linear;
			}
			
			.poke-flute-music-note {
				animation: moveMusic 2s infinite ease-in-out;
			}
			
			+ .snor {
				.snor {
					&-head-container {
						transform: translateY(0) rotateX(0deg) scale(1);
						transition: 0.9s ease-out;
					}
					
					&-mouth-inner {
						animation: openMouth 2.5s 0.9s 1;
					}
					
					&-face {
						transform: translateY(0);
						transition: 0.9s ease-out;
					}
				
					&-ear {
						transition: 0.95s ease-out;
						
						&-left {
							transform: translateY(0) rotateX(0deg) skewY(20deg);
						}

						&-right {
							transform: translateY(0) rotateX(0deg) skewY(-20deg);
						}
					}
					
					&-arm {
						&-left {
							transform: rotate(-63deg);
							transition: 0.7s 0.7s ease-out;
						}
						
						&-right {
							transform: rotate(105deg);
							transition: 0.7s 1s ease-out;
							animation: rotateArmRight 3s 1s 1;
						}
					}
				
					&-foot {
						&-left {
							animation: rotateFootLeft 2.4s 1s infinite ease-in-out;
						}

						&-right {
							animation: rotateFootRight 2.4s 1s infinite ease-in-out;
						}
					}
					
					&-body {
						animation: breatheAwake 2.5s infinite;
					}
				}
			}
		}
	}
	
	&:not(:checked) {
		+ .poke-flute {
			+ .snor {
				.snor {
					&-body {
						animation: breathe 3.5s 1.5s infinite;
					}
					
					&-bubble {
						animation: bubbleGrow 3.5s 3.25s infinite;
					}
				}
			}
		}
	}
}

@keyframes rotateFootLeft {
	0%, 100% { transform: rotate(-30deg) }
	40%, 60% { transform: rotate(-15deg) }
}
@keyframes rotateFootRight {
	0%, 100% { transform: rotate(30deg) }
	40%, 60% { transform: rotate(15deg) }
}

@keyframes rotateArmRight {
	0% { transform: rotate(130deg) }
	50%, 70% { transform: rotate(63deg) }
	100% { transform: rotate(105deg) }
}

@keyframes openMouth {
	0%, 100% { transform: scaleY(0) }
	20%, 30% { transform: scaleY(0.5) }
	50%, 60% { transform: scaleY(1) }
	55% { transform: scaleY(0.98) }
}

@keyframes breathe {
	0%, 100% { transform: scaleY(1) }
	47%, 53% { transform: scaleY(1.04) }
}

@keyframes breatheAwake {
	0%, 100% { transform: scaleY(1) }
	47%, 53% { transform: scaleY(1.02) }
}

@keyframes bubbleGrow {
	0%, 100% { transform: rotate(20deg) scale(0.3) }
	47%, 53% { transform: rotate(20deg) scale(1); opacity: 0.3 }
}

@keyframes wiggle {
	0%, 100% { transform: rotate(0deg) }
	25% { transform: rotate(10deg) scaleY(1.07) }
	75% { transform: rotate(-10deg) scaleY(0.9) }
}

@keyframes moveMusic {
	0% { transform: rotate(0deg) translate(0, 0) scale(0.3); opacity: 1 }
	100% { transform: rotate(-50deg) translate(-4em, 3em) scale(1); opacity: 0 }
}