body {
	font-family: "Merriweather", sans-serif;
	line-height: 1.4;
	color: #111;
}

a {
	text-decoration: none;
	color: #111;
	display: inline-block;
	margin-bottom: 5px;
	border: 3px dotted;
	border-width: 0 0 3px 0;
	text-transform: uppercase;
	transition: .4s ease-in-out;
	&:hover {
		border-style: solid;
		text-decoration: none !important;
	}
}

@mixin center-hor {
	margin: auto;
	left: 0;
	right: 0;
}

$toggl-red: #e24f54;
$purple: #ce98df;
$beige: #feeede;
$orange: #fcd1a5;

* {
	box-sizing: border-box;
	&:before,
	&:after {
		content: "";
		position: absolute;
	}
}

strong {
	font-weight: 700;
}

/*MAIN*/

.slideshow {
	display: grid;
	grid: 100% / 700px auto 700px auto repeat(6, auto);
	max-height: 100vh;
	white-space: nowrap;
	overflow-y: hidden;
	padding: 10px;
}

.slide {
	max-height: 100vh;
	position: relative;
	white-space: normal;
	&.active {
		.main-header, .whycodepen-content {
			opacity: 1;
			transform: translateY(0) translateX(0);
		}
	}
}

.main-header {
	position: relative;
	width: 100%;
	opacity: 0;
	transform: translateY(-50px) translateX(-50px);
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	h1 {
		transition: 0.2s ease;
		letter-spacing: 3px;
		font: 900 60px 'Concert One', cursive;
		text-transform: uppercase;
		small {
			font: 500 20px 'Merriweather', serif;
			color: #999;
			display: block;
			text-transform: none;
			letter-spacing: 0;
		}
	}
}

/* TOGGL MAN SLIDE */

.toggl-man {
	position: absolute;
	width: 272px;
	height: 128px;
	border-radius: 30% / 50%;
	background: $toggl-red;
	@include center-hor;
	bottom: 0;
	&:before {
		width: 90%;
		height: 88px;
		bottom: -8px;
		background: inherit;
		@include center-hor;
		border-radius: 50%;
	}
	&:after {
		width: 90%;
		height: 88px;
		top: -8px;
		background: inherit;
		@include center-hor;
		border-radius: 50%;
	}
}

.toggl-eye {
	position: absolute;
	width: 112px;
	height: 125px;
	top: -84px;
	background: inherit;
	@include center-hor;
	border-radius: 100% 100% 0 0;
	&__ball {
		position: absolute;
		width: 72px;
		height: 72px;
		background: rgb(255, 253, 252);
		border-radius: 50%;
		bottom: 35px;
		@include center-hor;
		z-index: 3;
		overflow: hidden;
	}
	&__ball-inner {
		position: absolute;
		background: rgb(121, 74, 148);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		z-index: 3;
		bottom: 17px;
		left: 17px;
	}
}

.toggl-mouth {
	width: 0%;
	height: 90px;
	background: none;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	margin: auto;
	top: 23px;
	border-radius: 70px 70px 100px 100px/ 40px 40px 50px 50px;
	&:before {
		background: $toggl-red;
		left: -50px;
		border-radius: 50%;
		box-shadow: inset 0 -2px 0px #444;
		width: 105px;
		height: 30px;
		top: -15px;
		z-index: 3;
	}
}

.toggl-hat {
	width: 120px;
	height: 10px;
	position: absolute;
	top: -110px;
	@include center-hor;
	border-radius: 10px;
	background: rgb(3, 205, 251);
	&:before {
		@include center-hor;
		width: 70%;
		height: 20px;
		bottom: 10px;
		background: rgb(254, 203, 71);
		z-index: 1;
	}
	&:after {
		@include center-hor;
		background: inherit;
		width: 70%;
		height: 65px;
		bottom: 0;
		border-radius: 100% 100% 0 0;
	}
}

.table {
	background: #fff;
	@include center-hor;
	width: 100%;
	height: calc(50vh - 66px);
	position: absolute;
	top: 60%;
	z-index: 10;
	border-top: 3px solid #111;
	span,
	p {
		opacity: 0;
	}
	p {
		top: 16px;
		position: relative;
		font-size: 20px;
		max-width: 400px;
		margin: auto;
		margin-bottom: 5px;
	}
	a {
		font-size: 16px;
		text-transform: none;
	}
}

