:root {
	--white: #fff;
	--black: #000;
	--accent: #e5640d;

	--dark-gray: #1b1b1f;
	--blue-fg: #0E2239;
	--blue-bg: #B9D0E9;
	--green-bg: #7E9181;

	--floating-icons: #5E7996;
	--pink-bg: #ffc0cb;
	--cyan: #73C1C6;

	--scroll-bar-color: #c5c5c5;
	--scroll-bar-bg-color: var(--black);

	--intro-font-size: 3.5rem;
	--header-font-size: 2.4rem;
	--text-font-size: 2rem;
	--small-font-size: 1.6rem;

	--card-container-padding: 1rem 5rem;
	--expanded-container-height: 34rem;

	/* motion */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-fast: 150ms;
	--dur-base: 300ms;
	--dur-slow: 500ms;
	--dur-morph: 400ms;
	--stagger: 120ms;
}

::-webkit-scrollbar-corner {
	background: rgba(0, 0, 0, 0.5);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 1rem;
	height: 1rem;
}

*::-webkit-scrollbar-track {
	background: var(--scroll-bar-bg-color);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--scroll-bar-color);
	border-radius: 2rem;
	border: .3rem solid var(--scroll-bar-bg-color);
}

html,
body {
	width: 100vw;
	height: 100vh;
	position: relative;
	background: var(--black);
	scroll-behavior: smooth;
	overflow-x: hidden;
	font-size: 62.5%;
}

body {
	font-size: var(--small-font-size);
	display: flex;
	justify-content: center;
	align-items: center;
}

.font-family-saira,
.font-family-saira * {
	font-family: 'Saira Extra Condensed',
		sans-serif;
	position: relative;
	font-size: var(--intro-font-size);
}

.font-half-bg-accent,
.font-half-bg-accent * {
	position: relative;
}

.font-half-bg-accent span {
	--half-bg-color: var(--cyan);
}

.font-half-bg-accent span:before {
	content: "";
	position: absolute;
	inset: 60% 0%;
	width: 100%;
	height: 25%;
	background-color: var(--half-bg-color);
	z-index: -1;
	transform-origin: left;
}

/* highlight bars draw in from the left after their text arrives */
.intro-text.slide-in-blur span:before {
	animation: highlight-draw var(--dur-slow) var(--ease-out) calc(var(--stagger) * var(--index) + 250ms) backwards;
}

.card-container.active .font-half-bg-accent span:before {
	animation: highlight-draw var(--dur-slow) var(--ease-out) calc(var(--dur-base) + 200ms) backwards;
}

.pill-surface[data-state="open"] .font-half-bg-accent span:before {
	animation: highlight-draw var(--dur-slow) var(--ease-out) 200ms backwards;
}

@keyframes highlight-draw {
	0% {
		transform: scaleX(0);
	}
}

.swoosh {
	--text-color-on-reveal: var(--black);
	--bg-color-swoosh: var(--cyan);
	position: relative;
	clip-path: inset(-20% 0);
	animation-name: text-reveal, shimmy;
	animation-duration: 1s;
	animation-delay: .1s;
	animation-fill-mode: both;
	animation-timing-function: steps(1), ease-out;
}

.swoosh {
	padding: 0 1rem;
}

.swoosh::after {
	content: '';
	position: absolute;
	inset: -20% 0%;
	background-color: var(--bg-color-swoosh);
	animation-name: block-reveal;
	animation-duration: 1s;
	animation-fill-mode: both;
}

@keyframes shimmy {
	0% {
		transform: translateX(-5ch);
	}
}

@keyframes text-reveal {
	0% {
		color: transparent;
	}

	50%,
	100% {
		color: var(--text-color-on-reveal);
	}
}

@keyframes block-reveal {
	0% {
		transform: translateX(-110%);
	}

	45%,
	55% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(110%);
	}
}

.wrapper {
	height: 100%;
	width: 100%;
	display: grid;
	padding: .5rem;
	grid-template-rows: 15% 1fr;
	max-width: 150rem;
}

/* header */
.header-container {
	color: var(--white);
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;
}

