.holder {
	position: relative;
	z-index: 4; /* above particles */
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 3vw;
}

section > .particles-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	transition: opacity 5s;
}

section.hero {

	background-clip: border-box;
	border-image: linear-gradient(-45deg, #34126f, #8a041a ) 50;
	border-width: 1vw;
	border-style: solid;

	background-image: linear-gradient(-45deg, #150135, #610316);
	display: flex;
	align-items: center;
	justify-content: center;    
	min-height: 100vh;

	position: relative;
	z-index: 1;


	& .logo-left {
		line-height: 0;
		& .miza-logo {
			width: 25vh;
			max-width: 15vw;
			-webkit-user-drag: none;
			user-select: none;
			aspect-ratio: 1/1;
			border-radius: 10px;
			object-fit: cover;
			object-position: 70% 50%;
			box-shadow: 0 1px 20px 0 #ac1ba2ad;
		}
	}
	&.above-view .below-view .holder {
		transform: translateX(2.5ch);
	}
	& .logo-right {
		& .name {
			font-size: 4.2rem;
			font-style: italic;
			text-shadow: 0 0 0.5em rgb(244, 242, 246);
		}
		& .tagline {
			font-size: 1.4rem;
			text-shadow: 0 2px 2px rgb(120, 102, 140);
		}
	}

	& .porpoise {
		white-space: nowrap;
		& .normal, .goofy, .icon {
			display: inline-block;
			vertical-align: bottom;
			overflow: hidden;
			transition: transform 250ms;
		}

		& .icon {
			transform-origin: right;
			text-align: center;
			font-size: 0.8em;
			transform: scaleX(0);
			width: 0;
			user-select: none;
		}

		& .goofy {
			transform-origin: right;
			transform: scaleX(0);
			width: 0;
			user-select: none;
		}

		& .normal {
			transform-origin: left;
			transform: scaleX(1);
			user-select: auto;
		}
	}
	&.above-view .below-view .porpoise {
		& .normal, .goofy, .icon {
			transition-delay: 0s;
		}
		& .goofy {
			width: unset;
			user-select: auto;
			transform: scaleX(1);

			&.one-ch {
				width: 1ch;
			}
		}
		& .normal {
			width: 0;
			user-select: none;
			transform: scaleX(0);
		}
		& .icon {
			width: 2ch;
			user-select: auto;
			transform: scaleX(1);
		}
	}

	& .orbitals {
		position: absolute;
		top: 10vh;
		right: 10vw;
		opacity: 0.4;
		--skew: -20deg;
		animation: bob 25s ease infinite;
		transition: opacity 350ms;

		&.alternate {
			bottom: 15vh;
			left: 10vw;
			top: unset;
			right: unset;
			--skew: 10deg;
			animation: bob 15s ease infinite;
			animation-delay: -7s;

			& .orb {
				border-radius: unset;
				box-shadow: unset;
				--a: rgb(134 95 0);
				filter: drop-shadow(var(--a) 0 0 0) drop-shadow(var(--a) -1px 1px 0) drop-shadow(var(--a) -2px 2px 0) hue-rotate(calc(var(--i) * 72deg));
			}
		}
		& .orb {
			position: absolute;
			left: 0;
			top: 0;
			width: 3rem;
			height: 3rem;
			border-radius: 100%;
			box-shadow: rgb(219 157 0) 0 0 1px, rgb(219 157 0) 1px 1px 1px, rgb(219 157 0) 2px 2px 1px, rgb(219 157 0) 3px 3px 1px;
			filter: hue-rotate(calc(var(--i) * 72deg));
			animation: orbitalspin 20s linear infinite;
			animation-delay: calc(var(--i) * -4s);
		}
	}
	&.inside-view .orbitals {
		opacity: 0.7;
	}

	& .scroll-down {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;

		& .lucide-chevron-down {
			fill: none;
			stroke: currentColor;
			stroke-width: 1;
			stroke-linecap: round;
			stroke-linejoin: round;

			width: 5rem;
			height: 5rem;
			cursor: pointer;

			opacity: 0.3;
			animation: slow-opacity-in 5s, bobble-up-and-down 5s infinite;
			transition: opacity 150ms;
		}
	}
}

@media (max-width: 1050px) {
	section.hero .holder {
		flex-direction: column;

		& .logo-left .miza-logo {
			max-width: 50vw;
		}

		& .logo-right {
			max-width: 80%;
			align-self: center;
			text-align: center;
			text-wrap: balance;
		}

		& .porpoise::before {
			content: "\A";
			white-space: pre;
		}
		
	}

	section.hero.above-view section.hero.below-view .holder {
		transform: translateX(0);
	}
}

@keyframes bob {
	0% {
		transform: skew(var(--skew), 0deg) translateY(0);
	}
	50% {
		transform: skew(var(--skew), 0deg) translateY(20px);
	}
	100% {
		transform: skew(var(--skew), 0deg) translateY(0);
	}
}
@keyframes orbitalspin {
	0% {
		transform: rotate(0deg) translateX(3rem) rotate(0deg);
	}
	100% {
		transform: rotate(360deg) translateX(3rem) rotate(-360deg);
	}
}
@keyframes slow-opacity-in {
	0% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
}
@keyframes scrollUp {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-9.6rem);
	}
}