.splitting .char {
	font: 900 80px 'Concert One', cursive;
	text-transform: uppercase;
	display: inline-block;
	margin: 20px 1px;
	top: 50px;
	opacity: 0;
	&:nth-child(7) {
		margin-right: 25px;
	}
	animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
	animation-delay: calc(100ms * var(--char-index));
}

.toggl-man.active {
	animation: body-move 4s ease forwards;
	.toggl-hat {
		animation: hat-move 5s ease forwards;
	}
	.toggl-eye__ball {
		animation: blink 3s ease 1s infinite;
	}
	.toggl-eye__ball-inner {
		animation: eye-move 3.5s ease forwards 3s;
	}
	.toggl-mouth {
		transition: all 0.1s ease 7s;
		width: 82%;
		background: linear-gradient(
			to right,
			#fff 28%,
			#eee 28%,
			#eee 29%,
			#fff 29%,
			#fff 50%,
			#eee 50%,
			#eee 51%,
			#fff 51%,
			#fff 72%,
			#eee 72%,
			#eee 73%,
			#fff 73%,
			#fff
		);
		&:before {
			background: transparent;
			box-shadow: none;
			transition: 0.01s ease 7s;
		}
	}
	+ .table {
		span {
			transition: opacity 0.5s ease 3.5s;
			opacity: 1;
		}
		p {
			transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 7s;
			opacity: 1;
			top: 0;
		}
	}
}

@keyframes eye-move {
	0%,
	20%,
	92% {
		bottom: 17px;
		left: 17px;
	}
	22%,
	28% {
		bottom: 0;
		left: 3px;
	}
	50% {
		bottom: -3px;
		left: 17px;
	}
	85%,
	90% {
		bottom: 2px;
		left: 30px;
	}
}

@keyframes hat-move {
	0%,
	50%,
	65% {
		margin-top: 0;
	}
	55% {
		margin-top: -30px;
	}
	61% {
		margin-top: 10px;
	}
}

@keyframes blink {
	0%,
	8% {
		height: 72px;
	}
	10%,
	12% {
		height: 0;
	}
	14%,
	100% {
		height: 72px;
	}
}

@keyframes body-move {
	0%,
	20%,
	30% {
		bottom: 5%;
	}
	30%,
	60% {
		bottom: 15%;
	}
	65%,
	100% {
		bottom: 39%;
	}
}

@keyframes slide-in {
	from {
		transform: translateY(1em) rotate(45deg) scale(0.5);
		opacity: 0;
	}
}

.slide-one {
	text-align: center;
}

/* PROCESS SLIDE */
.slide-three {
	padding: 20px 50px;
	margin-left: 10px;
	border-left: 3px solid #111;
	display: flex;
	flex-wrap: wrap;
	.main-header {
		flex: 1 1 100%;
	}
	.process__wrapper {
		display: grid;
		grid: 100% / 1fr 1000px;
		margin-top: 5em;
	}
	.process__items {
		display: flex;
		flex-direction: column-reverse;
		position: relative;
		writing-mode: vertical-rl;
		width: 80%;
		height: 70vh;
    align-self: flex-end;
    margin-right: 3em;
		.process__card {
			opacity: 0;
			transform: scale(0.5);
			transition: .4s ease-in-out;
		}
		@for $i from 0 to 6 {
			.process__card:nth-child(#{$i + 1}) {
				transition-delay: $i * 0.25s;
			}
		}
		.process__card:not(:first-child) {
			margin-left: 2.5em;
		}
		h3 {
			font: 28px 'Concert One';
			text-transform: uppercase;
			span {
				text-transform: none;
				display: inline-block;
				font: 18px 'Merriweather', serif;
				margin-top: 20px;
				color: #999;
			}
		}
	}
	.sketch-example {
		padding: 0 40px;
		display: flex;
		border-left: 1px solid #111;
		> div {
			padding: 0 .5em;
			flex: 1;
			transition: .4s ease;
			opacity: 0;
			&:nth-child(1) {
				transform: translateY(-100px);
			}
			&:nth-child(2) {
				transform: translateY(100px);
			}
		}
		img {
			width: 100%;
		}
		figcaption {
			display: block;
			text-align: center;
			font: 22px Gochi Hand;
			margin-top: 15px;
		}
		&.active div {
			opacity: 1;
			transform: translateY(0);
		}
	}
	&.active {
		.process__card {
			opacity: 1;
			transform: scale(1);
		}
	}
}