.header-container .filler {
	flex: 0;
	transition: flex var(--dur-slow) var(--ease-out);
}

.header-container.active .filler {
	flex: auto;
}

.header-container.active .header {
	position: relative;
}

.header-container img {
	height: 3rem;
	transition: rotate var(--dur-slow) var(--ease-out);
}

.header-container:hover img {
	rotate: 1turn;
}

.header {
	font-size: var(--header-font-size);
	font-weight: 600;
}

@media (max-width: 600px) {
	.wrapper {
		grid-template-rows: 15% 1fr;
	}
}

/* nav */

.nav-container {
	color: var(--white);
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 1.5rem;
	grid-template-areas:
		"a b"
		"a c"
		"a d";
}

.services {
	grid-area: a;
}

.work {
	grid-area: b;
}

.about {
	grid-area: c;
}

.contact {
	grid-area: d;
}

@media (max-width: 600px) {
	:root {
		--intro-font-size: 2.5rem;
		--header-font-size: 1.8rem;
		--card-container-padding: .5rem 2.5rem;
		/* --text-font-size: 1.8rem; */
		/* --header-font-size: 2.4rem;
		--small-font-size: 1.6rem; */
	}

	body {
		padding: 0 1rem;
	}

	.nav-container {
		gap: .5rem;
		grid-template-rows: repeat(4, 1fr);
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"a a"
			"a a"
			"a a"
			"b c";
		/* room for the resting contact pill (row + its margin) below the cards */
		padding-bottom: calc(5.6rem + 2.4rem + env(safe-area-inset-bottom));
	}

	/* the contact pill stands in for the contact card on phones */
	.contact {
		display: none;
	}
}

/* card basic styling */

.card-container {
	position: relative;
	width: 100%;
	height: 100%;
	/* open/close size changes are animated in JS (morphCard), this only covers magnet and press */
	transition:
		transform var(--dur-base) var(--ease-out),
		scale var(--dur-fast) var(--ease-out);
	overflow: hidden;
	border-radius: 80px;
}

.card-container:focus-visible {
	outline: .3rem solid var(--accent);
	outline-offset: .3rem;
}

/* touch has no magnet, so give taps a small press instead */
@media (hover: none) {
	.card-container.scroll:not(.active):active {
		scale: .98;
	}
}

.card {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.card-container:hover {
	border-radius: 80px;
	cursor: pointer;
}

.card-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 4rem 3rem;
	z-index: 2;
}

.card-icon img {
	height: 3.5rem;
	transition:
		translate var(--dur-base) var(--ease-out),
		rotate var(--dur-base) var(--ease-out);
}

.work .card-container:not(.active):hover .card-icon img {
	translate: 0 -.4rem;
	rotate: -8deg;
}

.about .card-container:not(.active):hover .card-icon img {
	translate: 0 -.4rem;
	rotate: 8deg;
}

/* soft glow that follows the cursor, position set by startMagnet */
.card-container.scroll::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(30rem circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-color), transparent 70%);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.work .card-container {
	--spot-color: rgb(115 193 198 / .35);
}

.about .card-container {
	--spot-color: rgb(255 255 255 / .5);
}

.card-container.scroll:not(.active):hover::before {
	opacity: 1;
}

.preview-text {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5rem 3rem;
	font-size: var(--header-font-size);
	font-weight: 400;
}

.text-wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate3d(-8%, -50%, 0);
	font-size: var(--header-font-size);
	font-weight: 400;
	white-space: nowrap;
	transition: opacity var(--dur-base) var(--ease-out);
	animation: float-text 30s linear infinite paused;
	opacity: 0;
	padding: 20px 0;
}

/* transform instead of left keeps the marquee off the layout thread */
@keyframes float-text {

	0%,
	100% {
		transform: translate3d(-8%, -50%, 0);
	}

	50% {
		transform: translate3d(-40%, -50%, 0);
	}
}

.card-container:hover .text-wrapper,
.card-container:focus-visible .text-wrapper {
	opacity: 1;
	animation-play-state: running;
}

