// Partials ==========================================================================
@import "functions";
@import "extensions";
@import "reset";

// Variables =========================================================================
$mobile: 30em;
$tablet: 50em;
$easing: ease-in-out;

$purple: #181236;
$purple_dark: shade($purple, 40%);
$brown: #3f1f13;
$gold: #edbf68;
$gold_lighter: tint($gold, 60%);
$gold_light: tint($gold, 30%);
$gold_dark: rgba($gold, 0.5);
$blue_sky: #a3e9ff;
$blue: #283377;
$blue_twitter: #1da1f2;
$blue_dark: shade($blue, 40%);
$black: shade($blue, 85%);
$white: #fafafa;
$shadow: rgba($purple_dark, 0.2);
$gray: mix($white, $black);

$transition: 1s;
$radius: 1rem;

// Partials width variable access ====================================================
@import "keyframes";

// Base Styles =======================================================================
body {
	position: relative;
	font: 400 100%/1.2 Amatic SC, sans-serif;
	min-height: 100vh;
	text-align: center;
	background: $purple_dark;
	background-image: linear-gradient($purple, $purple_dark);
	color: $gold;

	@media (min-width: $tablet) {
		padding: 1em;
		font-size: 110%;
	}
}

// Typography ========================================================================
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

h1 {
	font-size: 3em;
	line-height: 1;
}

h2 {
	font-size: 1.6em;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.3em;
	margin-bottom: 1rem;
}

a {
	@extend %no-drag;
	text-decoration: none;
	cursor: pointer;
	color: currentColor;
	border-bottom: thin dashed $gold_dark;

	&:hover {
		color: $gold_light;
		border-bottom: thin dashed $gold;
	}
}

// Structural Styles =================================================================
.container {
	max-width: 70em;
	margin: 0 auto;
	padding: 1em;
}

// Header ============================================================================
header {
	@extend %no-select;
	text-align: left;

	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 0 0 1em;
	}
}

.logo,
.directions-toggle {
	@extend %no-select;
	font-size: 1.5em;
	cursor: pointer;

	@media (min-width: $tablet) {
		font-size: 2em;
	}
}

.logo {
	line-height: 1.5;
	margin-right: 1rem;
	color: $gold;

	&,
	&:hover {
		border: 0;
	}

	@media (min-width: $tablet/2) {
		font-size: 2em;
	}

	@media (min-width: $tablet) {
		font-size: 3em;
		line-height: 1;

		.is-showing-directions & {
			transform-origin: top left;
			transform: scale(0.75);
		}
	}
}

// Directions ==========================================================================
.directions-toggle,
.directions-box {
	background: $blue;
	color: $white;
	border-radius: $radius;
}

.directions-toggle {
	@extend %no-tap;
	font-family: inherit;
	display: inline-block;
	position: relative;
	cursor: pointer;
	padding: 1rem 0.75em;
	margin-bottom: 1rem;
	box-shadow: inset 0.3rem -0.3rem $shadow;

	header & {
		margin-bottom: 0;
	}

	footer & {
		font-size: 1em;
	}

	.is-showing-directions header & {
		border-radius: $radius $radius 0 0;
		box-shadow: none;

		&:after {
			@extend %psuedo;
			position: absolute;
			width: $radius * 2;
			height: $radius * 2;
			background: transparent;
			bottom: 0;
			right: 100%;
			border-radius: $radius;
			box-shadow: $radius $radius $blue;
		}

		&:focus {
			outline: none;
		}
	}
}

.close {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: $radius $radius 0 0;
	text-align: center;
	vertical-align: middle;
	background: rgba($blue, 0.9);
	background: linear-gradient(90deg, rgba($blue, 0), $blue 66%);

	path {
		stroke: currentColor;
		stroke-width: 1px;
		stroke-linecap: round;
	}

	&:hover {
		path {
			// stroke: currentColor;
		}
	}

	.is-showing-directions & {
		display: inline-block;
	}
}

