/** Name: Tylko menu **/
/** Supports: article **/

html, body {
	min-width: 960px;
	min-height: 400px;
	font-family: helvetica, arial, sans-serif;
}

header, nav {
	height: 100%;
}

@property --bg-shadow {
	syntax: "<color>";
	inherits: true;
	initial-value: #0000;
}

@property --bg-highlight {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff0;
}

.menu ul {
	margin: 0;
	padding: 0;
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
	list-style: none;
	justify-content: space-between;

	li {
		width: 20%;
		font-size: 32px;
		flex: 1 1;
		flex-flow: row nowrap;
		height: 100%;
		position: relative;
		display: table;
		background-color: red;
	}

	li > a {
		text-decoration: none;
		color: black;
		font-weight: bold;
		display: block;
		position: absolute;
		background-color: #0002;
		background-image:
			linear-gradient(to right, var(--bg-shadow) 0%, #0000 5%),
			linear-gradient(to right, #fff0 0%, var(--bg-highlight) 100%);
		width: 100%;
		height: 100%;
		transition: all .3s 0s ease-in-out, text-indent 0.3s 0s ease-in-out, --bg-shadow .3s, --bg-highlight .3s;
		overflow: hidden;
		padding: 54px 15px;
		line-height: 32px;
		box-sizing: border-box;
		perspective: 300px;
		perspective-origin: 40px 140px;
	}

	li:nth-child(n+2) > a::before {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		content: '';
		top: 0;
		left: 0;
		background-image: linear-gradient(to right, #C80000 0%, #f00 100%);
		box-shadow: inset 10px 0 10px #0006;
		opacity: 0;
		transition: all 0.3s 0s ease-in-out;
	}

	li.active:nth-child(n+2) >> a::before,
	li:nth-child(n+2):hover >> a::before {
		opacity: 1;
	}

	li.active > a,
	li:hover > a {
		--bg-shadow: #000a;
		--bg-highlight: #fff4;

		width: 110%;
		padding: 54px 0;
		background-color: red;
		font-size: 300px;
		color: white;
		text-shadow: 8px 4px 0 #2006;
		box-shadow: 10px 0 20px #0009;
	}

	li.active a > span,
	li:hover a > span {
		padding-left: 1000px;
		text-indent: -1000px;
	}

	li .submenu {
		position: absolute;
		font-size: 20px;
		line-height: 18px;
		top: 200px;
		opacity: 0;
		width: 100%;
		text-indent: 0;
		letter-spacing: 2px;
		margin-left: calc(-130%);
		padding-left: 300px;
		transition: all 0s 0.2s ease-in-out;
	}

	li.active .submenu,
	li:hover .submenu {
		transition: all 0.3s 0.6s ease-in-out;
		margin-left: 20px;
		padding-left: 0;
		opacity: 1;
		width: calc(110% - 20px);
		background-color: #0001;
	}


	li .submenu > a {
		text-decoration: none;
		font-size: 20px;
		background-color: #0002;
		text-indent: 0;
		margin-right: 0;
		padding-left: 20px;
		padding-right: 10px;
		z-index: 10;
		color: white;
		display: block;
		margin-bottom: 20px;
		transition: all 0.3s 0s ease-in-out;
	}

	li .submenu > a:hover {
		background-color: #0004;
	}

	li a > span {
		transition: all 0.3s 0s ease-in-out;
		display: block;
		transform: rotateY(0deg);
	}

	li:hover:first-child a {
		width: 120%;
	}

	li.active:nth-child(n+2) a > span,
	li:hover:nth-child(n+2) a > span {
		transform: rotateY(-20deg);
	}

	li:nth-child(1) {
		background-color: #323232;
		z-index: 5;
	}

	li:nth-child(1) a {
		vertical-align: bottom;
		display: table-cell;
		background-image: url("/_gfx/logo.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50% 60px;
		color: white;
		line-height: 70%;
	}

	li:nth-child(1) a span {
		position: absolute;
		bottom: 30px;
	}

	li.active:nth-child(1) a,
	li:hover:nth-child(1) a {
		background-color: #666;
		color: black;
	}

	li:nth-child(2) {
		background-color: #4c4c4c;
		z-index: 4;
		background-image: url("/_gfx/tree.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 80% 100%;
		color: white;
		line-height: 70%;
	}

	li:nth-child(3) {
		background-color: #666;
		z-index: 3;
	}

	li:nth-child(4) {
		background-color: #7e7e7e;
		z-index: 2;
	}

	li:nth-child(5) {
		background-color: #9a9a9a;
		z-index: 1;
	}
}