section.versatile {
	padding: 4rem 1rem;
	background-color: #1e0845;
	background-image: radial-gradient(ellipse at top left, #880357, transparent 50%), radial-gradient(ellipse at top right, #41168b, transparent 50%);

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	padding-bottom: 10rem;

	h2 {
		font-size: 2rem;
		text-align: center;
		line-height: 1.5;
		margin-bottom: 2rem;
		text-shadow: 0 2px #893fd2;
	}

	& > .use-cases-holder {
		display: flex;
		flex-flow: row wrap;
		align-items: start;
		align-content: start;
		gap: 2rem;
		height: 100%;
		max-width: 80rem;


		& > div.use-case {
			display: flex;
			flex-flow: row nowrap;

			padding: 0.2rem 1.5rem;
			padding-left: 1.5rem;
			background-color: #3e0874;
			color: white;
			background-image: radial-gradient(ellipse at top left, #561796, #300856);
			align-items: center;
			border-radius: 3rem 0.3rem;
			min-width: 30vw;

			cursor: pointer;
			text-align: left;
			line-height: 1.5;

			transition: transform .5s, background-color 150ms, opacity .25s;
			transform-origin: bottom center;


			&.inside-view {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
			&.above-view {
				opacity: 0.3;
				transform: translateY(-2rem) scale(0.95);
			}
			&.below-view {
				opacity: 0.3;
				transform: translateY(2rem) scale(0.95);
			}

			&:nth-child(2n) {
				margin-left: auto;
				flex-direction: row-reverse;
				border-radius: 0.3rem 3rem;
			}

			&.music:hover > .albums-icon > div {
				--multiplied-rotation: calc(var(--rotation, -3deg) * 2);
				&:nth-child(3) > svg.lucide {
					animation-play-state: paused;
				}
			}


			.albums-icon {
				width: 10rem;
				height: 10rem;
				display: grid;
				grid-template: 100% / 100%;
				align-items: center;
				justify-items: center;
				perspective: 1000px;
				flex-shrink: 0;

				& > div {
					grid-area: 1/1;
					width: 80%;
					height: 80%;
					transform-origin: bottom center;
					box-shadow: 0 0 15px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.2);
					--multiplied-rotation: var(--rotation, -3deg);
					transform: rotateX(-5deg) rotateY(10deg) rotateZ(var(--multiplied-rotation, -3deg)) translateZ(var(--depth, 0px));
					transition: transform 550ms;

					&:nth-child(1) {
						--rotation: 3deg;
						--depth: -10px;
						background-color: #21106f;
					}
					&:nth-child(2) {
						background-color: #240b36;
						--rotation: 1deg;
						--depth: -5px;
					}
					&:nth-child(3) {
						background-color: #ab1aa1;
						color: white;
						--rotation: -2deg;
						--depth: 0px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-image: radial-gradient(circle at top left, #a1559b, #23165b);

						& > svg.lucide {
							width: 80%;
							height: 80%;
							animation: record-spin 10s infinite linear;
							filter: drop-shadow(1px 0px 0px rgb(0, 0, 0));
						}
					}
				}
			}

			&.ai:hover > .ai-icon {
				transform: scale(1.05) rotate(3deg);
				& #chat-bubble-dots circle {
					animation-play-state: paused;
				}
				& #chat-bubble {
					transform: rotate(7deg) translateY(-1rem);
				}

			}

			.ai-icon {
				width: 10rem;
				height: 10rem;
				flex-shrink: 0;
				transition: transform 550ms;
				display: grid;
				grid-template: 100% / 100%;
				align-items: center;
				justify-items: center;


				& #chat-bubble-dots {
					& circle {
						animation: jump 4s infinite linear;
						filter: drop-shadow(2px 3px 0px black);

						&:nth-child(1) {
							animation-delay: -3s;
						}
						&:nth-child(2) {
							animation-delay: -2s;
						}
						&:nth-child(3) {
							animation-delay: -1s;
						}
					}
				}

				& > #chat-bubble {
					grid-area: 1/1;
					transition: transform 550ms;
					transform: rotate(3deg) translateY(-1rem);
					filter: drop-shadow(0 3px 5px black);
					width: 70%;
					height: 70%;
				}

				& > .picture-frame {
					grid-area: 1/1;
					width: 80%;
					height: 100%;
					background-color: #a88bc5;
					border-radius: 3px;
					display: flex;
					align-items: start;
					justify-content: center;
					padding: 5px;
					padding-bottom: 2rem;
					transform: rotate(3deg);
					transition: transform 550ms;

					&::before {
						content: '';
						display: block;
						width: 100%;
						height: 100%;
						background-color: #230442;
						box-shadow: inset 0 0 5px #8305ff;
					}
				}
			}

			&.logs:hover > .logs-icon {
				transform: scale(1.05) rotate(-1deg);
				& .logs-inner {
					animation-play-state: paused;
				}
			}
			.logs-icon {
				margin-left: 1rem;
				width: 7rem;
				height: 8rem;
				perspective: 1000px;
				flex-shrink: 0;
				background-color: #230442;
				overflow: hidden;
				border-radius: 0.25rem;
				position: relative;
				transition: transform 550ms;


				&::before {
					display: block;
					content: '';
					position: absolute;
					inset: 0;
					z-index: 2;
					box-shadow: inset 0 0 5px #10041d;
				}

				& .logs-inner {
					display: flex;
					width: 100%;
					flex-flow: column nowrap;
					align-items: start;
					padding: 0.2rem 0.5rem;
					gap: 0.2rem;
					animation: scrollUp 10s steps(16, end) infinite;
					& div {
						height: 0.4rem;
						flex-shrink: 0;
						background-color: #8263a1;
						width: calc(
							60% + (
								8% * (
									mod(20 * sin(
										8 - var(--i)
									), 5)
								)
							)
						);

						&:nth-child(16n + 1) {
							--i: 1;
						}
						&:nth-child(16n + 2) {
							--i: 2;
						}
						&:nth-child(16n + 3) {
							--i: 3;
						}
						&:nth-child(16n + 4) {
							--i: 4;
						}
						&:nth-child(16n + 5) {
							--i: 5;
						}
						&:nth-child(16n + 6) {
							--i: 6;
						}
						&:nth-child(16n + 7) {
							--i: 7;
						}
						&:nth-child(16n + 8) {
							--i: 8;
						}
						&:nth-child(16n + 9) {
							--i: 9;
						}
						&:nth-child(16n + 10) {
							--i: 10;
						}
						&:nth-child(16n + 11) {
							--i: 11;
						}
						&:nth-child(16n + 12) {
							--i: 12;
						}
						&:nth-child(16n + 13) {
							--i: 13;
						}
						&:nth-child(16n + 14) {
							--i: 14;
						}
						&:nth-child(16n + 15) {
							--i: 15;
						}
						&:nth-child(16n + 16) {
							--i: 16;
						}
					}
				}
			}

			&.and-more {
				transition: transform 250ms;
			}
			&.and-more:hover {
				transform: rotate(2deg);
			}


			& > .explain {
				padding: 1rem;

				& > h3 {
					font-size: 1.5rem;
				}
			}
		}
	}
}

