:root {
	--scroll: 0s paused both;
	@supports (animation-timeline: scroll(block)) {
		--scroll: ;
		* { animation-timeline: scroll(block) !important; }
	}
}
section { min-height: 100vh; }
#intro img[src*="hello"] {
	position: fixed;
	animation: helloWave 1.2s step-start infinite,
		helloHide 1s linear var(--scroll);
	animation-timeline: auto, scroll(block) !important;
}
@keyframes helloHide {
	0% { visibility: visible; }
	1%, 100% { visibility: hidden; }
}
#about img[src*="float"] {
	display: block; width: 16em; height: 16em;
	position: fixed; top: 50vh; left: calc(50% - 2 * var(--h1));
	translate: calc(-50% + 2rem) -1rem;
	animation: floatSwim 1s step-start var(--scroll),
		floatMove 1s cubic-bezier(.13, .58, .45, .88) var(--scroll);
}
@keyframes floatSwim {
	0%, 1%, 18%, 100% { visibility: hidden; }
	3% { object-position: 0% 50%; visibility: visible; }
	5% { object-position: 25% 50%; }
	8% { object-position: 50% 50%; }
	15% { object-position: 75% 50%; }
	17% { object-position: 100% 50%; visibility: visible; }
}
@keyframes floatMove {
	0%, 5% {
		left: calc(50% - 2 * var(--h1) - 1em);
		translate: -50% calc(-.5 * var(--h1));
	}
	17% {
		left: calc(50% + 15rem - 12em);
		translate: 0 calc(-50% + 2rem);
	}
}
#about img[src*="laptop"] {
	display: block; width: 33em; height: 33em;
	position: fixed; top: 100%; left: 90%; z-index: 21;
	animation: laptopTwist 1s step-start var(--scroll),
		laptopFloat 1s linear var(--scroll);
}
@keyframes laptopTwist {
	0%, 10% { object-position: 0% 50%; }
	13% { object-position: 25% 50%; }
	15% { object-position: 50% 50%; }
	16% { object-position: 75% 50%; }
	17%, 100% { object-position: 100% 50%; }
}
@keyframes laptopFloat {
	0% {
		inset: 100% auto auto 90%;
		translate: 0% 10%; rotate: -12deg;
	}
	17%, 100% {
		inset: 50% auto auto 50%;
		translate: 0 calc(-50% + 17rem - 12em); rotate: 0deg;
		visibility: hidden;
	}
}
#about img[src*="about"] {
	place-self: start;
	position: sticky; top: calc(50vh - 8em + 2rem);
	animation: aboutHide 1s linear var(--scroll);
}
@keyframes aboutHide {
	0%, 17%, 23%, 100% { visibility: hidden; }
	17% { top: calc(50vh - 8em + 2rem); animation-timing-function: ease; }
	18%, 22% { visibility: visible; }
	23% { top: calc(50vh - 8em); }
}
#yozo img[src*="show"] {
	display: block; width: 16em; height: 22em;
	position: fixed; top: 50vh; left: calc(50% + 13rem - 7em);
	translate: 0 -50%;
	animation: showHold 1s step-start var(--scroll),
		showHide 1s linear var(--scroll);
}
@keyframes showHide /* ok, that's a bad name */ {
	0%, 23%, 37%, 100% { visibility: hidden; }
	0% { top: 150vh; }
	23% {
		top: 50vh; left: calc(50% + 13rem - 7em);
		animation-timing-function: ease; }
	24%, 36% { visibility: visible; }
	37% { top: calc(50vh + 1rem); left: calc(50% + 16rem - 7em); }
}
@keyframes showHold {
	0%, 28% { object-position: 0% 50%; }
	32% { object-position: 50% 50%; }
	37%, 100% { object-position: 100% 50%; }
}
#yozo img[src*="yozo"] {
	place-self: start;
	margin-block: -10em;
	position: sticky; top: calc(50vh - 11em + 1rem);
	animation: yozoHide 1s linear var(--scroll);
}
@keyframes yozoHide {
	0%, 37%, 44%, 100% { visibility: hidden; }
	38%, 43% { visibility: visible; }
}
#projects img[src*="brace"] {
	display: block; width: 16em; height: 22em;
	position: fixed;
	top: calc(50vh - 11em + 1rem); left: calc(50% + 15rem - 7em);
	animation: braceImpact 1s step-start var(--scroll),
		braceBlow 1s cubic-bezier(0, .3, .1, .6) var(--scroll),
		braceHide 1s linear var(--scroll);
}
@keyframes braceImpact {
	0%, 50% { object-position: 0% 50%; }
	54% { object-position: 50% 50%; }
	60%, 100% { object-position: 100% 50%; }
}
@keyframes braceHide {
	0%, 44%, 81%, 100% { visibility: hidden; }
	0% { margin-top: 200vh; }
	44% { margin-top: 0; }
	45%, 80% { visibility: visible; }
}
@keyframes braceBlow {
	50% { rotate: 0deg; translate: 0; }
	81% { rotate: 30deg; translate: 30rem 5rem; }
}
#projects img[src*="boom"] {
	display: block; width: 22em; height: 22em;
	position: fixed; top: calc(50vh - 11em); left: calc(50% + 15rem - 12em);
	z-index: 5;
	animation: boomSpread 1s step-start var(--scroll),
		boomHide 1s linear var(--scroll);
}
@keyframes boomSpread {
	0%, 53% { object-position: 0% 50%; translate: 0; rotate: 0deg; }
	54% { object-position: 33% 50%; translate: 0 .5rem; rotate: 0deg; }
	56% { object-position: 67% 50%; translate: -.5rem 1rem; rotate: 0deg; }
	59%, 100% {
		object-position: 100% 50%;
		translate: 0 1.5rem; rotate: 60deg;
	}
}
@keyframes boomHide {
	0%, 50%, 59%, 100% { visibility: hidden; }
	0% { translate: 0 210vh; }
	50% { translate: 0; }
	51%, 58% { visibility: visible; }
}
#projects p {
	position: fixed;
	inset: 50vh auto auto calc(50% + 9em - 13.5rem); z-index: -1;
	translate: 0 -50%;
	animation: spreadClip 1s step-start var(--scroll);
}
@keyframes spreadClip {
	0%, 53% { clip-path: circle(0rem); }
	54% { clip-path: circle(0rem); }
	56% { clip-path: circle(7.5rem); }
	59% { clip-path: circle(10rem); }
	60%, 100% { clip-path: none; }
}
#projects nav {
	width: calc(50% + 15rem);
	position: fixed; inset: 0 auto 0 0;
	overflow: clip;
	pointer-events: none;
}
#projects li {
	position: absolute;
	top: calc(50vh - 12.575rem + var(--index) * 4.4rem);
	left: calc(50vw + 7em - mod(var(--index), 2) * 16em - 13.5rem);
	translate: calc(mod(1 + var(--index), 2) * -100%);
	animation: projectFloat 1s cubic-bezier(0, .5, .4, 1) var(--scroll);
	pointer-events: all;
	a { white-space: nowrap; }
	&:nth-of-type(1){ --index: 0; }
	&:nth-of-type(2){ --index: 1; }
	&:nth-of-type(3){ --index: 2; }
	&:nth-of-type(4){ --index: 3; }
	&:nth-of-type(5){ --index: 4; }
	&:nth-of-type(6){ --index: 5; }
}
@keyframes projectFloat {
	0%, 52% {
		top: calc(50vh - 1em); left: calc(50vw + 20em - 13.5rem);
		translate: 0; scale: .6; rotate: calc((3 - var(--index)) * 4deg);
	}
	58% { rotate: 0deg; }
	60%, 100% {
		top: calc(50vh - 12.575rem + var(--index) * 4.4rem);
		left: calc(50vw + 7em - mod(var(--index), 2) * 16em - 13.5rem);
		translate: calc(mod(1 + var(--index), 2) * -100%); scale: 1;
	}
}
#projects {
	position: sticky; top: 0;
	animation: satelliteWipeAway 1s linear var(--scroll);
}
@keyframes satelliteWipeAway {
	0%, 66% {
		clip-path: polygon(
			-24em calc(50% - 27em),
			-24em -100vh,
			calc(100% + 6em) -100vh,
			calc(100% + 6em) calc(50% - 27em),
			calc(100% + 24em) calc(50% + 27em),
			-6em calc(50% + 27em)
		);
	}
	80%, 100% {
		clip-path: polygon(
			calc(100% + 6em) calc(50% - 27em),
			calc(100% + 6em) -100vh,
			calc(100% + 6em) -100vh,
			calc(100% + 6em) calc(50% - 27em),
			calc(100% + 24em) calc(50% + 27em),
			calc(100% + 24em) calc(50% + 27em)
		);
	}
}
#values {
	position: sticky; bottom: 0;
	clip-path: polygon(
		-24em calc(50% - 27em),
		-24em calc(50% - 27em),
		-6em calc(50% + 27em),
		-6em 100vh,
		-6em 100vh,
		-6em calc(50% + 27em)
	);
	animation: satelliteWipe 1s linear var(--scroll);
	pointer-events: none;
	p {
		max-width: min(20em, 45%);
		pointer-events: all;
	}
}
@keyframes satelliteWipe {
	0%, 66% {
		clip-path: polygon(
			-24em calc(50% - 27em),
			-24em calc(50% - 27em),
			-6em calc(50% + 27em),
			-6em 200vh,
			-6em 200vh,
			-6em calc(50% + 27em)
		);
	}
	80%, 100% {
		clip-path: polygon(
			-24em calc(50% - 27em),
			calc(100% + 6em) calc(50% - 27em),
			calc(100% + 24em) calc(50% + 27em),
			calc(100% + 24em) 200vh,
			-6em 200vh,
			-6em calc(50% + 27em)
		);
	}
}
img[src*="satellite"] {
	display: block; width: 30em; height: 54em;
	position: fixed; inset: 50% auto auto 0; z-index: 21;
	translate: -100% -50%;
	animation: satelliteCover 1s linear var(--scroll);
	pointer-events: none;
}
@keyframes satelliteCover {
	0%, 65% { left: 0; translate: -100% 300vh; }
	65%, 66% { left: 0; translate: -100% -50%; }
	80%, 100% { left: 100%; translate: 0% -50%; }
}
img[src*="glint"] {
	display: block; width: 4em; height: 4em;
	position: fixed; inset: calc(50% + 10em) auto auto 0; z-index: 21;
	animation: glintShine 1s linear var(--scroll);
	pointer-events: none;
}
@keyframes glintShine {
	0%, 72%, 76%, 100% { margin: 0; opacity: 0; }
	72.5%, 75.5% { opacity: 1; }
	72% { margin: 0; }
	76% { margin: 1em 0 0 8em; }
	0%, 65% { translate: -17em 300vh; }
	65%, 66% { translate: -17em 0; }
	0%, 66% { inset: calc(50% + 10em) auto auto 0%; }
	80%, 100% { inset: calc(50% + 9em) auto auto 100%; translate: 13em 0; }
}
#values p {
	position: absolute; inset: 50% 50% auto auto; translate: 0 3em;
}
#values img[src*="return"] {
	display: block; width: 16em; height: 16em;
	position: fixed; z-index: 21;
	offset: ellipse(100vw 15em at calc(15em - 50vw) 50%) 0deg;
	animation: returnAngles 1s step-start var(--scroll),
		returnPath 1s cubic-bezier(.13, .58, .45, .88) var(--scroll);
}
@keyframes returnAngles {
	0%, 70%, 89%, 100% { visibility: hidden; }
	83% { object-position: 0% 50%; visibility: visible; }
	88% { object-position: 100% 50%; visibility: visible; }
}
@keyframes returnPath {
	0% { animation-timing-function: linear; translate: 0 350vh; }
	69% { translate: 0; }
	70% { offset-distance: -50%; }
	0%, 69%, 88% { offset-distance: 0%; }
}
#values img[src*="fly"]{
	display: block; width: 16em; height: 16em;
	position: fixed; z-index: 21;
	offset: ellipse(100vw 15em at calc(15em - 50vw) 50%) 0deg;
	animation: flyHide 1s step-start var(--scroll),
		flyPath 1s cubic-bezier(.13, .58, .45, .88) var(--scroll);
}
@keyframes flyHide {
	0%, 88%, 91%, 100% { visibility: hidden; }
	89%, 90% { visibility: visible; }
}
@keyframes flyPath {
	0% { animation-timing-function: linear; translate: 0 400vh; }
	88% { translate: 0; }
	0%, 88% { offset-distance: 0%; }
	91% { offset-distance: 3em; }
}
#outro img[src*="home"]{
	display: block; width: 14em; height: 14em;
	position: fixed; z-index: 21;
	offset: ellipse(16em 6em at 50vw 50%) 3em 0deg;
	animation: homeHide 1s step-start var(--scroll),
		homePath 1s linear var(--scroll);
}
@keyframes homeHide {
	0%, 90% { visibility: hidden; }
	91% { object-position: 0% 50%; visibility: visible; }
	93% { object-position: 33% 50%; }
	97% { object-position: 67% 50%; z-index: 5; }
	100% { object-position: 100% 50%; z-index: 3; visibility: visible; }
}
@keyframes homePath {
	0% { translate: 0 420vh; }
	90% { translate: 0; }
	0%, 90% { offset-distance: 3em; }
	100% { offset-distance: 75%; }
}
#outro { min-height: 100vh; }
#footer {
	position: absolute; inset: auto 0 0; z-index: 10;
	nav { padding: 0 2em clamp(.5em, 25vh - 6.5em, 2em); }
}