.card-container.active:hover .text-wrapper,
.card-container.active .text-wrapper {
	opacity: 0;
	z-index: -1;
}

.contact .show-more-details {
	z-index: 2;
	transform: translateY(-1rem);
}

/* buttons reveal one after the other; uses translate so the btn transform stays free for elevation */
.contact .btn {
	opacity: 0;
	translate: 0 -2rem;
}

.contact .btn+.btn {
	transition-delay: 0s, 0s, 60ms, 60ms;
}

.contact .btn:nth-child(3) {
	transition-delay: 0s, 0s, 120ms, 120ms;
}

.contact:hover .btn,
.contact:focus-within .btn {
	opacity: 1;
	translate: 0 0;
}

.contact .card-icon img {
	transition: translate var(--dur-base) var(--ease-out);
}

.contact:hover .card-icon img {
	translate: .6rem 0;
}

/* the buttons take the label's place, so it steps aside instead of overlapping when they wrap */
.contact .card-container .preview-text {
	transition:
		opacity var(--dur-fast) var(--ease-out),
		translate var(--dur-base) var(--ease-out);
}

.contact:hover .card-container .preview-text,
.contact:focus-within .card-container .preview-text {
	opacity: 0;
	translate: 0 1rem;
}

.show-more-details {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--black);
}

.list-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 3rem;
}

.scroller {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-direction: column;
}

.scroller div {
	--default-size: 1.2rem;
	content: ' ';
	width: var(--default-size);
	height: var(--default-size);
	border-radius: 50%;
	background-color: var(--black);
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-out),
		height var(--dur-base) var(--ease-out),
		scale var(--dur-fast) var(--ease-out);
}

.scroller div:hover {
	scale: 1.3;
}

.scroller div:focus-visible {
	outline: .2rem solid var(--accent);
	outline-offset: .3rem;
}

.scroller .selected {
	background-color: var(--accent);
	height: calc(var(--default-size) * 2.5);
	border-radius: var(--default-size);
}

.scale {
	display: none;
	padding: 3rem;
}

.card-container.active .scale {
	gap: 1.5rem;
	display: grid;
	align-items: flex-start;
	color: var(--black);
}

/* content settles in while the card grows, in the same short cascade as the
   contact form, and fades out while it shrinks back. The swoosh title keeps
   its own reveal, a second animation would replace it */
.card-container.active .card-icon,
.card-container.active .scale > :not(.swoosh) {
	animation: field-in var(--dur-base) var(--ease-out) backwards;
}

.card-container.active .card-icon { animation-delay: 80ms; }
.card-container.active .scale > :not(.swoosh):nth-child(1) { animation-delay: 120ms; }
.card-container.active .scale > :not(.swoosh):nth-child(2) { animation-delay: 160ms; }
.card-container.active .scale > :not(.swoosh):nth-child(3) { animation-delay: 200ms; }
.card-container.active .scale > :not(.swoosh):nth-child(n + 4) { animation-delay: 240ms; }

.card-container.active.closing .scale,
.card-container.active.closing .card-icon {
	animation: content-out var(--dur-fast) ease-in forwards;
}

@keyframes content-out {
	100% {
		opacity: 0;
		transform: translateY(.5rem);
	}
}

.scale .oblique {
	font-style: oblique;
	font-size: var(--small-font-size);
	text-indent: 3.5rem;
}

.scale .oblique::first-letter {
	font-size: var(--text-font-size);
}

.scale .italic {
	font-style: italic;
}

.scale .bullet {
	display: flex;
	flex-direction: column;
	font-size: var(--small-font-size);
}

.scale ul {
	gap: 15rem;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	overscroll-behavior: contain;
	scroll-snap-type: y mandatory;
	max-height: var(--expanded-container-height);
}

.scale ul::-webkit-scrollbar {
	display: none;
}

.scale ul li {
	display: flex;
	flex-direction: column;
	padding: 1rem 0;
	border-bottom: .1rem dashed var(--black);
}

.snap-container li {
	opacity: 0;
	filter: blur(.4rem);
	transform: translateX(-3rem);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		filter var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out),
		translate var(--dur-base) var(--ease-out);
}

