/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

.ut-scroll-reveal {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 1.8s var(--ut-ease-out-expo),
	            transform 1.8s var(--ut-ease-out-expo);
}

.ut-scroll-reveal.ut-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger child animations within visible sections */
.ut-visible .ut-usps__item,
.ut-visible .ut-project-card,
.ut-visible .ut-about-services__list {
	opacity: 0;
	transform: translateY(1.5rem);
	animation: ut-fade-in 0.6s var(--ut-ease-out-expo) forwards;
}

.ut-visible .ut-usps__item:nth-child(1) { animation-delay: 0.8s; }

.ut-visible .ut-usps__item:nth-child(2) { animation-delay: 1s; }

.ut-visible .ut-usps__item:nth-child(3) { animation-delay: 1.2s; }

.ut-visible .ut-usps__item:nth-child(4) { animation-delay: 1.4s; }

.ut-visible .ut-project-card:nth-child(1),
.ut-visible .ut-about-services__list:nth-child(1) { animation-delay: 0.1s; }

.ut-visible .ut-project-card:nth-child(2),
.ut-visible .ut-about-services__list:nth-child(2) { animation-delay: 0.2s; }

.ut-visible .ut-project-card:nth-child(3),
.ut-visible .ut-about-services__list:nth-child(3) { animation-delay: 0.3s; }


@keyframes ut-fade-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ut-process-body-tighten {
	from {
		padding-top: calc( 2 * var(--ut-gutter) );
	}
	to {
		padding-top: 0.5rem;
	}
}

@keyframes ut-process-title-tighten {
	from {
		padding-top: calc( 2 * var(--ut-gutter) );
		/* margin-bottom: 1.05em; */
	}
	to {
		padding-top: 0.15rem;
		/* margin-bottom: 0.7em; */
	}
}

@keyframes ut-process-title-line-fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes ut-hero-image-frame-in {
	from {
		clip-path: inset(8% 5% 10% 5% round 1rem);
	}
	to {
		clip-path: inset(0 round 0);
	}
}

@keyframes ut-hero-image-media-in {
	from {
		transform: scale(1.08);
		filter: saturate(0.92) contrast(1.03);
	}
	to {
		transform: scale(1);
		filter: saturate(1) contrast(1);
	}
}

@keyframes ut-hero-image-sheen {
	0% {
		opacity: 0;
		transform: translateX(-6%);
	}
	25% {
		opacity: 0.2;
	}
	100% {
		opacity: 0;
		transform: translateX(6%);
	}
}