/* WHY I DO IT */

.slide-two {
	border-left: 3px solid #111;
	padding: 20px 50px;
	display: flex;
	flex-wrap: wrap;
	&.active {
		.whycodepen-content {
			opacity: 1;
			transform: translateY(0) translateX(0);
		}
	}
	.whycodepen-content {
		align-self: flex-end;
		flex: 1 1 100%;
		position: relative;
		font-size: 18px;
		line-height: 1.6;
		transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 0;
		transform: translateY(50px) translateX(50px);
	}
	.reason {
		margin-bottom: 1.5em;
	}
	h4 {
		font: 28px 'Concert One', cursive;
		text-transform: uppercase;
		margin-bottom: 6px;
	}
	a {
		font-family: 'Concert One', cursive;
		margin: 0 5px;
	}
}



/*data content*/
.data-wrapper {
	display: flex;
	margin: auto;
	max-width: 1100px;
}

.slide-five {
	border-left: 3px solid #111;
	padding: 20px 0 20px 50px;
	display: grid;
	grid: 100px auto / 500px 400px;
}

.data-content {
	width: 100%;
	margin-top: 2em;
	height: 400px;
	position: relative;
	grid-column: 1;
}

.data-bubble {
	width: var(--width);
	height: var(--width);
	background: var(--color);
	border-radius: 50%;
	position: absolute;
	opacity: 0;
	transition: 0.3s ease;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	&__info {
		width: 120px;
		text-shadow: 2px solid;
		line-height: 1.2;
		position: absolute;
		padding: 8px 12px;
		border-radius: 5px;
		font-size: 12px;
		left: 50%;
		margin-left: -60px;
		bottom: 30%;
		text-align: center;
		opacity: 0;
		transition: 0.4s ease;
		background: #fff;
		color: #000;
	}
	&:hover {
		opacity: 1;
		z-index: 100;
		.data-bubble__info {
			opacity: 1;
			bottom: 20%;
		}
	}
	&:nth-child(2) {
		transform: translateY(115px) translateX(120px);
	}
	&:nth-child(3) {
		transform: translateY(-50px) translateX(-160px);
	}
	&:nth-of-type(4) {
		transform: translateY(-120px) translateX(-80px);
	}
	&:nth-child(5) {
		transform: translateY(145px) translateX(20px);
	}
	&:nth-child(6) {
		transform: translateY(17px) translateX(140px);
	}
	&:nth-child(7) {
		transform: translateY(45px) translateX(-130px);
	}
	&:nth-child(8) {
		transform: translateY(-50px) translateX(125px);
	}
	&:nth-child(9) {
		transform: translateY(100px) translateX(-90px);
	}
	&:nth-child(10) {
		transform: translateY(-135px) translateX(-5px);
	}
	&:nth-child(11) {
		transform: translateY(-120px) translateX(55px);
	}
	&:nth-child(12) {
		transform: translateY(110px) translateX(-148px);
	}
	&:nth-child(13) {
		transform: translateY(-105px) translateX(110px);
	}
	&:nth-child(14) {
		transform: translateY(120px) translateX(-40px);
	}
	&:nth-child(15) {
		transform: translateY(155px) translateX(-75px);
	}
	&:nth-child(16) {
		transform: translateY(-135px) translateX(-145px);
	}
	&:nth-child(17) {
		transform: translateY(-30px) translateX(165px);
	}
	&:nth-child(18) {
		transform: translateY(-80px) translateX(85px);
	}
	&:nth-child(19) {
		transform: translateY(160px) translateX(-35px);
	}
	&:nth-child(20) {
		transform: translateY(70px) translateX(-205px);
	}
	&:nth-child(21) {
		transform: translateY(-90px) translateX(175px);
	}
	&:nth-child(22) {
		transform: translateY(170px) translateX(-132px);
	}
}