/* uses translate so it never fights the reveal transform */
.card-container.active .snap-container li:hover {
	translate: .8rem 0;
}

/* text entrance; blur is only used on text, never on whole cards */
.slide-in-blur {
	animation-name: slide-blur;
	animation-duration: var(--dur-slow);
	animation-fill-mode: backwards;
	animation-delay: calc(var(--stagger) * var(--index));
	animation-timing-function: var(--ease-out);
}

@keyframes slide-blur {
	0% {
		opacity: 0;
		filter: blur(.4rem);
		transform: translateX(-3rem);
	}
}

/* card entrance */
.rise-in {
	animation-name: rise-in;
	animation-duration: var(--dur-slow);
	animation-fill-mode: backwards;
	animation-delay: calc(var(--stagger) * var(--index));
	animation-timing-function: var(--ease-out);
}

@keyframes rise-in {
	0% {
		opacity: 0;
		transform: translateY(2rem) scale(.98);
	}
}

.snap-container.slide-blur li {
	--delay-slide: 0;
	opacity: 1;
	filter: blur(0);
	transform: translateX(0);
	transition-delay: calc(var(--delay-slide) * .2s);
}

/* where supported, list items reveal with the scroll position instead of on a threshold */
@supports (animation-timeline: view()) {

	.snap-container li,
	.snap-container.slide-blur li {
		opacity: 1;
		filter: none;
		transform: none;
		transition: translate var(--dur-base) var(--ease-out);
		animation: slide-blur linear both;
		animation-timeline: view();
		/* fully revealed once the item is inside the list; position gives the stagger */
		animation-range: entry 0% entry 100%;
	}
}

.list-container .snap-container {
	--pading: 1rem;
	padding: var(--pading) 0;
	scroll-padding: var(--pading);
}

.scale ul li span:last-of-type {
	color: var(--accent);
}

.scale ul .snap-container {
	scroll-snap-align: center;
	min-block-size: var(--expanded-container-height);
	scroll-snap-stop: always;
}

.scale ul .snap-container.selected {
	opacity: 1;
}

.education-container {
	display: grid;
	gap: 1rem;
	padding: 0 2rem;
	grid-template-columns: repeat(2, 1fr);
}

.contact {
	position: relative;
	container-type: inline-size;
}

/* custom styling for nav items */

/* services */

.services .card-container {
	background: var(--blue-bg);
	color: var(--blue-fg);
}

.card-title {
	font-size: var(--text-font-size);
	font-weight: 400;
}

.intro-text {
	font-size: var(--intro-font-size);
	padding: var(--card-container-padding);
	position: relative;
	color: var(--blue-fg);
	letter-spacing: -.03em;
	line-height: 0.9;
	/* line-height: calc(100% + 2.5rem); */
}

.card-logo.animate {
	animation: fadein var(--dur-slow) var(--ease-out) calc(var(--stagger) * 4) backwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
}

/* load order: cards first, then the intro text inside services */
.services {
	--index: 0;
}

.work {
	--index: 1;
}

.about {
	--index: 2;
}

.contact {
	--index: 3;
}

.card-logo {
	display: flex;
	justify-content: space-between;
	padding: 5rem;
}

.card-title {
	font-size: var(--header-font-size);
}

.card-logo img {
	height: 4rem;
}

/* shapes container */

.shapes-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: end;
	padding: 3rem;
}

.shapes {
	width: 15vh;
	height: 15vh;
	animation: round_round 12s linear infinite;
}

#square {
	position: relative;
	top: 0;
	left: 50%;
	width: 50px;
	height: 50px;
	background: var(--floating-icons);
	animation: round_round 12s linear infinite;
	transition:
		background-color var(--dur-fast) ease-out,
		border-bottom-color var(--dur-fast) ease-out,
		translate var(--dur-slow) var(--ease-out);
}

#circle {
	position: relative;
	left: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	background: var(--floating-icons);
	border-radius: 50%;
	transition:
		background-color var(--dur-fast) ease-out,
		border-bottom-color var(--dur-fast) ease-out,
		translate var(--dur-slow) var(--ease-out);
}

