/* ########################################################################## */
/* Index */
/* ########################################################################## */

/* Header logo */
header#index_header{
	background: url("./images/header_logo.webp") no-repeat center calc(100% - 16px) / min(100%, 844px) auto;
	width: 100%; height: 192px;
	pointer-events: none;
}
@media (max-width: 844px) {
	header#index_header{
		/* Borrows from common header */
		background-color: #0c0c5a;
		background-image: url("./images/header_logo.webp"), url("./images/header_sky2.webp"), url("./images/header_sky3.webp"), linear-gradient(0, #ea73ff -8px, transparent 128px), url("./images/header_sky1.webp");
		background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
		background-position: center calc(100% - 16px), calc(50% + 120px) 90%, calc(50% - 110px) bottom, center bottom, center center;
		background-size: min(calc(100% - 16px), 607px) auto, auto 250px, auto 48px, auto, auto 500px;
	}
}

/* Index/meta layout */
section#index_frame{
	pointer-events: none;
	@media (max-width: 1320px) {
		background-position: -340px bottom, bottom, top;
	}
	@media (max-width: 1100px) {
		background-image: var(--horizon), var(--dummy);
		background-repeat: repeat-x, repeat;
		background-position: bottom, top;
	}
	@media (min-width: 1100px) {
	&::after{
		display: block; content: '';
		bottom: 0; margin-top: -950px;
		background: url("./images/index_side.webp"), var(--horizon), var(--dummy);
		background-repeat: no-repeat, repeat-x, repeat;
		background-position: -120px bottom, bottom, top;
		background-size: 700px auto, auto, auto;
		position: sticky; width: 100%; height: 950px; 
		z-index: -1;
		@media (max-width: 1380px) {
			background-position: -300px bottom, bottom, top;
		}	
	}
	}
	#content_space{
		margin-right: 120px; position: relative;
		/*contain: paint;*/
	}
}

/* Tab framework */
#index_tabs{
	/* Tabbed space */
	width: 100%; min-height: 540px; padding: 0 24px; margin-top: 8px;
	display: grid; grid-template-areas: 'tab_a tab_b tab_c' 'page page page'; 
	grid-template-rows: 40px 100%; gap: 4px;
	pointer-events: auto;
	/* Hide form-shape */
	input{ opacity: 0; cursor: pointer; }
	/* Tabs */
	label{
		display: flex; align-items: center; 
		margin-bottom: 4px;
		font-size: 150%; font-weight: bold;
		height: 40px;
		border-bottom: 2px dotted var(--secondary); color: var(--secondary);
		border-radius: var(--radi1) var(--radi1) 0 0;
		span{ margin: auto; }
	}
	#label1, #tab1{ grid-area: tab_a; }
	#label2, #tab2{ grid-area: tab_b; }
	#label3, #tab3{ grid-area: tab_c; }
	/* Active tab */
	input:checked + label{
		background: var(--secondary); color: var(--bg); text-shadow: none;
	}
	input:is(:hover, :focus-visible) + label{
		background: var(--white); color: var(--bg); text-shadow: none;
		border-bottom-color: var(--white);
	}
	/* Tab pages */
	.tab {
		padding-top: 8px; min-height: 440px;
		transition: all 0.2s ease-out;
		pointer-events: none; opacity: 0; 
		transform: scaleY(0%); transform-origin: bottom;
		grid-area: page;
		* { pointer-events: none; }
		/* Mobile height fix */
		@media (max-width: 1100px) { display: none; }
	}
	#tab1:checked ~ #page1,
	#tab2:checked ~ #page2,
	#tab3:checked ~ #page3{
		display: block; pointer-events: auto;
		opacity: 1; transform: scaleY(100%);
		a, a img { pointer-events: initial; }
	}
	/* De-row grid in mobile */
	@media (max-width: 844px) {
		grid-template-areas: 'tab_a' 'tab_b' 'tab_c' 'page';
		grid-template-rows: 40px 40px 40px 100%;
	}
}