@keyframes jump {
	0%, 40%, 100% {
		transform: translateY(0);
	}
	60%, 90% {
		transform: translateY(0.5rem);
	}
	65%, 75% {
		transform: translateY(-1.8rem);
	}
	70% {
		transform: translateY(-2rem);
	}
}


@media (max-width: 1000px) {
	#root > section.versatile > div.use-cases-holder > div.use-case {
		border-radius: 0.3rem;
		&:first-child {
			border-radius: 2rem 0.3rem 0.3rem;
		}
		&:last-child {
			border-radius: 0.3rem 0.3rem 2rem 0.3rem;
		}
	}
}
@media (max-width: 650px) {
	#root > section.versatile > div.use-cases-holder > div.use-case {
		flex-direction: column;
		align-items: center;
		padding: 0.8rem 1rem;
		width: auto;
		gap: 1rem;

		& .use-case-icon {
			width: 12rem;
			height: 12rem;
		}

		& .explain {
			padding: 0 1rem;

			& h3 {
				font-weight: bold;
			}
			& p {
				font-size: 1.1rem;
				line-height: 1.4;
				text-wrap: balance;
				&:not(:last-child) {
					margin-bottom: 0.5em;
				}
			}
		}
	}
}

@keyframes record-spin {
	0% {
		transform: rotate(0turn);
	}
	100% {
		transform: rotate(1turn);
	}
}