#triangle {
	position: relative;
	top: -10%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 50px solid var(--floating-icons);
	animation: round_round 12s linear infinite;
	transition:
		background-color var(--dur-fast) ease-out,
		border-bottom-color var(--dur-fast) ease-out,
		translate var(--dur-slow) var(--ease-out);
}

.card-container:hover #square {
	background: var(--white);
	translate: 1.5rem -1rem;
}

.card-container:hover #circle {
	background: var(--pink-bg);
	translate: -1.5rem .5rem;
}

.card-container:hover #triangle {
	border-bottom: 50px solid var(--cyan);
	translate: 1rem 1.5rem;
}

@keyframes round_round {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* work */

.work .card-container {
	background: var(--white);
}

.work .preview-text,
.work .card-icon {
	color: var(--black);
}

.work .preview-text,
.about .preview-text,
.contact .preview-text {
	transition: color var(--dur-fast) var(--ease-out);
}

.work .card-container:hover .preview-text {
	color: var(--white);
}

.work .card-container:hover .text-wrapper {
	color: var(--black);
}

.work .active .preview-text,
.about .active .preview-text {
	display: none;
}

/* about */

.about .card-container {
	background: var(--pink-bg);
	color: var(--black);
}

.about .card-container:hover .preview-text {
	color: var(--pink-bg);
}

/* contact */

.contact .card-container {
	background: var(--cyan);
	width: 100%;
}

.contact .preview-text,
.contact .card-icon {
	color: var(--black);
}

.contact .card-container:hover .text-wrapper {
	color: var(--black);
}

.work,
.about,
.services {
	position: relative;
	z-index: 1;
}

.card-container {
	position: absolute;
	z-index: 1;
}

.work .card-container,
.about .card-container {
	right: 0;
}

.nav-item {
	transition: opacity var(--dur-base) var(--ease-out);
}

.work:has(.active),
.about:has(.active) {
	z-index: 3;
	transition:
		z-index .0s cubic-bezier(1, 0, 1, 0),
		opacity var(--dur-base) var(--ease-out);
}

.work,
.about {
	transition:
		z-index .3s cubic-bezier(1, 0, 1, 0),
		opacity var(--dur-base) var(--ease-out);
}

/* dim the other cards while one is open */
.nav-container:has(.card-container.active:not(.closing)) .nav-item:not(:has(.card-container.active)) {
	opacity: .35;
}

.work .active,
.about .active {
	width: max(30vw, 45rem);
	right: 0;
	top: 0;
	bottom: 0;
	left: 0;
	height: max(30vw, 55rem);
	z-index: 1000;
	/* same roundness as the cards */
	border-radius: 4rem;
}

.work .active {
	transform: translateX(-50%);
}

.about .active {
	transform: translateY(-41%) translateX(-50%);
}

.work .active .card-icon,
.about .active .card-icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	bottom: unset;
	right: unset;
	padding: 4rem 4rem 0 4rem;
	position: relative;
}