.directions-box {
	display: none;
	position: relative;
	box-shadow: inset 0.3rem -0.3rem $shadow;

	.is-showing-directions & {
		display: block;
		border-radius: $radius 0 $radius $radius;
		padding-bottom: 0.3rem;

		@media (min-width: $tablet) {
			display: flex;
			align-items: center;
			text-align: center;
		}
	}
}

.examples {
	font-weight: bold;
	list-style: none;
	padding: 1em;

	@media (min-width: $tablet) {
		flex: 1 0 24em;
		text-align: left;
	}
}

.example-tweet {
	display: block;
	position: relative;
	padding: 0.5rem 1rem 0.5rem 1.75em;
	vertical-align: middle;
	background: $white;
	font-size: 1.5em;
	color: $black;
	border: 0;
	margin-top: 0.25em;
	cursor: text;
	border-radius: $radius;
}

.handle-highlight,
.color-highlight,
.more-highlight,
.personality-highlight {
	border-radius: 0.25em;
	font-weight: bold;
	box-shadow: -0.1em 0 rgba($gold_lighter, 0), 0.1em 0 rgba($gold_lighter, 0);
}

.is-showing-directions {
	$highlight-duration: 12s;

	.handle-highlight,
	.color-highlight,
	.more-highlight,
	.personality-highlight {
		animation: highlight-light-on-dark $highlight-duration ease-in-out infinite;
	}

	.instructions {
		.handle-highlight,
		.color-highlight,
		.more-highlight,
		.personality-highlight {
			animation-name: highlight-dark-on-light;
			color: $gold;
		}
	}

	.color-highlight {
		animation-delay: $highlight-duration * 0.25;
	}
	.personality-highlight {
		animation-delay: $highlight-duration * 0.5;
	}
	.more-highlight {
		animation-delay: $highlight-duration * 0.75;
	}
}

.twitter-logo {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	position: absolute;
	top: 0.125em;
	left: 0.125em;

	path {
		fill: $blue_twitter;
	}
}

.is-visible {
	display: block;
}

// Creature structure ================================================================
.creatures-wrapper {
	min-height: 25vh;
	text-align: center;

	.is-showing-directions & {
		opacity: 0.25;

		a {
			pointer-events: none;
		}
	}
}

.creatures {
	display: inline;
}

.item {
	@extend %no-select;
	animation: load 0.5s ease-out both;
	display: inline-block;
	width: 50%;
	vertical-align: middle;
	text-align: center;
	padding: 1em;

	// Animation delay
	// @for $i from 1 through 16 {
	// 	&:nth-child(#{$i}) {
	// 		animation-delay: $i * 0.15s;
	// 	}
	// }

	// Media queries for sizing creatures
	@for $i from 3 through 8 {
		@media (min-width: 14em * $i) {
			width: 100% / $i;
		}
	}

	// Limit number of creatures for performance
	// @media (max-width: 14em * 3) {
	// 	&:nth-last-child(-n + 4) {
	// 		display: none;
	// 	}
	// }
	// @media (min-width: 14em * 3) and (max-width: 14em * 4) {
	// 	&:nth-last-child(1) {
	// 		display: none;
	// 	}
	// }
	// @media (min-width: 14em * 4) and (max-width: 14em * 5) {
	// 	&:nth-last-child(-n + 2) {
	// 		display: none;
	// 	}
	// }
	// @media (min-width: 14em * 5) and (max-width: 14em * 5) {
	// 	&:nth-last-child(-n + 4) {
	// 		display: none;
	// 	}
	// }

	&.is-hidden {
		display: none !important;
	}
}

.default-box {
	cursor: default;
}

.info {
	padding: 1rem 0;
	line-height: 1.5;

	.default-box & {
		line-height: 1.2;
	}

	h3 {
		margin-bottom: 0;
	}
	a {
		font-weight: bold;
	}
}

// Creature ==========================================================================
$colors_list: #1e8fff, #d8a635, #5aa959, #3cb9b9, #5a31bb, #785cbb, #f44336,
	#d8a635, #5aa959, #3cb9b9;

