/* =========================================================================
   HNZ Constructions — motion

   Progressive enhancement for the opening hero, section loading line,
   scroll reveals and dynamically loaded project tiles. JavaScript adds the
   motion hooks; without JavaScript, or with reduced motion enabled, content
   remains visible and static.
   ========================================================================= */

/* Opening hero --------------------------------------------------------- */

.motion-enabled .is-hero-revealed .hero__media,
.motion-enabled .is-hero-revealed .page-hero__media {
	animation: hnz-hero-wipe 720ms cubic-bezier(0.77, 0, 0.18, 1) both;
}

.motion-enabled .is-hero-revealed .hero__image,
.motion-enabled .is-hero-revealed .page-hero__image {
	animation: hnz-hero-image 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.motion-enabled .is-hero-revealed .hero__heading,
.motion-enabled .is-hero-revealed .page-hero__heading {
	animation: hnz-hero-copy 700ms 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.motion-enabled .is-hero-revealed .hero__content .arrow-link {
	animation: hnz-hero-copy 650ms 470ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Section loading line ------------------------------------------------- */

.home-v2-about,
.home-v2-projects {
	position: relative;
}

.section-loader {
	position: absolute;
	top: 0;
	left: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
	z-index: 4;
	width: clamp(72px, 8vw, 120px);
	height: 2px;
	overflow: hidden;
	background: rgb(51 49 50 / 14%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}

.section-loader__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: currentcolor;
	transform: translateX(-105%);
}

.motion-enabled [data-section-reveal].is-loading .section-loader {
	opacity: 1;
}

.motion-enabled [data-section-reveal].is-loading .section-loader__bar {
	animation: hnz-section-loading 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

.motion-enabled [data-section-reveal].section--divider::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-enabled [data-section-reveal].is-revealed.section--divider::before {
	transform: scaleX(1);
}

/* Staggered section content -------------------------------------------- */

.motion-enabled [data-section-reveal] [data-motion-item] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--motion-order, 0) * 65ms);
	will-change: opacity, transform;
}

.motion-enabled [data-section-reveal] [data-motion-item].about-split__media--small,
.motion-enabled [data-section-reveal] [data-motion-item].text-columns__lead,
.motion-enabled [data-section-reveal] [data-motion-item].service__lead {
	transform: translate3d(-24px, 18px, 0);
}

.motion-enabled [data-section-reveal] [data-motion-item].about-split__media--large,
.motion-enabled [data-section-reveal] [data-motion-item].text-columns__body,
.motion-enabled [data-section-reveal] [data-motion-item].service__body,
.motion-enabled [data-section-reveal] [data-motion-item].contact__media {
	transform: translate3d(24px, 18px, 0);
}

.motion-enabled [data-section-reveal] [data-motion-item].tile {
	transform: translate3d(0, 20px, 0) scale(0.975);
}

.motion-enabled [data-section-reveal] [data-motion-item].clients__item {
	transform: translate3d(0, 12px, 0) scale(0.92);
}

.motion-enabled [data-section-reveal].is-revealed [data-motion-item] {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (max-width: 767px) {
	.motion-enabled [data-section-reveal] [data-motion-item].about-split__media--small,
	.motion-enabled [data-section-reveal] [data-motion-item].text-columns__lead,
	.motion-enabled [data-section-reveal] [data-motion-item].service__lead {
		transform: translate3d(-14px, 18px, 0);
	}

	.motion-enabled [data-section-reveal] [data-motion-item].about-split__media--large,
	.motion-enabled [data-section-reveal] [data-motion-item].text-columns__body,
	.motion-enabled [data-section-reveal] [data-motion-item].service__body,
	.motion-enabled [data-section-reveal] [data-motion-item].contact__media {
		transform: translate3d(14px, 18px, 0);
	}

	.motion-enabled [data-section-reveal].is-revealed [data-motion-item] {
		transform: none;
	}
}

/* Media and dynamically inserted projects ----------------------------- */

.about-split__media,
.text-columns__media,
.service__media,
.service__detail-media,
.contact__media,
.project-gallery__item,
.section--media-text__media {
	overflow: hidden;
}

.motion-enabled .tile.is-entering {
	animation: hnz-tile-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--motion-order, 0) * 65ms);
}

@media (hover: hover) {
	.about-split__media img,
	.text-columns__media img,
	.service__media img,
	.service__detail-media img,
	.contact__media img,
	.project-gallery__item img,
	.section--media-text__media img {
		transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.about-split__media:hover img,
	.text-columns__media:hover img,
	.service__media:hover img,
	.service__detail-media:hover img,
	.contact__media:hover img,
	.project-gallery__item:hover img,
	.section--media-text__media:hover img {
		transform: scale(1.025);
	}
}

@keyframes hnz-hero-wipe {
	from {
		clip-path: inset(0 10% 0 0);
		opacity: 0.72;
		transform: translateX(18px);
	}
	to {
		clip-path: inset(0);
		opacity: 1;
		transform: none;
	}
}

@keyframes hnz-hero-image {
	from { transform: scale(1.045); }
	to { transform: scale(1); }
}

@keyframes hnz-hero-copy {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hnz-section-loading {
	from { transform: translateX(-105%); }
	to { transform: translateX(0); }
}

@keyframes hnz-tile-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-loader {
		display: none;
	}

	.motion-enabled [data-section-reveal] [data-motion-item],
	.motion-enabled [data-section-reveal].section--divider::before,
	.motion-enabled .tile.is-entering {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}