.data-content.active {
	.data-bubble {
		opacity: 0.6;
		transition-delay: 0.3s;
		&:nth-child(3n) {
			transition-delay: 0.6s;
		}
		&:nth-child(5n) {
			transition-delay: 0.7s;
		}
		&:nth-child(7n) {
			transition-delay: 1.1s;
		}
		&:nth-child(2n + 3) {
			transition-delay: 0.8s;
		}
	}
}

.data-numbers {
	grid-row: 1 / span 2;
	grid-column: 2;
	padding: 0 50px;
	border-left: 1px solid #111;
	text-align: center;
	align-self: center;
	.statistic {
		margin: 2em auto;
		transition: .3s ease;
		opacity: 0;
		transform: translateY(50px);
		&__number {
			cursor: pointer;
			margin-bottom: 5px;
		}
	}
	&.active .statistic {
		opacity: 1;
		transform: translateY(0);
	}
}

.js-run-number {
	font: 50px "ZCOOL QingKe HuangYou";
	&.clear-animation {
		pointer-events: none;
	}
}

.slide-four {
	border-left: 3px solid #111;
	padding: 20px 30px 20px 50px;
	display: grid;
	grid-template-rows: 100px 1fr;
	.random-picker {
		margin: 2em auto 0;
		display: grid;
		height: 90%;
		grid-template-columns: repeat(2, 250px) 100px;
		grid-auto-rows: 1fr 1fr;
		button {
			cursor: pointer;
			background: linear-gradient(to top right, #444, #111);
			border: none;
			font: 700 28px Montserrat;
			color: #fff;
			text-transform: uppercase;
			opacity: 0;
			transition: .3s ease;
			&:nth-child(1) {
				transform: translateY(-50px) translateX(-50px);
			}
			&:nth-child(2) {
				transform: translateY(-50px) translateX(50px);
			}
			&:nth-child(3) {
				transform: translateY(50px) translateX(-50px);
			}
			&:nth-child(4) {
				transform: translateY(50px) translateX(50px);
			}
		}
		.js-magic-lamp {
			grid-column: 3;
			grid-row: 1 / span 2;
			padding-left: 20px;
			margin-left: 20px;
			writing-mode: vertical-rl;
			border-left: 1px solid #111;
			text-align: center;
			font: 600 28px 'Concert One';
			text-transform: uppercase;
			a {
				font-size: 20px;
				margin-right: -2px;
				display: block;
				color: #999;
				margin-top: 10px;
				font-weight: 400;
				font-size: 20px;
				border-width: 0;
			}
		}
	}
	&.active button {
		opacity: 1;
		transform: translateX(0) translateY(0) !important;
	}
}

.slide-six {
	padding: 20px 50px;
	border-left: 3px solid #333;
	text-align: center;
	.main-header {
		opacity: 1;
		transform: translateY(0);
	}
	.picture__border {
		width: 100%;
		max-width: 270px;
		height: 400px;
		background: #f9f9f9;
		padding: 20px 10px 50px;
		transform: rotate(5deg);
		position: relative;
		margin: 4em auto;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		&:after {
			content: "";
			width: 55%;
			height: 35px;
			top: -15px;
			z-index: 5;
			left: 25%;
			transform: rotate(-2deg);
			position: absolute;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			background: rgba(220, 220, 220, 0.4);
		}
		img {
			width: 100%;
			height: 92%;
			object-fit: cover;
		}
		figcaption {
			margin: 10px 0;
			text-align: center;
			display: block;
			padding: 0 15px;
			font: 17px/1 "Gochi Hand", cursive;
		}
	}
}


::-webkit-scrollbar {
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .8);
}


.slide-link-one {
	margin-left: 10px;
	border-left: 3px solid #111;
	padding: 0 30px;
	display: flex;
  flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	p.links {
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
	a {
		border: 4px dotted #fff;
		border-width: 4px 0;
		font: 20px 'Concert One', cursive;
		letter-spacing: 0;
		padding: 10px 0;
		opacity: 0;
		position: relative;
		transform: scale(.5);
		&:hover {
			border-color: #111;
		}
	}
	&.active {
		a {
			opacity: 1;
			transform: scale(1);
		}
	}
}

code {
	display: inline-block;
	background: #f4f4f4;
	padding: 4px 8px;
	font-size: 80%;
	border-radius: 8px;
	margin: 1px 3px;
	vertical-align: middle;
}