/* shared by the card close and the contact pill close so they look the same */
.close,
.close-dialog {
	display: grid;
	place-items: center;
	padding: .6rem;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	z-index: 2;
	transition:
		transform var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.close img,
.close-dialog img {
	height: 3.5rem;
	pointer-events: none;
}

.close:hover,
.close:focus-visible,
.close-dialog:hover,
.close-dialog:focus-visible {
	transform: rotate(90deg);
	background-color: var(--black);
	outline: none;
}

.close:hover img,
.close:focus-visible img,
.close-dialog:hover img,
.close-dialog:focus-visible img {
	filter: invert(100%);
}

.work .card-icon .card-title,
.work .card-icon .close,
.about .card-icon .close,
.about .card-icon .card-title {
	display: none;
}

/* open header matches the contact dialog: title on the left, close on the right */
.work .active .card-icon .card-title,
.about .active .card-icon .card-title {
	display: block;
	font-weight: 400;
}

.work .active .card-icon > img,
.about .active .card-icon > img {
	display: none;
}

.work .active .card-icon .close,
.about .active .card-icon .close {
	display: grid;
}

.card-container>* {
	pointer-events: none;
}

.card-container.active>* {
	pointer-events: unset;
}

/*Buttons*/
.button-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	/* sized to the contact card, not the viewport */
	gap: clamp(1rem, 3cqi, 3rem);
	padding: 0 2rem;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.btn {
	all: unset;
	--offset-elevation: 0;
	box-sizing: border-box;
	color: var(--black);
	font-weight: 600;
	border-radius: 8rem;
	border: .2rem solid var(--black);
	padding: .75rem clamp(1.5rem, 5cqi, 5.5rem);
	white-space: nowrap;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		opacity var(--dur-base) var(--ease-out),
		translate var(--dur-base) var(--ease-out);
	z-index: 1;
	cursor: pointer;
	box-shadow: calc(var(--offset-elevation) * -1) var(--offset-elevation) 0 0 var(--black);
	transform: translate(var(--offset-elevation), calc(var(--offset-elevation) * -1));
}

.btn:hover {
	--offset-elevation: .5rem;
}

.btn:active {
	--offset-elevation: 0;
	transition-duration: 80ms;
}

.btn:focus-visible {
	outline: .2rem solid var(--black);
	outline-offset: .4rem;
}

/* contact pill, ported from the eSPV action pill: one surface that changes
   shape instead of being replaced. Its width follows the message and the
   buttons, it opens upwards into the form, messages slide through the row and
   a tint lights up at the moments that matter. main.js measures the content
   and writes the width and height; CSS only animates them */

.contact-pill {
	--pill-row: 5.6rem;
	--pill-inset: 2rem;
	position: fixed;
	inset-inline: 1.6rem;
	bottom: calc(1.6rem + env(safe-area-inset-bottom));
	z-index: 900;
	display: flex;
	justify-content: center;
	pointer-events: none;
	transition:
		translate var(--dur-morph) var(--ease-out),
		opacity var(--dur-morph) var(--ease-out);
}

/* until the first measurement the width is unknown: hidden, not jumping */
.contact-pill:not(.measured) {
	visibility: hidden;
}

/* rises in after the cards; `backwards`, so no transform is left behind */
.contact-pill.measured {
	animation: pill-rise var(--dur-base) var(--ease-out) calc(var(--stagger) * 5) backwards;
}

/* steps below the screen edge while a card is open */
.contact-pill.away {
	translate: 0 calc(100% + 2.4rem);
	opacity: 0;
}

@keyframes pill-rise {
	0% {
		opacity: 0;
		transform: translateY(.8rem) scale(.98);
	}
}

.pill-surface {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: var(--pill-row);
	border: .2rem solid var(--black);
	border-radius: calc(var(--pill-row) / 2);
	background: var(--cyan);
	color: var(--black);
	font-size: var(--small-font-size);
	pointer-events: auto;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / .5),
		0 1.2rem 3.2rem -1rem rgb(0 0 0 / .6);
	transition:
		width var(--dur-morph) var(--ease-out),
		height var(--dur-morph) var(--ease-out),
		border-radius var(--dur-morph) var(--ease-out);
}

.pill-surface:is([data-state="open"], [data-state="menu"]) {
	border-radius: 3.2rem;
}

/* the panel holds the menu or the form; data-panel stays on the last one
   while the pill folds, so it doesn't empty out as it closes */
.pill-surface:not([data-panel="menu"]) .pill-menu-content,
.pill-surface[data-panel="menu"] .pill-panel-content {
	display: none;
}

.pill-menu-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.2rem;
	padding: 2.4rem 2rem 2rem;
}

.pill-surface[data-state="menu"] .pill-menu-content > * {
	animation: field-in var(--dur-base) var(--ease-out) backwards;
}

.pill-surface[data-state="menu"] .pill-menu-content > :nth-child(1) { animation-delay: 80ms; }
.pill-surface[data-state="menu"] .pill-menu-content > :nth-child(2) { animation-delay: 120ms; }
.pill-surface[data-state="menu"] .pill-menu-content > :nth-child(3) { animation-delay: 160ms; }

