/*
	landing.css -- index.html only.

	The Dimension panel system: the animated background, the full-height wrapper,
	the hero header, and #main article as a panel that fades in over a blurred
	backdrop. Articles are standalone pages and must NOT load this file -- if they
	did, `#main article { opacity: 0 }` would hide them and article.css would be
	back to fighting it with !important.

	Derived from Dimension by HTML5 UP (html5up.net | @ajlkn), CCA 3.0.
*/

/* Preload state (landing intro animation only) */

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		animation: none !important;
		transition: none !important;
	}

/* BG */

	#bg {
		transform: scale(1.0);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

		#bg:before, #bg:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#bg:before {
			background-image: linear-gradient(to top, var(--bg-overlay), var(--bg-overlay)), url("../../images/overlay.png");
			background-size: auto,
 256px 256px;
			background-position: center,
 center;
			background-repeat: no-repeat,
 repeat;
			z-index: 2;
		}

		#bg:after {
			transform: scale(1.125);
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image: none;
			background: radial-gradient(circle at 30% 20%, rgba(55, 85, 135, 0.45), rgba(14, 16, 20, 0.88));
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}

		body.is-article-visible #bg:after {
			transform: scale(1.0825);
			filter: blur(0.2rem);
		}

/* Wrapper (landing-specific: full height + page padding) */

	#wrapper {
		align-items: center;
		justify-content: space-between;
		min-height: 100vh;
		padding: 4rem 2rem;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

		@media screen and (max-width: 1680px) {

			#wrapper {
				padding: 3rem 2rem;
			}

		}

		@media screen and (max-width: 736px) {

			#wrapper {
				padding: 2rem 1rem;
			}

		}

		@media screen and (max-width: 480px) {

			#wrapper {
				padding: 1rem;
			}

		}

/* Header */

	#header {
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		max-width: 100%;
		text-align: center;
	}

		#header > * {
			transition: opacity 0.325s ease-in-out;
			position: relative;
			margin-top: 3.5rem;
		}

			#header > *:before {
				content: '';
				display: block;
				position: absolute;
				top: calc(-3.5rem - 1px);
				left: calc(50% - 1px);
				width: 1px;
				height: calc(3.5rem + 1px);
				background: var(--fg);
			}

		#header > :first-child {
			margin-top: 0;
		}

			#header > :first-child:before {
				display: none;
			}

		#header .content {
			border-style: solid;
			border-color: var(--fg);
			border-top-width: 1px;
			border-bottom-width: 1px;
			position: relative;
			overflow: hidden;
			width: 100%;
			max-width: 100%;
		}

			#header .content canvas#header-network-canvas {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				z-index: 1;
			}

			#header .content .inner {
				position: relative;
				z-index: 2;
				transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				transition-delay: 0.25s;
				padding: 3rem 2rem;
				max-height: 40rem;
				overflow: hidden;
			}

				#header .content .inner > :last-child {
					margin-bottom: 0;
				}

			#header .content p {
				text-transform: uppercase;
				letter-spacing: 0.2rem;
				font-size: 0.8rem;
				line-height: 2;
			}

		#header nav ul {
			display: flex;
			margin-bottom: 0;
			list-style: none;
			padding-left: 0;
			border: solid 1px var(--fg);
			border-radius: 4px;
		}

			#header nav ul li {
				padding-left: 0;
				border-left: solid 1px var(--fg);
			}

				#header nav ul li:first-child {
					border-left: 0;
				}

				#header nav ul li a {
					display: block;
					min-width: 7.5rem;
					height: 2.75rem;
					line-height: 2.75rem;
					padding: 0 1.25rem 0 1.45rem;
					text-transform: uppercase;
					letter-spacing: 0.2rem;
					font-size: 0.8rem;
					border-bottom: 0;
				}

					#header nav ul li a:hover {
						background-color: var(--border-bg);
					}

					#header nav ul li a:active {
						background-color: var(--border-bg-alt);
					}

		#header nav.use-middle:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: calc(50% - 1px);
			width: 1px;
			height: 100%;
			background: var(--fg);
		}

		#header nav.use-middle ul li.is-middle {
			border-left: 0;
		}

		body.is-article-visible #header {
			transform: scale(0.95);
			filter: blur(0.1rem);
			opacity: 0;
		}

		body.is-preload #header {
			filter: blur(0.125rem);
		}

			body.is-preload #header > * {
				opacity: 0;
			}

			body.is-preload #header .content .inner {
				max-height: 0;
				padding-top: 0;
				padding-bottom: 0;
				opacity: 0;
			}

		@media screen and (max-width: 736px) {

			#header > * {
				margin-top: 2rem;
			}

				#header > *:before {
					top: calc(-2rem - 1px);
					height: calc(2rem + 1px);
				}

			#header .content .inner {
				padding: 2.5rem 1rem;
			}

			#header .content p {
				line-height: 1.875;
			}

		}

		@media screen and (max-width: 480px) {

			#header {
				padding: 1.5rem 0;
			}

				#header .content .inner {
					padding: 2.5rem 0;
				}

				#header nav ul {
					flex-direction: column;
					min-width: 10rem;
					max-width: 100%;
				}

					#header nav ul li {
						border-left: 0;
						border-top: solid 1px var(--fg);
					}

						#header nav ul li:first-child {
							border-top: 0;
						}

						#header nav ul li a {
							height: 3rem;
							line-height: 3rem;
							min-width: 0;
							width: 100%;
						}

				#header nav.use-middle:after {
					display: none;
				}

		}

/* Main */

	#main {
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		max-width: 100%;
		z-index: 3;
	}

		#main article {
			transform: translateY(0.25rem);
			transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
			padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
			position: relative;
			width: 40rem;
			max-width: 100%;
			background-color: var(--bg-panel);
			border-radius: 4px;
			opacity: 0;
		}

			#main article.active {
				transform: translateY(0);
				opacity: 1;
			}

			#main article .close {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				text-indent: 4rem;
				overflow: hidden;
				white-space: nowrap;
				appearance: none;
				padding: 0;
				border: 0;
				background: transparent;
				font: inherit;
				color: inherit;
			}

				#main article .close:focus-visible {
					outline: none;
				}

				#main article .close:focus-visible:before {
					outline: var(--focus-ring);
					outline-offset: 2px;
				}

				#main article .close:before {
					transition: background-color 0.2s ease-in-out;
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
				}

				#main article .close:hover:before {
					background-color: var(--border-bg);
				}

				#main article .close:active:before {
					background-color: var(--border-bg-alt);
				}

		@media screen and (max-width: 736px) {

			#main article {
				padding: 3.5rem 2rem 0.5rem 2rem ;
			}

				#main article .close:before {
					top: 0.875rem;
					left: 0.875rem;
					width: 2.25rem;
					height: 2.25rem;
					background-size: 14px 14px;
				}

		}

		@media screen and (max-width: 480px) {

			#main article {
				padding: 3rem 1.5rem 0.5rem 1.5rem ;
			}

		}

/* Footer */

	#footer {
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		width: 100%;
		max-width: 100%;
		margin-top: 2rem;
		text-align: center;
	}

		body.is-article-visible #footer {
			transform: scale(0.95);
			filter: blur(0.1rem);
			opacity: 0;
		}

		body.is-preload #footer {
			opacity: 0;
		}