@keyframes ut-contact-word-in-left {
	from {
		opacity: 0;
		transform: translate3d(-2rem, 0.75rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ut-contact-word-in-right {
	from {
		opacity: 0;
		transform: translate3d(2rem, 0.75rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ut-project-glow-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(1.2rem, -1rem, 0) scale(1.06);
	}
}

@keyframes ut-scroll-nudge {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(100%);
	}
}

/* ==========================================================================
   Hero Reveal Animation
   ========================================================================== */

.ut-hero__word {
	opacity: 0;
	transform: translateY(1em);
	transition: opacity 0.7s var(--ut-ease-out-expo),
	            transform 0.7s var(--ut-ease-out-expo);
}

.ut-hero__line {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s var(--ut-ease-out-expo) 0.3s;
}

.ut-hero--revealed .ut-hero__word:first-child {
	opacity: 1;
	transform: translateY(0);
}

.ut-hero--revealed .ut-hero__word:last-child {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}

.ut-hero--revealed .ut-hero__line {
	transform: scaleX(1);
}

/* ==========================================================================
   Parallax Image
   ========================================================================== */

.ut-parallax {
	overflow: hidden;
}

.ut-parallax img {
	will-change: transform;
	transition: transform 0.1s linear;
}

/* ==========================================================================
   Single Project — Cinematic Scroll Animations
   ========================================================================== */

/* Override generic scroll-reveal for sections with custom animations */

.ut-projects-grid.ut-scroll-reveal,
.ut-project-single__hero.ut-scroll-reveal,
.ut-project-single__media.ut-scroll-reveal,
.ut-project-single__content-wrap.ut-scroll-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Hero supporting content fades in after title */

@keyframes ut-project-element-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.ut-hero-anim .ut-project-single__eyebrow,
.ut-hero-anim .ut-project-single__description,
.ut-hero-anim .ut-project-single__meta,
.ut-hero-anim .ut-project-single__topbar,
.ut-hero-anim .ut-project-single__read-more {
	opacity: 0;
	transform: translate3d(0, 1.5rem, 0);
	will-change: opacity, transform;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__topbar {
	animation: ut-project-element-in 0.75s var(--ut-ease-out-expo) both;
	animation-delay: 0s;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__eyebrow {
	animation: ut-project-element-in 0.75s var(--ut-ease-out-expo) both;
	animation-delay: 0.05s;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__title .ut-word-inner {
	transform: translate3d( 0, 0, 0 );
	opacity: 1;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__description {
	animation: ut-project-element-in 0.8s var(--ut-ease-out-expo) both;
	animation-delay: 0.72s;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__meta {
	animation: ut-project-element-in 0.8s var(--ut-ease-out-expo) both;
	animation-delay: 0.9s;
}

.ut-hero-anim.ut-anim-ready .ut-project-single__read-more {
	animation: ut-project-element-in 0.75s var(--ut-ease-out-expo) both;
	animation-delay: 1.4s;
}

/* --- Featured image: scroll-driven mask (fullscreen → contained) --- */

.ut-project-single__media.ut-media-mask {
	padding-left: 0;
	padding-right: 0;
}

.ut-media-mask .ut-project-single__figure {
	clip-path: inset(
		var(--mask-y, 0%)
		var(--mask-x, 0%)
		0%
		var(--mask-x, 0%)
		round var(--mask-r, 0px)
	);
	transform: translateY(var(--figure-y, 0px));
	box-shadow: 0 30px 90px rgba( 0, 0, 0, var(--media-shadow-o, 0.18) );
	will-change: clip-path, transform;
}

.ut-media-mask .ut-project-single__img {
	transform: scale(var(--img-scale, 1.08));
	will-change: transform;
}

.ut-project-single__content-wrap.ut-scroll-reveal {
	transition-delay: 0.28s;
}

.ut-project-single__content-wrap.ut-visible .ut-project-single__content > * {
	opacity: 0;
	transform: translateY(1.25rem);
	animation: ut-fade-in 0.7s var(--ut-ease-out-expo) forwards;
}

.ut-project-single__content-wrap.ut-visible .ut-project-single__content > *:nth-child(1) { animation-delay: 0.28s; }
.ut-project-single__content-wrap.ut-visible .ut-project-single__content > *:nth-child(2) { animation-delay: 0.36s; }
.ut-project-single__content-wrap.ut-visible .ut-project-single__content > *:nth-child(3) { animation-delay: 0.44s; }
.ut-project-single__content-wrap.ut-visible .ut-project-single__content > *:nth-child(4) { animation-delay: 0.52s; }
.ut-project-single__content-wrap.ut-visible .ut-project-single__content > *:nth-child(n+5) { animation-delay: 0.6s; }

/* ==========================================================================
   Respect prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ut-scroll-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ut-hero__word,
	.ut-hero__line,
	.ut-contact-hero__word {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	body.ut-home-intro .ut-header__logo,
	body.ut-home-intro .ut-header__nav,
	body.ut-home-intro .ut-content {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
		pointer-events: auto;
	}

	.ut-visible .ut-usps__item,
	.ut-visible .ut-project-card,
	.ut-visible .ut-about-services__list {
		opacity: 1;
		transform: none;
		animation: none;
	}

	/* Disable sticky stack on reduced motion */
	.ut-process-card {
		position: relative;
		height: auto;
	}

	.ut-process-cards {
		padding-bottom: 0;
	}

	.ut-process-card__body,
	.ut-process-card__title,
	.ut-process-card__title::before {
		animation: none !important;
	}

	/* Single project cinematic animations */
	.ut-hero-anim .ut-project-single__eyebrow,
	.ut-hero-anim .ut-project-single__description,
	.ut-hero-anim .ut-project-single__meta,
	.ut-hero-anim .ut-project-single__topbar {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.ut-project-single__hero::before,
	.ut-project-single__hero::after {
		animation: none;
	}

	.ut-media-mask .ut-project-single__figure {
		clip-path: none;
	}

	.ut-media-mask .ut-project-single__img {
		transform: none;
	}

}

/* ==========================================================================
   Cinematic steps — scroll-triggered content reveal
   ========================================================================== */

/* Title: word-by-word slide up (same mechanism as project hero) */
.ut-cinematic-step .ut-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

.ut-cinematic-step .ut-word-inner {
	display: inline-block;
	transform: translate3d( 0, 1.1em, 0 );
	opacity: 0;
	will-change: transform, opacity;
	transition: transform 0.9s var(--ut-ease-out-expo),
	            opacity   0.9s var(--ut-ease-out-expo);
}

.ut-cinematic-step.ut-cinematic-anim-ready .ut-word-inner {
	transform: translate3d( 0, 0, 0 );
	opacity: 1;
}

/* Text and list: fade + rise in */
.ut-cinematic-step__text {
	opacity: 0;
	transform: translateY( 1.2rem );
	transition: opacity 0.8s var(--ut-ease-out-expo),
	            transform 0.8s var(--ut-ease-out-expo);
}

.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__text {
	opacity: 0.85;
	transform: translateY( 0 );
	transition-delay: 0.55s;
}

/* List items stagger in individually */
.ut-cinematic-step__list li {
	opacity: 0;
	transform: translateY( 0.6rem );
	transition: opacity 0.5s var(--ut-ease-out-expo),
	            transform 0.5s var(--ut-ease-out-expo);
}

.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(1)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.2s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(2)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.35s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(3)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.50s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(4)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.65s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(5)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.80s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(6)  { opacity: 0.75; transform: translateY(0); transition-delay: 0.95s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(7)  { opacity: 0.75; transform: translateY(0); transition-delay: 1.10s; }
.ut-cinematic-step.ut-cinematic-anim-ready .ut-cinematic-step__list li:nth-child(8)  { opacity: 0.75; transform: translateY(0); transition-delay: 1.25s; }