/* Served as-is so the bundler cannot rewrite view() / scroll() / animation-range.
   Higher specificity + this file loads last so base.css cannot reset position.
   scroll(root) is required: overflow on .hero would otherwise own the timeline.
   Animate the pieces inside a section (heads, cards, steps). Whole-section
   fades read as nothing on paper-on-paper. */

:root {
	--rise-ease: linear(
		0,
		0.006 2.8%,
		0.101 6.1%,
		0.378 14.9%,
		0.701 24.6%,
		0.88 31.2%,
		0.981 38.1%,
		1.037 45.8%,
		1.051 52.1%,
		1.034 61.5%,
		1.006 73.2%,
		0.998 86.4%,
		1
	);
}

@keyframes hero-slam {
	from {
		opacity: 0;
		translate: 0 5.75rem;
		scale: 0.82;
	}

	to {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

@keyframes photo-in {
	from {
		transform: scale(1.58) translateY(5.5rem);
	}

	to {
		transform: scale(1) translateY(0);
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		translate: 0 3.25rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes fade-left {
	from {
		opacity: 0;
		translate: -2.75rem 1.25rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes fade-right {
	from {
		opacity: 0;
		translate: 2.75rem 1.25rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes clip-rise {
	from {
		opacity: 0;
		clip-path: inset(78% 0 0 0);
		translate: 0 1.5rem;
	}

	to {
		opacity: 1;
		clip-path: inset(0);
		translate: none;
	}
}

@keyframes scale-in {
	from {
		opacity: 0;
		scale: 0.9;
		translate: 0 1.75rem;
	}

	to {
		opacity: 1;
		scale: none;
		translate: none;
	}
}

@keyframes drift-out {
	from {
		opacity: 1;
		filter: none;
	}

	to {
		opacity: 0.28;
		translate: 0 -1.35rem;
		filter: saturate(0.85);
	}
}

@keyframes mosaic-in {
	from {
		opacity: 0;
		clip-path: inset(10% 7% 14% 7%);
		scale: 0.96;
	}

	to {
		opacity: 1;
		clip-path: inset(0);
		scale: none;
	}
}

@keyframes mosaic-in-left {
	from {
		opacity: 0;
		clip-path: inset(8% 16% 8% 0);
	}

	to {
		opacity: 1;
		clip-path: inset(0);
	}
}

@keyframes mosaic-in-right {
	from {
		opacity: 0;
		clip-path: inset(8% 0 8% 16%);
	}

	to {
		opacity: 1;
		clip-path: inset(0);
	}
}

@keyframes timeline-draw {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

@keyframes timeline-node {
	from {
		opacity: 0;
		scale: 0.08;
	}

	to {
		opacity: 1;
		scale: none;
	}
}

@keyframes timeline-from-left {
	from {
		opacity: 0;
		translate: -2.5rem 0;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes timeline-from-right {
	from {
		opacity: 0;
		translate: 2.5rem 0;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes icon-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes result-pop {
	from {
		opacity: 0;
		translate: 0 0.85rem;
		scale: 0.96;
	}

	to {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

@keyframes header-inner-compact {
	from {
		min-height: var(--header-inner-h);
	}

	to {
		min-height: var(--header-h);
	}
}

@keyframes logo-compact {
	from {
		height: var(--header-logo);
	}

	to {
		height: var(--header-logo-compact);
	}
}

@keyframes call-compact {
	from {
		min-height: 2.4rem;
	}

	to {
		min-height: 2.15rem;
	}
}

@keyframes pin-drop {
	from {
		opacity: 0;
		translate: 0 -2.85rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes pin-pulse {
	from {
		transform: scale(0.45);
		opacity: 0.42;
	}

	to {
		transform: scale(2.55);
		opacity: 0;
	}
}

@keyframes cover-in {
	from {
		opacity: 0;
		transform: scale(0.86);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lake-in {
	from {
		opacity: 0;
		translate: 0 -0.85rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@keyframes map-label-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes lockup-in {
	from {
		opacity: 0;
		translate: 0.6rem 0;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.card:has(.card-img),
	.about-visual,
	.job-tile {
		overflow: clip;
	}

	@supports (animation-timeline: scroll()) {
		.header-inner {
			animation-name: header-inner-compact;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
			animation-range: 0 5.5rem;
		}

		.logo img {
			animation-name: logo-compact;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
			animation-range: 0 5.5rem;
		}

		.header-call {
			animation-name: call-compact;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
			animation-range: 0 5.5rem;
		}
	}

	.area-art-pin-pulse {
		animation: pin-pulse 2.15s ease-out infinite;
	}

	.hero .hero-alert,
	.hero .eyebrow,
	.hero h1,
	.hero .lead,
	.hero .cluster {
		animation-name: hero-slam;
		animation-duration: 1.2s;
		animation-timing-function: var(--rise-ease);
		animation-fill-mode: both;
	}

	.hero .eyebrow {
		animation-delay: 0.08s;
	}

	.hero h1 {
		animation-delay: 0.16s;
	}

	.hero .lead {
		animation-delay: 0.26s;
	}

	.hero .cluster {
		animation-delay: 0.36s;
	}

	.area-result:not([hidden]) {
		animation: result-pop 0.48s var(--rise-ease) both;
	}

	.timeline::after {
		box-shadow: 0 0 14px color-mix(in srgb, var(--color-ember) 70%, transparent);
	}

	.timeline-icon path {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}

	@supports (animation-timeline: view()) {
		.when-mark-logo {
			animation-name: lockup-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 0% cover 38%;
		}

		.section-head > *,
		.cta-band .wrap > :not(.cluster),
		.area-legend,
		.job-filters {
			animation-name: fade-up, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 16% cover 46%, exit 0% exit 78%;
		}

		.section-head > :nth-child(2),
		.cta-band .wrap > :nth-child(2):not(.cluster) {
			animation-range: entry 24% cover 52%, exit 0% exit 78%;
		}

		.section-head > :nth-child(3),
		.section-head > :nth-child(4),
		.cta-band .wrap > :nth-child(3):not(.cluster),
		.cta-band .wrap > :nth-child(4):not(.cluster) {
			animation-range: entry 32% cover 58%, exit 0% exit 78%;
		}

		.cta-band .cluster {
			animation-name: fade-up, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 20% cover 50%, exit 8% exit 85%;
		}

		#when .section-head > * {
			animation-name: clip-rise, drift-out;
			animation-range: entry 0% entry 80%, exit 0% exit 78%;
		}

		#when .section-head > :nth-child(2) {
			animation-range: entry 8% entry 88%, exit 0% exit 78%;
		}

		#when .section-head > :nth-child(3) {
			animation-range: entry 16% entry 96%, exit 0% exit 78%;
		}

		#why .section-head > * {
			animation-name: fade-left, drift-out;
		}

		#experience .section-head > * {
			animation-name: fade-up, drift-out;
		}

		#services .section-head > * {
			animation-name: scale-in, drift-out;
		}

		#about .stack-section > *:not(:has(.btn)) {
			animation-name: fade-right, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 18% cover 50%, exit 0% exit 78%;
		}

		#about .stack-section > :nth-child(2) {
			animation-range: entry 26% cover 56%, exit 0% exit 78%;
		}

		#about .stack-section > :nth-child(3):not(:has(.btn)) {
			animation-range: entry 34% cover 62%, exit 0% exit 78%;
		}

		#about .stack-section > :has(.btn) {
			animation-name: fade-up, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 12% cover 42%, exit 12% exit 88%;
		}

		#service-area .section-head > * {
			animation-name: fade-up, drift-out;
		}

		#on-the-job .section-head > * {
			animation-name: fade-up, drift-out;
		}

		.cta-band .wrap > :not(.cluster) {
			animation-name: fade-up, drift-out;
		}

		#why .card:nth-child(odd) {
			animation-name: fade-left, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 18% cover 52%, exit 0% exit 80%;
		}

		#why .card:nth-child(even) {
			animation-name: fade-right, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 26% cover 58%, exit 0% exit 80%;
		}

		#services .card,
		.grid-cards > .card {
			animation-name: scale-in, drift-out;
			animation-duration: 1s, 0.85s;
			animation-timing-function: linear, linear;
			animation-fill-mode: both, both;
			animation-timeline: view(), view();
			animation-range: entry 18% cover 52%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(2) {
			animation-range: entry 28% cover 58%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(3) {
			animation-range: entry 22% cover 54%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(4) {
			animation-range: entry 34% cover 62%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(5) {
			animation-range: entry 26% cover 56%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(6) {
			animation-range: entry 38% cover 66%, exit 0% exit 80%;
		}

		.grid-cards > .card:nth-child(7) {
			animation-range: entry 30% cover 60%, exit 0% exit 80%;
		}

		.area-form {
			animation-name: scale-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 12% cover 48%;
		}

		.area-art-lake {
			animation-name: lake-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 8% cover 38%;
		}

		.area-art-cover {
			animation-name: cover-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 14% cover 46%;
		}

		.area-art-water-label,
		.area-art-place {
			animation-name: map-label-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 22% cover 50%;
		}

		.area-art-pin-drop {
			animation-name: pin-drop;
			animation-duration: 1s;
			animation-timing-function: var(--rise-ease);
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 26% cover 54%;
		}

		.job-tile {
			animation-name: mosaic-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 0% cover 28%;
		}

		.job-tile:nth-child(3n + 2) {
			animation-name: mosaic-in-left;
			animation-range: entry 4% cover 32%;
		}

		.job-tile:nth-child(3n) {
			animation-name: mosaic-in-right;
			animation-range: entry 8% cover 36%;
		}

		.job-tile:nth-child(4) {
			animation-range: entry 2% cover 30%;
		}

		.job-tile:nth-child(5) {
			animation-range: entry 6% cover 34%;
		}

		.job-tile:nth-child(6) {
			animation-range: entry 10% cover 38%;
		}

		.timeline::after {
			animation-name: timeline-draw;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: cover 8% cover 90%;
		}

		.timeline-n {
			animation-name: timeline-node;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 20% cover 55%;
		}

		.timeline-card {
			animation-name: timeline-from-right;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 22% cover 58%;
		}

		@media (min-width: 52rem) {
			.timeline > li:nth-child(odd) .timeline-card {
				animation-name: timeline-from-left;
			}
		}

		.timeline-icon path {
			animation-name: icon-draw;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 28% cover 62%;
		}

		.card-img,
		.about-img {
			animation-name: photo-in;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 20% cover 55%;
		}

		form.contact {
			animation-name: fade-up;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 10% cover 42%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	main > .hero,
	main > .section,
	main > .cta-band {
		position: relative;
		z-index: auto;
		box-shadow: none;
	}

	.hero .wrap,
	.hero-img,
	.hero-alert,
	.hero .eyebrow,
	.hero h1,
	.hero .lead,
	.hero .cluster,
	.section-head > *,
	.card,
	.timeline::after,
	.timeline-n,
	.timeline-card,
	.timeline-icon path,
	.job-tile,
	.job-filters,
	.about-split > .stack-section > *,
	.cta-band .wrap > *,
	.area-form,
	.area-art,
	.area-art-lake,
	.area-art-cover,
	.area-art-water-label,
	.area-art-place,
	.area-art-pin-drop,
	.area-art-pin-pulse,
	.area-legend,
	.area-result,
	.card-img,
	.about-img,
	.job-tile img,
	header.site-header,
	.header-inner,
	.logo img,
	.header-call,
	form.contact {
		animation: none !important;
		opacity: 1;
		translate: none;
		scale: none;
		rotate: none;
		transform: none;
		clip-path: none;
		filter: none;
		stroke-dashoffset: 0;
	}

	.when-mark-logo {
		animation: none !important;
		opacity: 1;
		translate: none;
	}
}