/* Index locations */
#index_links{
	width: 848px; height: 480px; margin: auto; position: relative;
	/* Image baseline */
	&::before, &::after, a::before, a::after, a .asset{
		content: '';
		background-image: url("./images/locations.webp");
		background-repeat: no-repeat;
		background-size: 768px;
		position: absolute; display; block;
		pointer-events: none;
	}
	/* Background fragment A */
	&::before{
		background-position: -490px 14px;
		left: 552px;
		width: 276px; height: 198px;
		z-index: -4;
	}
	/* Background fragment B */
	&::after{
		background-position: 62px calc(12px - 196px);
		width: 848px; height: 282px;
		bottom: 0;
		z-index: -4;
	}
	/* Anchor */
	a{
		position: absolute; display; block;
		/*background-position: calc(var(--bgx) * -1) calc(var(--bgy) * -1);*/
		width: var(--cw); height: var(--ch);
		filter: drop-shadow(0px 0px var(--link1));
		/* Mobile text (except also used for sketch layer oops) */
		.mt{ font-size: 0; color: transparent; opacity: 0;
			position: absolute; transform: scale(var(--zm));
			filter: brightness(0.3);
			&::before{ filter: brightness(1.3); }
			&::after{ display: none; }
		}
		/* Desktop text */
		&::before{
			background-position: calc(var(--tx) * -1) calc(var(--ty) * -1);
			filter: brightness(1.0) drop-shadow(0px 4px var(--shadow));
			z-index: 10;
		}
		/* The links */
		&#il_art{
			--bgx: 0px; --bgy: 1050px;
			--cw: 552px; --ch: 378px;
			left: 154px; top: 48px; 
			z-index: 2;
			/* Desktop text */
			&::before{
				--tx: 470px; --ty: 1378px;
				width: 292px; height: 120px;
				left: 160px; top: 188px;
			}
			.mt{ --zm: 3; left: 214px; top: 136px; }
		}
		&#il_blog{
			--bgx: 0px; --bgy: 0px;
			--cw: 180px; --ch: 180px;
			left: 46px; top: 262px; 
			z-index: 3;
			&::before{
				--tx: 668px; --ty: 638px;
				width: 98px; height: 98px;
				left: -52px; bottom: -28px;
			}
			.mt{ left: 43px; top: 41px; --zm: 2;
				&::before{ mask-image: radial-gradient(circle, black 63%, transparent 66%); } }
		}
		&#il_games{
			--bgx: 192px; --bgy: 0px;
			--cw: 116px; --ch: 116px;
			left: 672px; top: 52px; 
			z-index: 3;
			&::before{
				--tx: 576px; --ty: 1086px;
				width: 118px; height: 128px;
				right: -34px; top: -38px;
			}
			.mt{ left: 8px; top: 36px; --zm: 2;
				&::before{ 
					mask-image: radial-gradient(circle, black 39%, transparent 40%); 
					mask-position: center -14px;
				}
			}
		}
		&#il_char{
			--bgx: 0px; --bgy: 512px;
			--cw: 248px; --ch: 252px;
			left: 0; top: 0; 
			z-index: 0;
			/* Desktop text */
			&::before{
				background-position: -448px -512px;
				width: 214px; height: 156px;
				left: 2px; top: 6px;
			}
			.mt{ left: 64px; top: 76px; --zm: 2; filter: brightness(1); }
			/* Extraneous beam */
			&::after{
				background-position: calc(var(--bgx) * -1) calc((var(--bgy) + 252px) * -1);
				pointer-events: none;
				width: 448px; height: 252px;
				top: 252px;
			}
		}
		&#il_else{
			--bgx: 448px; --bgy: 672px;
			--cw: 202px; --ch: 224px;
			bottom: 18px; right: 24px;
			z-index: 3;
			&::before{
				--tx: 448px; --ty: 896px;
				width: 216px; height: 152px;
				right: -16px; bottom: -2px;
			}
			.mt{ right: 44px; bottom: 32px; --zm: 2; filter: brightness(1); }
		}
		
		& > .asset{
			background-position: calc(var(--bgx) * -1) calc(var(--bgy) * -1);
			width: var(--cw); height: var(--ch);
		}
	}
	/* Active zone */
	&:hover{
		a:hover{
			z-index: 6 !important;
			/*border-image-width: 48px; border-image-outset: 10px; */
			.asset, &::after{
				filter: drop-shadow(0px 4px var(--link1)); transform: translateY(-8px);  
			}
			.mt{ opacity: 1.0; &::before{ transform: translateY(-3px); filter: unset; } }
			&::before{
				transform: translateY(-8px); filter: brightness(1.0) drop-shadow(0px 4px var(--shadow)) !important;
			}
		}
		a:not(:hover){
			.asset, &::after{
				filter: drop-shadow(0px 0px var(--link1)) grayscale(1) contrast(0.3) brightness(1.5); 
			}
			&::before{
				transform: translateY(4px); filter: brightness(0.5) drop-shadow(0px 0px var(--shadow)) !important;
			}
		}	
	}
}

/* Mobile view */
/* I am *not* going to even begin to approach
making that thing work on phones. */
@media (max-width: 920px) {
	#index_links{
		/* Base element */
		width: 100%; height: auto; 
		display: flex; flex-direction: column; gap: 4px;
		/* Hide extra elements */
		&::before, &::after, a::before, a::after, a .asset, a span::after{
			background-image: none; display: none; content: unset;
		}
		/* Establish basic buttons */
		a{
			position: relative; padding: 0 8px;
			top: unset !important; right: unset !important; bottom: unset !important; left: unset !important;
			width: unset; height: 92px; align-content: center; border-radius: var(--radi1);
			background-color: var(--link1); color: var(--white); font-size: 150%;
			.mt{ 
				display: flex; flex-direction: row; gap: 16px; align-items: center;
				position: unset; font-size: unset; color: unset; opacity: unset; 
				transform: unset; filter: unset !important;
				&::before{ filter: unset !important; mask-image: unset !important; }
				
			}
			&:hover{
				.mt::before{ transform: unset !important; filter: unset !important; } 
			}
		}
	}
}

/* Adjust about tab */
#index_about{
	padding: 0 24px;
	@media (max-width: 1100px) {
		padding: 0;
		#contacts a{
			flex: 1 0 calc(50% - 2px) !important;
		}
	}
}