@charset "UTF-8";
:root {
	/* width */
	--w_full : 100dvw;
	--h_full : 100dvh;
	--h_body : 1000dvh;
	--w_nav  : 200px;
	--w_flyer: 150px;
	/* margin */
	--m_min: 5px;
	--m_mid: 15px;
	--m_max: 30px;
	/* z-index */
	--z_foot : 11000;
	--z_nav  : 10000;
	--z_main : 9000;
	--z_three: 1000;
	--z_logo : 0;
	/* color */
	--c_black: #0E0506;
	--c_blue : #3b66e0;
	--c_white: #f1faf9;
	--c_green: #64e5b3;
	--c_navy : #5647a6;
	--a_white: rgba(241, 250, 249, 0.5);
	/* font-size */
	--fs_2: 24px;
	--fs_3: 18px;
	--fs_4: 16px;
	/* media query */
	@media(1200px <  width)        { --is_triple: true; }
	@media(800px < width <= 1200px){ --is_double: true; }
	@media(width <=  800px)        { --is_single: true; }
}
:root{
	--w_article: Calc(var(--w_full) - (var(--m_mid) * 2 + var(--w_nav)));
}
@keyframes nav_box {
    0% { opacity: 0; }
    5% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes canvases {
    0% { filter:blur(0);   opacity: 0; }
   35% { filter:blur(1.5px); opacity: 0.6; }
   60% { filter:blur(3.0px); opacity: 0.4; }
   85% { filter:blur(1.5px); opacity: 0.6; }
  100% { filter:blur(0.5px); opacity: 1; }
}
@keyframes logo {
    0% { filter:blur(0);    opacity: 1; }
    5% { filter:blur(7px); opacity: 0.4; }
  100% { filter:blur(7px); opacity: 0.4; }
}
@keyframes nav_btn {
    0% { filter:blur(10px); opacity: 0.8; }
  100% { filter:blur(0);    opacity: 1; }
}
button {
	cursor: pointer;
}
.important {
	color      : var(--c_blue);
	font-weight: 900;
}
html {
	body {
		background: var(--c_white);
		color     : var(--c_black);
		min-height: var(--h_body);
		overflow-y: auto;

		/* main navigation */
		> nav {
			animation         : nav_box ease;
			animation-timeline: scroll();
			bottom            : var(--m_max);
			left              : 0;
			position          : fixed;
			text-align        : right;
			width             : var(--w_nav);
			z-index           : var(--z_nav);

			> ul {
				> li {
					font-family: sans-serif;
					font-size  : var(--fs_2);
					font-weight: 900;
					transform  : rotate3d(2, 0.5, 1, -45deg);

					> a {
						color          : var(--c_black);
						filter         : blur(2px);
						opacity        : 0.5;
						text-decoration: none;
					}
					> a.selected {
						animation      : nav_btn 0.5s ease;
						filter         : blur(0);
						opacity        : 1;
						text-decoration: underline;
					}
				}
			}
		}

		/* header */
		> header {
			height: var(--h_full);
			width : var(--w_full);
		}

		/* main */
		> main {
			background-color: var(--a_white);
			border-left     : 1px solid var(--c_black);
			left            : Calc(var(--w_nav) - 12px);
			min-height      : var(--h_body);
			position        : absolute;
			top             : var(--h_full);
			width           : Calc(var(--w_full) - var(--w_nav));
			z-index         : var(--z_main);

			> section:last-child {
				margin-bottom: Calc(var(--h_full) * 2) !important;
			}
			> section {
				align-content: flex-start;
				border-left  : 3px solid var(--c_black);
				column-gap   : var(--m_mid);
				display      : flex;
				flex-wrap    : wrap;
				margin-bottom: Calc(var(--m_max) * 3);
				margin-left  : -2px;
				margin-top   : Calc(var(--m_max) * 2);
				min-height   : var(--h_full);
				padding-left : var(--m_mid);
				width        : 100%;

				> h2 {
					height: Calc(var(--m_max) * 4);
					width : 100%;
				}

				> div.error {
					font-style: italic;
					width     : 100%;
				}

				> dl {
					padding-right: var(--m_mid);

					> dt {
						border-bottom: 1px solid var(--c_black);
						font-weight  : 900;
					}
					> dd {
						line-height  : 200%;
						margin-bottom: var(--m_mid);

						> p {
							font-size    : 0.9em;
							margin-bottom: Calc(var(--m_min) * 2);
							padding-left : 2em;
							text-indent  : -2em;
						}
						> p.info::before  {
							align-items    : center;
							content        : "\002139";
							display        : inline-flex;
							filter         : grayscale(100%);
							height         : 1em;
							justify-content: center;
							text-indent    : 0;
							width          : 2em;
						}
						> p.music::before {
							align-items    : center;
							content        : "\01F3B5";
							display        : inline-flex;
							filter         : grayscale(100%);
							height         : 1em;
							justify-content: center;
							text-indent    : 0;
							width          : 2em;
						}
						> p.movie::before {
							align-items    : center;
							content        : "\01F3A5";
							display        : inline-flex;
							filter         : grayscale(100%);
							height         : 1em;
							justify-content: center;
							text-indent    : 0;
							width          : 2em;
						}
						> p.sound::before {
							align-items    : center;
							content        : "\01F4BF";
							display        : inline-flex;
							filter         : grayscale(100%);
							height         : 1em;
							justify-content: center;
							text-indent    : 0;
							width          : 2em;
						}
					}
				}

				> article {
					margin-bottom: Calc(var(--m_max) * 3);

					/* size fix for pc */
					@container style(--is_triple) { width: Calc((var(--w_article) - (var(--m_mid) * 2)) / 3); }

					/* size fix for tablet */
					@container style(--is_double) { width: Calc((var(--w_article) - var(--m_mid)) / 2); }

					/* size fix for smart phone */
					@container style(--is_single) { width: var(--w_article); }

					> button.flyer {
						background   : var(--c_white);
						border       : 2px solid var(--c_black);
						border-radius: var(--m_min);
						display      : block;
						margin       : Calc(var(--m_min) * 2) 0;
						max-width    : var(--w_flyer);
						padding      : Calc(var(--m_min) * 2);

						> img {
							border       : 0px solid var(--c_black);
							border-radius: var(--m_min);
							aspect-ratio : 1 / 1;
							object-fit   : cover;
						}
					}

					> h4 {
						margin-top: Calc(var(--m_min) * 2);
					}

					> ul.setlist {
						list-style : decimal-leading-zero;
						margin-left: var(--m_max);
					}
				}
			}

			/* live schedule section */
			> #live_schedule {}

			/* discography section */
			> #discography {}

			/* biography section */
			> #biography {}

			/* live schedule section */
			> #past_live {}
		}
		/* footer */
		> footer {
			background: var(--c_black);
			bottom    : 0;
			color     : var(--c_white);
			font-size : 9px;
			height    : var(--m_mid);
			left      : 0;
			position  : fixed;
			text-align: center;
			width     : var(--w_full);
			z-index   : var(--z_foot);
		}
		/* three.js and canvas container */
		> .canvases {
			animation         : canvases ease;
			animation-timeline:  scroll();
			height            : 100dvh;
			left              : 0;
			margin-left: Calc((var(--w_full) * -0.5) + (var(--w_nav) - 12px));
			overflow          : hidden;
			position          : fixed;
			top               : 0;
			width             : 100dvw;
			z-index           : var(--z_three);

			> .canvas_wave {
				height  : var(--h_full);
				left    : 0;
				position: absolute;
				top     : 0;
				width   : var(--w_full);
			}

			> .canvas_threejs_wrapper {
				height  : var(--h_full);
				left    : 0;
				position: absolute;
				top     : 0;
				width   : var(--w_full);
			}
		}
		/* logo container */
		> .logo {
			animation         : logo ease;
			animation-timeline:  scroll();
			min-height        : 100dvh;
			left              : 0;
			overflow          : hidden;
			position          : fixed;
			top               : 0;
			width             : 100dvw;
			z-index           : var(--z_logo);

			> img {
					aspect-ratio: 16 / 9;
					/* filter      : drop-shadow(120px -114px 102px black); */
					max-width   : 600px;

					/* size fix for pc */
					@container style(--is_triple) { width: auto; }

					/* size fix for tablet */
					@container style(--is_double) { width: 100%; }

					/* size fix for smart phone */
					@container style(--is_single) { width: 100%; }
			}
		}
	}
}