/* the arrow points up at what it opens, and turns down to fold it */
.pill-actions .pill-menu {
	display: grid;
	place-items: center;
	padding: .6rem 1.4rem;
}

.pill-menu img {
	height: 2.4rem;
	rotate: 180deg;
	transition: rotate var(--dur-morph) var(--ease-out);
}

.pill-surface[data-state="menu"] .pill-menu img {
	rotate: 0deg;
}

/* the form sits above the row and fades with the opening */
.pill-panel {
	position: absolute;
	inset: 0 0 var(--pill-row);
	overflow: auto;
	opacity: 0;
	transition: opacity var(--dur-morph) var(--ease-out);
}

.pill-surface:is([data-state="open"], [data-state="menu"]) .pill-panel {
	opacity: 1;
	/* a divider that takes no room, so the panel's height stays exact */
	box-shadow: 0 .2rem 0 rgb(0 0 0 / .15);
}

.pill-panel-content {
	display: grid;
	gap: 1.6rem;
	padding: 2.4rem 2.4rem 2rem;
}

/* fields settle in once there is room for them, in a short cascade */
.pill-surface[data-state="open"] .pill-panel-content > * {
	animation: field-in var(--dur-base) var(--ease-out) backwards;
}

.pill-surface[data-state="open"] .pill-header { animation-delay: 80ms; }
.pill-surface[data-state="open"] .pill-panel-content > label:nth-of-type(1) { animation-delay: 120ms; }
.pill-surface[data-state="open"] .pill-panel-content > label:nth-of-type(2) { animation-delay: 160ms; }
.pill-surface[data-state="open"] .pill-panel-content > label:nth-of-type(3) { animation-delay: 200ms; }

@keyframes field-in {
	0% {
		opacity: 0;
		transform: translateY(.6rem);
	}
}

.pill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.pill-header h2 {
	font-weight: 400;
}

.pill-panel label {
	display: grid;
	gap: .6rem;
	font-weight: 600;
}

