@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Geologica:wght@100..900&family=Oswald:wght@200..700");

@layers system interface content colorscheme animation demonstration;

@layer system {
	:not(details.page)>details.page {
		position: relative;
		counter-reset: page 0;

		&[open]>summary {
			display: none;
		}
	}

	details.page {
		--pages-page-width: max(20vw, 300px);
		--pages-page-height: max(40vh, 400px);
		--pages-page-padding: 1rem;
		width: var(--pages-page-width, max(20vw, 380px));
		height: var(--pages-page-height, max(40vh, 370px));
		box-sizing: border-box;
		padding: var(--pages-page-padding, 1rem);
		border-radius: 0.75rem;
		overflow: hidden;

		>details.page {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		&[open] {
			z-index: 10;
			counter-increment: page 1;

			>summary {
				&:before {
					content: var(--localization-button-previous, "Previous");
				}

				left: var(--pages-page-padding, 1rem);
				right: unset;
			}

			>details.page:not([open])>summary {
				&:before {
					content: var(--localization-button-next, "Next");
				}
			}
		}

		> :not(details, summary) {
			z-index: 1;
			position: relative;
		}

		>summary {
			z-index: 5;
			right: var(--pages-page-padding, 1rem);
			bottom: var(--pages-page-padding, 1rem);
			position: absolute;
			max-width: calc(50% - var(--pages-page-padding, 1rem));
			min-width: 30px;
			width: max-content;
			box-sizing: border-box;
			padding: 0.4rem 1rem;
			display: flex;
			gap: 0.2rem;
			justify-content: center;
			cursor: pointer;
			border-radius: 0.75rem;
		}
	}
}

@layer content {
	@layer page {
		details.page>section.content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: var(--pages-page-padding, 1rem);
			display: flex;
			flex-direction: column;
			gap: 1rem;

			>span:has(> :is(span, a).separated) {
				justify-content: space-between;
			}

			> :is(h2, h3) {
				margin: unset;
				margin-top: 0.2rem;
				text-align: center;
				font-weight: 200;
			}
		}
	}

	@layer destiny {
		details.page#destiny>section.content {
			>img {
				&#masha {
					position: absolute;
					top: -10%;
					height: 150%;
					align-self: center;
				}

				&.masha.red {
					z-index: 100;
					position: absolute;
					top: -10%;
					height: 150%;
					align-self: center;
					mix-blend-mode: overlay;
				}
			}

			>div#css {
				z-index: 50;
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				display: flex;
				width: 100%;
				height: 100%;
				mix-blend-mode: multiply;
				/* font-size: 0.8rem; */

				>div.color {
					width: 100%;
					height: 100%;
					display: block;

					>code.flow {
						position: absolute;
						left: -10%;
						width: 120%;
						/* height: 130rem; */
						height: 3000px;
						/* line-height: 1rem; */
						/* scale: 1.5; */
						font-family: "Cascadia Code", sans-serif;
						/* font-size: 0.7rem; */
						word-break: break-all;
						overflow: hidden;
					}
				}
			}
		}
	}

	@layer story {
		details.page#story>section.content {
			>div#marie_itself_wrap {
				z-index: 100;
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;

				div {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				>span#tolstoy_background {
					position: absolute;
					top: -10%;
					left: -10%;
					width: 120%;
					height: 120%;
					font-size: 1.7rem;
					line-height: 1.8rem;
					font-family: "Oswald";
					font-weight: 100;
					rotate: -5deg;
					word-wrap: break-word;
					word-break: break-all;
					color: var(--hint-text-color, #696969);
				}

				>img#marie_itself {
					z-index: 100;
					position: absolute;
					right: -10%;
					bottom: -15%;
				}

				>div#marie_forearm_wrap {
					z-index: 150;
					perspective: 1000px;

					>div#tolstoy {
						z-index: 180;
						position: absolute;
						top: 85%;
						right: 0%;
						transform-origin: top right;
						transform: rotate3d(0, 1, 0, 285deg);

						>span {
							position: absolute;
							right: 0%;
							white-space: nowrap;
							background-color: red;
							padding: 0rem 100rem;
							font-weight: 800;
							text-transform: uppercase;
							font-size: 2rem;
							transform: scale(3.5);
						}
					}

					>img#marie_forearm {
						position: absolute;
						right: 54.5%;
						bottom: -6.2%;
					}

					>div#marie_hand_wrap {
						z-index: 200;
						transform-origin: 5% 85%;

						>img#marie_hand {
							position: absolute;
							right: -9.5%;
							bottom: 11%;
						}
					}
				}
			}
		}
	}

	@layer code {
		body:has(details.page#amogus > section.content > input#shoot:checked) details.page#code>section.content>object {
			display: none;
		}

		details.page#code>section.content {
			>object {
				position: absolute;
				top: -50%;
				left: -50%;
				width: 202%;
				height: 200%;
				scale: 0.5;
				filter: contrast(5) brightness(0.5);
			}

		}
	}

	@layer author {
		details.page#author>section.content {
			--pages-author-logo-diameter: 200px;
			padding: var(--pages-page-padding, 1rem) calc(var(--pages-page-padding, 1rem) + 0.5rem);
			gap: unset;

			>h2 {
				font-weight: 500;
				font-family: "Cascadia Code";

				+span#name {
					margin-bottom: 1.2rem;
					align-self: center;
					font-weight: 400;
					font-family: "Cascadia Code";
				}
			}

			>span {
				margin-bottom: 0.6rem;
				display: inline-flex;
				font-family: "Cascadia Code";
			}

			>div.x {
				--pages-author-logo-diameter: 100px;
				z-index: -10;
				width: 100%;
				height: calc(100% - (var(--pages-page-padding, 1rem) * 2 + 3rem));

				>div.y {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					>img#logo {
						z-index: 20;
						position: absolute;
						width: var(--pages-author-logo-diameter, 100px);
						align-self: center;
						object-fit: cover;
					}
				}
			}

			>div.room {
				z-index: -100;
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				overflow: hidden;
				filter: contrast(12) var(--filter);
				transition: opacity 0s;

				&:before {
					position: absolute;
					right: 25%;
					top: 35%;
					content: "";
					width: 8%;
					height: 5%;
					border-radius: 100%;
				}

				>div.illuminate {
					&:after {
						position: absolute;
						top: -50%;
						left: -50%;
						content: "";
						width: 200%;
						height: 200%;
						will-change: transform;
						background-image: url(https://git.svoboda.works/mirzaev/css-crime-pages/raw/branch/stable/images/noise.png);
						mix-blend-mode: screen;
						backdrop-filter: contrast(1.9);
					}

					position: absolute;
					bottom: -10%;
					left: -10%;
					width: 140%;
					height: 140%;
					rotate: -5deg;
					overflow: hidden;
					background-color: hsl(from white 0 100% 70%);
					transform-origin: bottom left;
					clip-path: polygon(0 90%,
						75% 0%,
						100% 0%,
						100% 45%,
						10% 100%,
						0 100%);
					mix-blend-mode: luminosity;
				}

				>img#lezhit {
					z-index: -10;
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
					background-color: red;
					filter: grayscale(0.7);
				}
			}
		}

		details.page#author[open] {
			>summary {
				transition: background-color 0.3s ease-in 0.2s;

				&:not(:hover) {
					background-color: #ff0000aa !important;
					transition: background-color 0s ease-in 0s;
				}
			}
		}
	}

	@layer license {
		details.page#license>section.content>p {
			margin: unset;
			font-family: "Cascadia Code", sans-serif;
			font-size: smaller;
		}
	}

	@layer amogus {
		details.page#amogus {
			&:has(> section.content > input:is(#shoot, #dead):checked) {
				display: none;
			}

			>summary {
				right: -30%;
				opacity: 0;
				pointer-events: none;
			}

			&[open] {
				>summary {
					display: none;
				}

				>section.content:after {
					z-index: 700;
					position: absolute;
					top: -50%;
					left: -50%;
					content: "";
					width: 200%;
					height: 200%;
					pointer-events: none;
					will-change: transform;
					scale: 3;
					background-image: url(https://git.svoboda.works/mirzaev/css-crime-pages/raw/branch/stable/images/noise.png);
					filter: contrast(300);
				}
			}

			>section.content {
				justify-content: center;
				align-items: center;

				>label:has(+ input#shoot) {
					z-index: 500;
					width: 0;
					height: 0;
					padding: 5%;
					display: flex;
					justify-content: center;
					align-items: center;

					>img#enemy {
						z-index: 100;
						height: 100%;
					}
				}

				>label:has(+ input#dead) {
					z-index: -400;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					pointer-events: none;
				}

				>img#screamer {
					z-index: 600;
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
					cursor: none;
					pointer-events: none;
				}
			}

			>section.content,
			>section.content * {
				cursor: url("data:img/png;base64,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") 50 50,
					crosshair;
			}
		}

		details.page {
			&:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):before {
				content: "";
				z-index: 9999;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				pointer-events: none;
			}

			&:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):after {
				z-index: 5;
				right: var(--pages-page-padding, 1rem);
				bottom: var(--pages-page-padding, 1rem);
				position: absolute;
				max-width: calc(50% - var(--pages-page-padding, 1rem));
				min-width: 30px;
				width: max-content;
				box-sizing: border-box;
				padding: 0.4rem 1rem;
				display: flex;
				gap: 0.2rem;
				cursor: not-allowed;
				border-radius: 0.75rem;
			}

			&:has(> details.page#amogus > section.content > input#shoot:checked):after {
				content: var(--localization-button-alive, "ALIVE");
			}

			&:has(> details.page#amogus > section.content > input#dead:checked) {
				&:after {
					content: var(--localization-button-dead, "DEAD");
				}
			}
		}
	}
}

