<main>
	<!--logo-->
	<a target='_blank' href='https://github.com/acronamy/tidal-node'>
	<div class='log'>
		<h1 aria-labal='tidal' class='log-Text_Tidal'>
			<span>t</span>
			<span>i</span>
			<span>d</span>
			<span class='log-Text_Split' data-letter='a'>a</span>
			<span class='log-Text_Split' data-letter='l'>l</span>
		</h1>
		<div class='log-Lua'></div>
		<div class='log-Water'></div>
		<!-- Svg - not inlinable -->
		<svg>
			<defs>
				<clipPath id="mask-main">
					<path d="M169,8.06l94.37,54.48a38.08,38.08,0,0,1,19,33v109a38.08,38.08,0,0,1-19,33L169,291.94a38.08,38.08,0,0,1-38.08,0L36.59,237.46a38.08,38.08,0,0,1-19-33v-109a38.08,38.08,0,0,1,19-33L131,8.06A38.08,38.08,0,0,1,169,8.06Z"></path>
					</defs>
				</clipPath>
		</svg>
	</div>
		<small>Like Node.js, WebAssembly and Lua? learn more on Github.</small>
	</a>
	<!--logo end-->
	
</main>

/*
* Demo stage
*/
:root {
	background-color: #413d48;
	small {
		color: #9de8a0;
	}
}
main {
	text-align: center;
	width: 100vw;
  min-height: 100vh;
	padding: 1.2em 4em;
	
	a > small {
		position: absolute;
		bottom: 15px;
		right: 10px;
	}
}
/*
* Demo stage end
*/

$grad-stop-0: #64c8d3;
$grad-stop-22: #37bfcb;
$grad-stop-50: #00b3c1;
$grad-stop-68: #00afb1;
$grad-stop-100: #00a99a;
$grad-dir: right;
$logo-size: 300px;
$logo-mask: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' %3E%3Cdefs%3E%3CclipPath id='mask-main'%3E%3Cpath d='M169,8.06l94.37,54.48a38.08,38.08,0,0,1,19,33v109a38.08,38.08,0,0,1-19,33L169,291.94a38.08,38.08,0,0,1-38.08,0L36.59,237.46a38.08,38.08,0,0,1-19-33v-109a38.08,38.08,0,0,1,19-33L131,8.06A38.08,38.08,0,0,1,169,8.06Z'%3E%3C/path%3E%3C/defs%3E%3C/clipPath%3E%3C/svg%3E#mask-main";
$logo-text-color: #fff;
$logo-text-font-size: $logo-size / 3.9;
$logo-text-gooey-strength: 1.5;
$logo-text-gooey-svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gooey'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='#{$logo-text-gooey-strength}' result='blur'%3E%3C/feGaussianBlur%3E%3CfeColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -8' result='gooey'%3E%3C/feColorMatrix%3E%3CfeComposite in='SourceGraphic' in2='gooey' operator='atop'%3E%3C/feComposite%3E%3C/filter%3E%3C/svg%3E#gooey";
$logo-moon-size: $logo-size / 6;
$logo-moon-color: #fff;
$logo-moon-x: 23%;
$logo-moon-y: 14%;
$logo-water-perlin-noise: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' height='600px' width='800px'%3E%3Cdefs%3E%3Cfilter id='water' x='-20%25' y='-20%25' width='160%25' height='160%25'%3E%3CfeTurbulence id='b1' type='turbulence' baseFrequency='0.01' numOctaves='1'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#water";

@keyframes water {
	0% {
		transform: rotate(0deg) translate(4em, -2em);
		opacity: 0.4;
	}
	100% {
		transform: rotate(5deg) scale(1.02);
		opacity: 0.6;
	}
}

.log {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	width: $logo-size;
	height: $logo-size;
	background: linear-gradient(to $grad-dir, 
		$grad-stop-0 0%,
		$grad-stop-22 22%,
		$grad-stop-50 50%,
		$grad-stop-68 68%,
		$grad-stop-100 100%);
	clip-path: url(#mask-main);
	position: relative;
	
	&-Text_Tidal {
		z-index: 1;
		display: flex;
		justify-content: center;
		color: $logo-text-color;
		margin: auto;
		height: 1em;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: $logo-text-font-size;
		text-transform: uppercase;
		position: absolute;
		filter: url($logo-text-gooey-svg);
	}
	&-Text_Split {
		&[data-letter='a'] {
			text-indent: -.03em;
		}
		&[data-letter='l'] {
			text-indent: .03em;
		}
	}
	&-Lua {
		width: $logo-moon-size;
		height: $logo-moon-size;
		background: $logo-moon-color;
		position: absolute;
		right: $logo-moon-x;
		top: $logo-moon-y;
		border-radius: 9e9em;
		z-index: 1;
		filter: url($logo-text-gooey-svg);
		&:after {
			content: '';
			display: block;
			width: $logo-moon-size / 1.5;
			height: $logo-moon-size / 1.5;
			background-color: #333;
			border-radius: inherit;
			position: absolute;
			top: 25%;
			left: 5%;
			opacity: .04;
		}
	}
	&-Water {
		filter: url($logo-water-perlin-noise) grayscale(1);
		animation: water 4s infinite ease-in-out;
		animation-direction: alternate;
		mix-blend-mode: luminosity;
		opacity: .6;
		height: 100%;
	}
}