.creature {
	animation: wobble 3s ease-in-out infinite;
	animation-delay: inherit;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	margin: 0 auto;
	border-radius: 50%;
	transform-origin: center bottom;
	box-shadow: inset 0.3rem -0.5rem $shadow;
	transition: box-shadow $transition;

	@for $i from 1 through length($colors_list) {
		.creature-box:nth-child(#{$i}) & {
			background-color: nth($colors_list, $i);
		}
	}

	.creature-box:hover & {
		box-shadow: inset 0.3rem -0.75rem $shadow;
		transition-duration: $transition * 0.25;
	}

	.is-showing-directions & {
		filter: grayscale(1);
	}
}

// Face ------------------------------------------------------------------------------
.face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	right: 0;
	bottom: 0;
	transition: transform $transition;

	.creature-box:hover & {
		transform: translateY(-5%) scale(0.95);
		transition: transform $transition * 0.25;
	}
}

// Eyes ------------------------------------------------------------------------------
.eyes {
	position: absolute;
	top: 22%;
	width: 100%;
	height: 14%;
}

.eye {
	animation: blink 5s linear infinite;
	position: absolute;
	height: 100%;
	width: 9%;
	background: $purple_dark;
	border-radius: 50%;

	&:nth-child(1) {
		left: 33%;
	}
	&:nth-child(2) {
		right: 33%;
	}
}

// Moustache -------------------------------------------------------------------------
.moustache {
	position: absolute;
	top: 38%;
	left: 18%;
	width: 64%;
	height: 14%;
}

// Mouth -----------------------------------------------------------------------------
.mouth {
	position: absolute;
	background: $purple_dark;
	top: 45%;
	left: 22%;
	right: 22%;
	bottom: 45%;
	border-radius: 20% 20% 50% 50%;
	transform-origin: center top;
	overflow: hidden;
	transition: transform $transition * 0.25;

	.creature-box:hover & {
		transform: scale3d(0.95, 0.75, 1);
	}
}

.tooth {
	position: absolute;
	top: 0;
	width: 15%;
	bottom: 55%;
	background: $white;
	border-radius: 0 0 2px 2px;

	&:nth-child(1) {
		left: 32%;
	}
	&:nth-child(2) {
		right: 32%;
	}
}

// Modifiers =========================================================================
.mod-angry {
	.face {
		animation: angry 4s ease-in-out infinite;
	}
	.mouth {
		border-radius: 50% 50% 5px 5px;
		left: 30%;
		right: 30%;
	}
}

.mod-camouflage {
	.creature {
		background: url(img/mod-camouflage.png);
		background-position: center center;
	}
}

.mod-cyclops {
	.eye {
		&:nth-child(1) {
			left: 45%;
		}
		&:nth-child(2) {
			right: 45%;
		}
	}
}

.mod-dark {
	.mouth,
	.eye {
		background: #333;
	}
}

.mod-frozen {
	* {
		animation-play-state: paused !important;
	}
}

.mod-ghost {
	.creature {
		background: shade($white, 20%) !important;
		border-radius: 50% 50% 30% 30%;
	}
	.mouth {
		animation: ghost 5s ease-in-out infinite;
		left: 42%;
		right: 42%;
		bottom: 40%;
		border-radius: 50% 50% 40% 40%;
	}
	.tooth {
		display: none;
	}
}

.mod-hungry {
	.mouth {
		animation: hungry 1s ease-in-out infinite;
	}
}

.mod-hyper {
	.face {
		animation: hyper 5s ease-in-out infinite;
	}

	.mouth {
		top: 45%;
		left: 20%;
		right: 20%;
		bottom: 25%;
	}

	.tooth {
		bottom: 70%;
	}
}

.mod-jack-o-lantern {
	.creature,
	.tooth {
		background: shade(darkorange, 50%) !important;
	}
	.mouth,
	.eye,
	.moustache path {
		animation: jackolantern 4s ease-in-out infinite;
		background: shade(gold, 25%);
		fill: shade(gold, 25%);
	}
	.eye {
		clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
		border-radius: 0;
	}
	.moustache {
		top: 40%;
		left: 28%;
		width: 44%;
		height: 10%;
	}
	.mouth {
		clip-path: polygon(0 0, 100% 0, 100% 50%, 70% 100%, 30% 100%, 0 50%);
		border-radius: 0;
	}
}