@layer colorscheme {
	details.page {
		outline: var(--pages-page-outline,
				2px solid var(--invert-background-color, #fff));
		background-color: var(--pages-page-background-color,
				var(--section-background-color, #000));

		&[open] {
			>summary {
				color: var(--pages-button-previous-text-color,
						var(--pages-button-previous-text-color,
							var(--button-text-color, #000)));
				/*     outline: 2px solid
      var(
        --pages-button-previous-background-color,
        var(
          --pages-button-previous-background-color,
          var(--button-background-color, #fff)
        )
      ); */
				background-color: var(--pages-button-previous-background-color,
						var(--pages-button-previous-background-color,
							var(--button-background-color, #fff)));
			}

			>details.page:not([open])>summary {
				color: var(--pages-button-next-text-color,
						var(--pages-button-next-text-color, var(--button-text-color, #000)));
				/*     outline: 2px solid
      var(
        --pages-button-next-background-color,
        var(
          --pages-button-next-background-color,
          var(--button-background-color, #fff)
        )
      ); */
				background-color: var(--pages-button-next-background-color,
						var(--pages-button-next-background-color,
							var(--button-background-color, #fff)));
			}
		}

		>summary {
			/*     outline-offset: -2px; */

			&:hover {
				/*     outline-offset: 2px;
    transition: outline-offset 0.1s ease-in; */
			}

			&:active {
				filter: brightness(0.8);
				/*     outline-offset: -2px;
    transition: outline-offset 0.05s ease-out; */
			}
		}
	}

	@layer author {

		body:has(details.page#amogus > section.content > input#dead:checked) {

			details.page#author>section.content {
				filter: invert(1);
				background-color: var(--background-color, #000);

				>div.room {
					--filter: invert(1);
				}
			}
		}

		details.page#author>section.content {
			>div.x>div.y>div.effects {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				background-color: var(--background-color, #000);
				filter: contrast(50);

				>div.border {
					z-index: 10;
					position: absolute;
					width: calc(var(--pages-author-logo-diameter, 100px) + 1rem);
					height: var(--pages-author-logo-diameter, 100px);
					border-radius: 100%;

					filter: blur(30px);
					/*     mix-blend-mode: multiply; */

					&:nth-of-type(1) {
						background-color: white;
					}

					&:nth-of-type(2) {
						width: var(--pages-author-logo-diameter, 100px);
						height: calc(var(--pages-author-logo-diameter, 100px) + 1rem);
						background-color: white;
					}

					&:nth-of-type(3) {
						background-color: white;
					}
				}
			}

			>div.room {
				&:before {
					background-color: #fff;
				}
			}
		}
	}

	@layer amogus {
		details.page#amogus>section.content {
			background-color: red;
		}

		details.page[open]:has(> details.page#amogus > section.content > input:is(#shoot, #dead):checked):after {
			outline: 2px solid var(--pages-button-background-color, #fff);
			outline-offset: -2px;
			color: var(--invert-pages-button-text-color, #fff);
			background-color: var(--invert-pages-button-background-color, #000);
		}

		details.page:has(> details.page#amogus > section.content > input#shoot:checked) {
			&:before {
				background-color: #fff !important;
			}

			&:after {
				outline: 2px solid var(--green, #42ff22) !important;
				color: var(--green, #42ff22) !important;
			}
		}

		details.page[open]:has(> details.page#amogus > section.content > input#dead:checked) {
			&:after {
				outline: 2px solid var(--red, #ff2222) !important;
				color: var(--red, #ff2222) !important;
			}
		}
	}
}

@layer animation {
	@layer destiny {
		@keyframes destiny-masha {
			0% {
				transform: translateX(-10px) translateY(10px);
			}

			100% {
				transform: translateX(-20px) translateY(-20px);
			}
		}

		@keyframes destiny-rotate {
			0% {
				rotate: -10deg;
			}

			100% {
				rotate: 10deg;
			}
		}

		@keyframes destiny-color {

			0%,
			30% {
				font-size: 0.7rem;
				font-weight: 300;
				line-height: 0.7rem;
				opacity: 1;
				color: rgb(0, 0, 0);
			}

			100% {
				font-size: 1.2rem;
				font-weight: 900;
				line-height: 1.5rem;
				opacity: 1;
				color: rgb(255, 0, 0);
				filter: blur(0px);
			}
		}

		@keyframes destiny-flow {
			0% {
				transform: translateY(0px);
			}

			100% {
				transform: translateY(-1000px);
			}
		}

		details.page#destiny>section.content {
			>img#masha {
				animation-name: destiny-masha;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
			}

			>img.masha.red {
				animation-name: destiny-masha;
				animation-duration: 2s;
				animation-delay: 0.6s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
			}

			>div#css {
				animation-name: destiny-rotate;
				animation-duration: 3s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);

				>div.color {
					animation-name: destiny-color;
					animation-duration: 4s;
					animation-iteration-count: infinite;
					animation-direction: alternate;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(1, 0, 0.5, 1);

					>code.flow {
						animation-name: destiny-flow;
						animation-duration: 0.6s;
						animation-iteration-count: infinite;
						animation-fill-mode: forwards;
						animation-timing-function: linear;
					}
				}
			}
		}
	}

	@layer story {
		@keyframes marie_itself_breathing {
			0% {
				transform-origin: 100% 80%;
				transform: rotate(0deg) translateY(0px);
			}

			100% {
				transform-origin: 95% 90%;
				transform: rotate(-1deg) translateY(3px);
			}
		}

		@keyframes marie_forearm_rotate {
			0% {
				transform: rotate(0);
				transform-origin: 40% 120%;
			}

			100% {
				transform: rotate(2deg);
				transform-origin: 40% 90%;
			}
		}

		@keyframes storyflex {
			0% {
				background-color: #f00;
			}

			60%,
			100% {
				background-color: #000;
			}
		}

		@keyframes tolstoy_sverkaet {

			0%,
			20% {
				rotate: -5deg;
				transform-origin: 60% 60%;
				color: hsl(from var(--hint-text-color, #696969) h 30% 20%);
			}

			80%,
			100% {
				rotate: -8deg;
				transform-origin: 60% 20%;
				color: hsl(from var(--hint-text-color, #696969) h s 30%);
			}
		}

		@keyframes tolstoy_huyarit {
			0% {
				top: 84%;
			}

			100% {
				top: 87%;
			}
		}

		@keyframes tolstoy_ebashit {
			0% {
				right: -9840%;
			}

			100% {
				right: 6150%;
			}
		}

		@keyframes marie_hand_rotate {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(1deg) scaleY(1.05);
			}
		}

		details.page#story {
			&[open] {
				animation-name: storyflex;
				animation-duration: 0.4s;
				animation-iteration-count: infinite;
				animation-timing-function: cubic-bezier(0.6, 0, 0.2, 0.2);

				>section.content>div#marie_itself_wrap {
					>span#tolstoy_background {
						animation-name: tolstoy_sverkaet;
						animation-duration: 8s;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-fill-mode: forwards;
						animation-timing-function: ease-in-out;
					}

					>div#marie_forearm_wrap {
						>div#tolstoy {
							animation-name: tolstoy_huyarit;
							animation-duration: 3s;
							animation-iteration-count: infinite;
							animation-direction: alternate;
							animation-fill-mode: forwards;
							animation-timing-function: cubic-bezier(0.5, 0, 0.35, 1);

							>span {
								animation-name: tolstoy_ebashit;
								animation-duration: 8s;
								animation-iteration-count: infinite;
								animation-timing-function: linear;
							}
						}

						>div#marie_hand_wrap {
							animation-name: marie_hand_rotate;
							animation-duration: 3s;
							animation-iteration-count: infinite;
							animation-direction: alternate;
							animation-fill-mode: forwards;
							animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
						}
					}
				}
			}

			&:not([open])>section.content {
				* {
					animation-play-state: paused;
				}
			}

			>section.content {
				>div#marie_itself_wrap {
					animation-name: marie_itself_breathing;
					animation-duration: 2.2s;
					animation-iteration-count: infinite;
					animation-direction: alternate;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(0.5, 0, 0.55, 1);

					>div#marie_forearm_wrap {
						animation-name: marie_forearm_rotate;
						animation-duration: 3s;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-fill-mode: forwards;
						animation-timing-function: cubic-bezier(0.5, 0, 0.35, 1);
					}
				}
			}
		}
	}

	@layer author {
		@keyframes arsen-in-town {
			0% {
				opacity: 0;
				left: -20vw;
			}

			40% {
				opacity: 0.6;
			}

			100% {
				opacity: 0;
				left: -5vw;
			}
		}

		@keyframes room-illuminate {
			0% {
				opacity: 0;
				clip-path: polygon(0 100%, 100% 0%, 100% 0%, 100% 0%, 0% 100%, 0 100%);
			}

			40% {
				opacity: 1;
			}

			100% {
				opacity: 1;
				clip-path: polygon(0 70%, 0% 0%, 100% 0%, 100% 100%, 40% 100%, 0 100%);
			}
		}

		@keyframes masha-mouth-shut {

			0%,
			40% {
				opacity: 1;
			}

			60%,
			100% {
				opacity: 0;
			}
		}

		@keyframes masha-illuminate {

			0%,
			40% {
				rotate: -5deg;
				background-color: hsl(from white 0 100% 70%);
			}

			60%,
			100% {
				rotate: 0deg;
				background-color: hsl(from white 0 100% 60%);
			}
		}

		@keyframes determination-x {
			0% {
				transform: translateX(20%);
			}

			100% {
				transform: translateX(-20%);
			}
		}

		@keyframes determination-y {

			0%,
			5% {
				transform: translateY(30px);
			}

			95%,
			100% {
				transform: translateY(-30px);
			}
		}

		@keyframes determination-rotate {
			0% {
				rotate: 10deg;
			}

			100% {
				rotate: -10deg;
			}
		}

		@keyframes determination-border {
			0% {
				transform: rotate(0deg) translateY(9px);
			}

			100% {
				transform: rotate(360deg) translateY(-9px);
			}
		}

		@keyframes ebashilovo {

			0%,
			60% {
				rotate: 0deg;
				transform: scale(1);
			}

			65% {
				rotate: -1.4deg;
				transform: scale(1.06);
			}

			70% {
				rotate: -1deg;
				transform: scale(1);
			}

			80% {
				rotate: -1deg;
				transform: scale(1.04);
			}

			90%,
			100% {
				rotate: 0deg;
				transform: scale(1);
			}
		}

		body:has(details.page#amogus > section.content > input#shoot:checked) {
			>img#mirzaev {
				animation-name: arsen-in-town;
				animation-duration: 0.8s;
				animation-delay: 1.5s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-out;
			}

			details.page#author {
				>section.content {
					>div.x {
						>div.y {
							>img#logo {
								animation-name: unset;
							}
						}
					}
				}
			}
		}

		details.page#author {
			&:has(> summary:hover)>section.content>div.room {
				z-index: 100;
				animation-name: room-illuminate;
				animation-duration: 1s;
				animation-direction: normal;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.5, 0, 0, 1);
			}

			>section.content {
				>div.room {
					&:before {
						animation-name: masha-mouth-shut;
						animation-duration: 2s;
						animation-delay: 1s;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-fill-mode: forwards;
						animation-timing-function: cubic-bezier(1, 0, 0, 1);
					}

					>div.illuminate {
						animation-name: masha-illuminate;
						animation-duration: 2s;
						animation-delay: 1s;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-fill-mode: forwards;
						animation-timing-function: cubic-bezier(1, 0, 0, 1);

						&:after {
							animation: noise 0.6s steps(2) infinite;
						}
					}
				}

				>div.x {
					animation-name: determination-x;
					animation-duration: 1.8s;
					animation-iteration-count: infinite;
					animation-direction: alternate;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(0.5, 0, 0.55, 1);

					>div.y {
						animation-name: determination-y;
						animation-duration: 2.2s;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-fill-mode: forwards;
						animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);

						&:after {
							animation: noise 0.6s steps(2) infinite;
						}

						>img#logo {
							/* animation-name: determination-rotate;
              animation-duration: 2s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
              animation-fill-mode: forwards;
              animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); */

							animation-name: ebashilovo;
							animation-duration: 1s;
							animation-iteration-count: infinite;
							animation-direction: normal;
							animation-fill-mode: forwards;
							animation-timing-function: ease-in;
						}

						>div.effects>div.border {
							animation-name: determination-border;
							animation-duration: 2s;
							animation-iteration-count: infinite;
							animation-direction: alternate;
							animation-fill-mode: forwards;
							animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);

							&:nth-of-type(1) {
								animation-duration: 2s;
							}

							&:nth-of-type(2) {
								animation-duration: 3s;
							}

							&:nth-of-type(3) {
								animation-duration: 1.7s;
							}
						}
					}
				}
			}
		}
	}

	@layer amogus {
		@keyframes secret-button {
			0% {
				right: -30%;
				opacity: 0;
				rotate: 30deg;
			}

			0%,
			99% {
				pointer-events: none;
			}

			100% {
				right: var(--pages-page-padding, 1rem);
				opacity: 1;
				rotate: 0deg;
				pointer-events: all;
			}
		}

		@keyframes shoot {
			0% {
				width: 0%;
				height: 0%;
				/*         rotate: -5deg; */
			}

			90% {
				width: 100%;
				height: 100%;
				/*         rotate: 0deg; */
			}
		}

		@keyframes screamer {

			0%,
			67% {
				opacity: 0;
				cursor: unset;
				filter: contrast(20) saturate(70) hue-rotate(40deg) brightness(10);
			}

			67.5% {
				opacity: 1;
				cursor: unset;
				filter: contrast(20) saturate(70) hue-rotate(40deg) brightness(10);
			}

			70% {
				opacity: 1;
				cursor: help;
				filter: contrast(1) saturate(0) hue-rotate(0deg) brightness(1);
			}

			100% {
				opacity: 1;
				cursor: help;
				filter: contrast(2) saturate(0) hue-rotate(0deg) brightness(1);
			}
		}

		@keyframes dead {

			0%,
			89% {
				z-index: -400;
				cursor: unset;
				pointer-events: none;
			}

			90% {
				z-index: -400;
				cursor: unset;
				pointer-events: none;
			}

			100% {
				z-index: 600;
				cursor: help;
				pointer-events: all;
			}
		}

		@keyframes flash {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		details.page#amogus[open]>section.content {
			&:after {
				animation: noise 0.6s steps(2) infinite;
				animation-delay: 2s;
			}

			>label:has(+ input#shoot) {
				animation-name: shoot;
				animation-duration: 3s;
				animation-fill-mode: forwards;
				animation-timing-function: linear(0.05 0%,
						0.05 5%,
						0.1 10%,
						0.1 20%,
						0.2 25%,
						0.2 35%,
						0.4 40%,
						0.4 89%,
						1 90%);
			}

			>label:has(+ input#dead) {
				animation-name: dead;
				animation-duration: 3s;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(0.35, 0.85, 0.6, 1);
			}

			>img#screamer {
				animation-name: screamer;
				animation-duration: 4s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-out;
			}
		}

		details.page {
			&:has(> details.page#amogus > section.content > input#shoot:checked):before {
				animation-name: flash;
				animation-duration: 0.8s;
				animation-fill-mode: forwards;
				animation-timing-function: cubic-bezier(1, 0, 0.7, 0.8);
			}

			&[open] {
				>details.page#amogus:not([open])>summary {
					animation-name: secret-button;
					animation-duration: 0.7s;
					animation-delay: 2s;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(0.75, 0, 0, 0.45);
				}
			}
		}
	}

	@layer effects {
		@keyframes noise {
			0% {
				transform: translate3d(0, 9rem, 0);
			}

			10% {
				transform: translate3d(-1rem, -4rem, 0);
			}

			20% {
				transform: translate3d(-8rem, 2rem, 0);
			}

			30% {
				transform: translate3d(9rem, -9rem, 0);
			}

			40% {
				transform: translate3d(-2rem, 7rem, 0);
			}

			50% {
				transform: translate3d(-9rem, -4rem, 0);
			}

			60% {
				transform: translate3d(2rem, 6rem, 0);
			}

			70% {
				transform: translate3d(7rem, -8rem, 0);
			}

			80% {
				transform: translate3d(-9rem, 1rem, 0);
			}

			90% {
				transform: translate3d(6rem, -5rem, 0);
			}

			to {
				transform: translate3d(-7rem, 0, 0);
			}
		}
	}
}

@layer demonstration {
	:root {
		@layer colorscheme {
			@layer system {
				--text-color: #fff;
				--invert-text-color: #000;
				--link-text-color: #7c84f7;
				--link-hover-text-color: #56b8f3;
				--link-active-text-color: #6f54d9;
				--hint-text-color: #696969;
				--background-color: #000;
				--invert-background-color: #fff;
				--section-background-color: #000;
				--button-background-color: #000;
				--invert-button-background-color: #fff;
				--button-text-color: #fff;
				--invert-button-text-color: #000;

				--green: #42ff22;
				--red: #ff2222;
			}

			@layer pages {
				@layer page {
					--pages-page-background-color: #000;
					--pages-page-outline: 2px solid var(--invert-background-color, #fff);
				}

				@layer button {
					--pages-button-background-color: #fff;
					--invert-pages-button-background-color: #000;
					--pages-button-next-background-color: #fff;
					--invert-pages-button-next-background-color: #000;
					--pages-button-previous-background-color: #fff;
					--invert-pages-button-previous-background-color: #000;
					--pages-button-text-color: #000;
					--invert-pages-button-text-color: #fff;
					--pages-button-next-text-color: #000;
					--invertpages-button-next-text-color: #fff;
					--pages-button-previous-text-color: #000;
					--invertpages-button-previous-text-color: #fff;
				}
			}
		}

		@layer localization {
			--localization-button-next: "Next";
			--localization-button-previous: "Previous";
			--localization-button-dead: "DEAD";
			--localization-button-alive: "ALIVE";
		}

		color: var(--text-color, #fafafa);
		font-family: "Geologica",
		sans-serif;
	}

	body {
		--gap: 2rem;
		margin: unset;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		background-color: var(--background-color, #000);
	}

	@layer macros {
		.unselectable {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	}

	input {
		display: none;
	}

	h1 {
		margin: unset;
		margin-bottom: var(--gap, 2rem);
		font-weight: 200;
	}

	strong:has(+ h1) {
		margin-left: 2.5rem;
		margin-bottom: -0.8rem;
		font-family: "Cascadia Code", sans-serif;
		font-weight: 200;
		text-decoration: line-through;
		color: red;
	}

	a {
		font-family: "Cascadia Code", sans-serif;
		text-decoration: unset;
		color: var(--link-text-color, blue);

		&:hover {
			color: var(--link-hover-text-color, blue);
		}

		&:active,
		&:focus {
			color: var(--link-active-text-color, blue);
		}
	}

	span#current_page {
		z-index: 1000;
		margin-top: var(--gap, 2rem);
		padding: 0.4rem 1rem;
		display: flex;
		gap: 0.3rem;
		border-radius: 0.75rem;
		border: 2px solid var(--invert-background-color, #fff);
		background-color: var(--background-color, #000);

		&:after {
			content: counter(page);
			font-variant-numeric: tabular-nums;
		}
	}

	body>img#mirzaev {
		z-index: 1000;
		position: absolute;
		bottom: -17vh;
		left: 2vw;
		max-height: 400px;
		height: 40vw;
		opacity: 0;
	}

	body:has(details.page#author[open] > details.page:not([open]))>img#mirzaev {
		/*       opacity: 1; */
	}
}