section.maintained {
	position: relative;
	z-index: 2;
	min-height: 80vh;
	background-color: #08002e;
	background-image: radial-gradient(circle at top left, #00252e, #08002e);

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;

	h2 {
		font-size: 2rem;
		text-align: center;
		line-height: 1.5;
		margin-block: 1rem;
		text-shadow: 0 2px #1b5d7c;
	}

	& .server {
		position: absolute;
		bottom: -3px;
		right: 0;
		max-height: 120%;
		max-width: 50%;
		z-index: -1;

		transition: opacity 350ms;
	}
	&.inside-view .server {
		filter: drop-shadow(0 0 7.5rem #00464e) contrast(1.1);
	}
	&.above-view .below-view {
		.particles-background {
			opacity: 0.1;
		}
		.server {
			opacity: 0.2;
			filter: blur(2px);
		}
		dl {
			opacity: 0.3;
		}
		.maintenance-holder {
			opacity: 0.3;
		}
	}
	.monitor {
		position: absolute;
		left: 3vw;
		height: 8vw;
		top: 3vw;
		rotate: -26deg 12deg;
		box-shadow: #00e7ff94 0 0 50px;
		animation: bobble-up-and-down 10s infinite;
	}

	dl {
		display: flex;
		flex-flow: row wrap;
		gap: 1.5rem;
		text-align: center;
		margin-bottom: 1rem;
		transition: opacity 0.7s;
		transition-delay: 0.25s;
		transition-timing-function: cubic-bezier(0,1,1,0);

		dd {
			font-weight: 700;
			font-size: 1.4rem;
		}
	}

	.maintenance-holder {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;

		position: relative;
		z-index: 4;

		max-width: min(100%, 80ch);
		text-align: center;
		text-wrap-style: balance;
		text-wrap-style: pretty;

		border: solid 2px rgba(9, 10, 26, 0.5);
		background-color: rgba(9, 10, 26, 0.7);
		backdrop-filter: blur(15px);
		box-shadow: 0 0 10px rgba(9, 10, 26, 0.7);

		padding: 0.4rem 1rem;
		border-radius: 4px;

		p {
			line-height: 1.25;
			margin-bottom: 1rem;
		}
	}
}


section.links {
	position: relative;
	z-index: 2;
	min-height: 80vh;
	background-color: #0c000c;
	background-image: radial-gradient(circle at top left, #2e0025, #0c000c);

	box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.5);

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: minmax(auto, 1fr) auto 1fr;
	align-items: center;
	justify-content: center;
	justify-items: center;

	text-align: center;


	.leafblower, h3, h2, .big-links {
		transition: opacity 150ms;
	}
	&.above-view .below-view {
		.leafblower, h3, h2, .big-links {
			opacity: 0.1;
		}
	}


	h3 {
		background-color: rgb(47, 0, 90);
		border: solid 2px rgb(18, 5, 31);
		padding: 1rem 2rem;
	}

	.leafblower-section {
		display: flex;
		flex-flow: column nowrap;
	}

	.leafblower {
		width: min(20vh, 80vw);
		padding-left: calc(min(20vh, 80vw) * 0.25);
	}

	h2 {
		font-size: 1.8rem;
		text-align: center;
		line-height: 1.5;
		margin-bottom: 0.2rem;
		text-shadow: 0 2px #3f116c;
	}
	.big-links a {
		display: inline-block;
		padding: 0.8rem 1rem;
		box-sizing: content-box;
		margin-bottom: 0.5rem;

		border: solid 2px rgb(52, 0, 104);
		background-color: rgba(36, 8, 65, 0.505);

		text-decoration: none;
		font-weight: 500;
		font-size: 1.1rem;


		.big {
			font-size: 1.5rem;
			vertical-align: middle;
		}

		&:hover {
			border: solid 2px rgb(67, 8, 125);
			background-color: rgba(55, 16, 96, 0.612);
		} 
	}

	.if-you-want {
		display: block;
		margin-top: 1.3rem;
		margin-bottom: 1rem;
		font-style: italic;
		font-size: 0.9rem;
		opacity: 0.5;
	}
	.non-centered {
		height: 15rem;
	}
}

#star-container {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

@keyframes bobble-up-and-down {
	0% {
		transform: translateY(-0.5vw);
	}
	50% {
		transform: translateY(0.5vw);
	}
	100% {
		transform: translateY(-0.5vw);
	}
}