.pill-panel input,
.pill-panel textarea {
	font: inherit;
	font-weight: 400;
	color: var(--black);
	background: rgb(255 255 255 / .4);
	border: .2rem solid var(--black);
	border-radius: 1.6rem;
	padding: 1rem 1.4rem;
	resize: vertical;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		translate var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

/* focused field lifts with the same offset shadow as the buttons */
.pill-panel input:focus-visible,
.pill-panel textarea:focus-visible {
	outline: none;
	background: rgb(255 255 255 / .7);
	translate: .4rem -.4rem;
	box-shadow: -.4rem .4rem 0 0 var(--black);
}

/* the row: message on the left, buttons on the right */
.pill-row {
	position: absolute;
	inset: auto 0 0;
	height: var(--pill-row);
}

.pill-status > span {
	position: absolute;
	top: 0;
	left: var(--pill-inset);
	max-width: var(--message-max, none);
	height: var(--pill-row);
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* messages don't swap in place: the old one leaves upwards, the new one comes
   in from below, a row apart, and the surface clips what overflows */
.pill-status > .message-in {
	animation: message-in var(--dur-morph) var(--ease-out) both;
}

.pill-status > .message-out {
	animation: message-out var(--dur-morph) var(--ease-out) both;
}

@keyframes message-in {
	0% {
		opacity: 0;
		translate: 0 var(--pill-row);
	}
}

@keyframes message-out {
	100% {
		opacity: 0;
		translate: 0 calc(var(--pill-row) * -1);
	}
}

/* both buttons share one spot; only the one for the current state shows */
.pill-actions {
	position: absolute;
	top: 0;
	right: .4rem;
	height: var(--pill-row);
	display: grid;
	align-items: center;
}

.pill-actions .btn {
	grid-area: 1 / 1;
	justify-self: end;
	padding: .75rem 2rem;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		opacity var(--dur-morph) var(--ease-out),
		scale var(--dur-morph) var(--ease-out);
}

.pill-actions .btn[inert] {
	opacity: 0;
	scale: .96;
}

/* marks a moment (sending, sent, failed): a tint that lights up from the
   bottom and fades by itself; the element is replaced to replay it */
.pill-bloom {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	animation: bloom 1.5s ease-out forwards;
}

.pill-bloom[data-tint="pending"] {
	background: radial-gradient(150% 260% at 50% 140%, rgb(229 100 13 / .45), transparent 72%);
}

.pill-bloom[data-tint="success"] {
	background: radial-gradient(150% 260% at 50% 140%, rgb(255 255 255 / .75), transparent 72%);
}

.pill-bloom[data-tint="danger"] {
	background: radial-gradient(150% 260% at 50% 140%, rgb(220 38 38 / .5), transparent 72%);
}

@keyframes bloom {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* media queries */

@media (max-width: 600px) {
	.nav-container {
		height: unset;
	}

	.nav-container {
		margin-bottom: 2rem;
	}

	.card-container {
		border-radius: 2rem;
	}

	.card-container:hover {
		border-radius: 2rem;
	}

	.card-logo {
		padding: var(--card-container-padding);
	}

	.work .card-container,
	.about .card-container {
		min-width: 0;
		min-height: 0;
		bottom: unset;
		left: unset;
	}

	/* opens from its tile into a floating sheet shaped like the open contact
	   pill: inset from the edges, bordered, its title row at the bottom */
	.about .card-container.active,
	.work .card-container.active {
		position: fixed;
		inset: auto 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
		width: auto;
		height: auto;
		min-width: 0;
		min-height: 0;
		max-height: calc(100dvh - 6.4rem);
		transform: none;
		display: flex;
		border: .2rem solid var(--black);
		border-radius: 3.2rem;
		box-shadow:
			inset 0 1px 0 rgb(255 255 255 / .5),
			0 1.2rem 3.2rem -1rem rgb(0 0 0 / .6);
		z-index: 1000;
	}

	.work .card-container.active .card,
	.about .card-container.active .card {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 0;
	}

	.work .card-container.active .scale,
	.about .card-container.active .scale {
		min-height: 0;
		/* the list scrolls itself; items slide in and nudge sideways on hover,
		   which must not turn into a scrollbar here */
		overflow: hidden;
		padding: 2.4rem 2rem 1.6rem;
	}

	/* the header becomes the pill's row: title on the left, close on the right */
	.work .card-container.active .card-icon,
	.about .card-container.active .card-icon {
		order: 2;
		flex: none;
		height: 5.6rem;
		padding: 0 .4rem 0 2rem;
		/* a divider that takes no room, like the pill's */
		box-shadow: 0 -.2rem 0 rgb(0 0 0 / .15);
	}

	.work .card-container.active .card-icon > img,
	.about .card-container.active .card-icon > img {
		display: none;
	}

	.work .card-container.active .card-title,
	.about .card-container.active .card-title {
		font-size: var(--small-font-size);
	}

	/* round, so its turn on hover and focus stays inside its outline */
	.work .card-container.active .close,
	.about .card-container.active .close {
		box-sizing: border-box;
		width: 4.4rem;
		height: 4.4rem;
		margin-right: .4rem;
		padding: 0;
		border: .2rem solid var(--black);
	}

	.work .card-container.active .close img,
	.about .card-container.active .close img {
		height: 2.4rem;
	}

	.contact .card-container {
		width: 100%;
	}

	.contact .show-more-details,
	.contact:hover .show-more-details {
		transform: translateY(0);
	}

	.contact .btn {
		opacity: 1;
		translate: 0 0;
	}

	.services .card-container {
		width: 100%;
		height: 100%;
	}

	.services .card-container .card {
		display: flex;
		gap: 2rem;
		padding: 2rem 0;
		flex-direction: column;
	}

	.shapes-container {
		display: none;
	}

	.hide .preview-text,
	.hide .card-icon {
		display: none !important;
	}

	.btn {
		padding: .75rem 1.5rem;
	}

}

/* reduced motion */

@media (prefers-reduced-motion: reduce) {
	html,
	body {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after,
	.nav-item .card-container,
	.nav-item .card-container.active {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.snap-container li {
		animation: none !important;
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}