%main
	%div
		%div
			%span 404 error
			%span page not found
		%svg{:viewBox => "0 0 200 600"}
			%polygon{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 200 591.044514 200 8"}
	%svg.crack{:viewBox => "0 0 200 600"}
		%polyline{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514"}
	%div
		%svg{:viewBox => "0 0 200 600"}
			%polygon{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 0 591.044514 0 8"}
		%div
			%span sorry about that!
			%span
				%a
					%b return home?

$grey: #343434;
$red: #F04F54;
$green: #43CB9D;

$p: 12px;

$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);

*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }

body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: $p;
	background: $grey;
	color: white;
	font-family: "Mona Sans", system-ui, sans-serif;
	font-feature-settings: "liga", "ss05" on, "ss07" on;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: none;
}

a {
	display: block;
	cursor: pointer;
	animation: pulseColor 1000ms linear 3100ms forwards;
	font-weight: 500;
	&:hover, &:focus {
		b {
			color: $red;
		}
	}
	&:active {
		b {
			color: $green;
		}
	}
}

svg {
	width: 50px;
	height: auto;
}

.crack {
	position: relative;
	z-index: 4;
	margin-left: -50px;
	polyline {
		fill: none;
		stroke: $red;
		stroke-width: 10px;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 1649.099;
		stroke-dashoffset: 1649.099;
		animation: drawStroke 1500ms ease-out 500ms forwards;
	}
}

main {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	> div {
		display: flex;
		align-items: center;
		align-content: center;
		position: relative;
		overflow: hidden;
		svg {
			position: relative;
			z-index: 1;
			polygon {
				fill: $grey;
			}
		}
		span {
			display: block;
			position: relative;
			z-index: 0;
			padding: 0 $p;
			line-height: 1.4;
		}
		&:first-child {
			text-align: right;
			z-index: 1;
			span {
				&:first-child {
					opacity: 0;
					transform: translateX(100%);
					animation: translateLeft 1000ms linear 1250ms forwards;
				}
				&:last-child {
					opacity: 0;
					transform: translateX(100%);
					animation: translateLeft 1000ms linear 1450ms forwards;
				}
			}
			svg {
				polygon {
					animation: removeFill 10ms ease-out 1600ms forwards;
				}
			}
		}
		&:last-child {
			z-index: 0;
			margin-left: -50px;
			span {
				&:first-child {
					opacity: 0;
					transform: translateX(-100%);
					animation: translateRight 1000ms linear 1650ms forwards;
				}
				&:last-child {
					opacity: 0;
					transform: translateX(-100%);
					animation: translateRight 1000ms linear 1850ms forwards;
				}
			}
		}
	}
}

@keyframes drawStroke {
	0% { stroke-dashoffset: 1649.099; }
	100% { stroke-dashoffset: 0; }
}

@keyframes removeFill {
	0% { fill: rgba($grey, 1); }
	100% { fill: rgba($grey, 0); }
}

@keyframes pulseColor {
	0% { color: white; }
	25% { color: $green; }
	50% { color: white; }
	75% { color: $green; }
	100% { color: white; }
}

/* https://goo.gl/v323yz */
@keyframes translateLeft {
	0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); opacity: 1; }
	7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); }
	11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); }
	15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); }
	18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); }
	22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); }
	30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); }
	50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); }
	70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}

/* https://goo.gl/p1Hnde */
@keyframes translateRight {
	0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); opacity: 1; }
	7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); }
	11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); }
	15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); }
	18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); }
	22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); }
	30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); }
	50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); }
	70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}

// ⟁ \\