.mod-moustache {
	.mouth {
		top: 54%;
		bottom: 32%;
	}
}

.mod-nervous {
	.mouth {
		border-radius: 50% 50% 20% 20%;
		left: 35%;
		right: 35%;
		bottom: 40%;
	}
}

.mod-rainbow {
	$colors: #be3caf, #fe4b83, #ff7747, #e3b62f, #b0ef5a, #53f666, #1edfa2,
		#23acd8, #4c6fdc;

	&:nth-of-type(odd) .creature {
		background-image: linear-gradient(60deg, $colors);
	}
	&:nth-of-type(even) .creature {
		background-image: linear-gradient(-120deg, $colors);
	}
}

.mod-sad {
	.mouth {
		border-radius: 50% 50% 20% 20%;
		left: 35%;
		right: 35%;
		bottom: 40%;
	}
}

.mod-sleepy {
	.face {
		transform: rotate(45deg);
	}
	.eyes {
		transform: scaleY(0.5);
	}
	.mouth {
		animation: ghost 5s ease-in-out infinite;
		left: 42%;
		right: 42%;
		bottom: 40%;
		border-radius: 50%;
	}
	.tooth {
		display: none;
	}

	&:hover {
		.eyes {
			transform: scale(1);
		}
	}
}

.mod-square {
	.mouth,
	.eye {
		border-radius: 5px;
	}
	.creature {
		border-radius: 10%;
		width: 95%;
		padding-bottom: 95%;
		margin-top: 5%;
	}
}

.mod-tall {
	.creature {
		width: 82%;
	}
}

.mod-tiny {
	.creature {
		width: 82%;
		padding-bottom: 82%;
		margin-top: 18%;
	}
}

.mod-transparent {
	.creature {
		background: url(img/mod-transparent.png);
	}
}

.mod-nervous {
	.mouth {
		animation: nervous $transition * 6 ease-in-out infinite;
	}
}

.mod-upside-down {
	.face {
		transform: rotate(180deg);
	}

	&:hover .face {
		transform: rotate(180deg) translateY(-5%) scale(0.95);
		transition: transform $transition * 0.25;
	}
}

.mod-wink {
	.eye:nth-child(2) {
		animation: none;
	}
}

// Advertisment ======================================================================
.ad-box {
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	padding: 1em;
	animation: load 0.5s 0.45s ease-out paused both;

	&.is-ready {
		animation-play-state: running;
	}

	a {
		border: 0;
	}
}

.carbon-img {
	display: block;
	margin: 0 auto;

	img {
		border-radius: $radius;
		width: 100%;
		height: auto;
	}
}

.carbon-text {
	display: block;
	font-size: 1.3em;
	color: $white;
	margin: 0.5em 0;
	transition: color $transition * 0.5;

	.ad-box:hover & {
		color: $gold;
		transition: color $transition * 0.25;
	}
}

.carbon-poweredby {
	display: block;
	color: mix($white, $purple_dark);
}

// Footer ============================================================================
footer {
	padding: 0 1em;
	text-align: center;

	// @media (min-width: $tablet) {
	// 	text-align: left;
	// }
}

// Share =============================================================================
.footer-split {
	@media (min-width: $tablet) {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.share-wrapper {
	@media (min-width: $tablet) {
		display: flex;
		justify-content: center;
		align-items: center;

		h2 {
			margin: 0 0.5em 0 0;
		}
	}
}

.share {
	display: inline-flex;
	margin: 0 0.5em;
	align-items: center;
	vertical-align: top;
}

// .dark-mode-wrapper {
// 	white-space: nowrap;

// 	input {
// 		display: none;
// 	}
// 	label {
// 		display: inline-block;
// 		opacity: 0.75;
// 		border-bottom: thin dashed rgba($gold, 0.5);
// 		margin-left: 0.25em;
// 		cursor: pointer;
// 		transition: opacity $transition;

// 		&:hover {
// 			border-style: solid;
// 		}
// 	}

// 	input:checked + label {
// 		font-weight: bold;
// 		border-style: solid;
// 		border-color: $gold;
// 		opacity: 1;
// 	}
// }
