/* ==========================================================================
   Home — Simple intro
   ========================================================================== */

body.ut-home-intro {
	--ut-home-logo-bottom-gap: clamp(1.75rem, 10vh, 6rem);
	--ut-home-logo-target-height: var(--ut-header-nav-size);
	--ut-home-logo-height: calc((100vw - (var(--ut-header-padding-x) * 2)) * 0.25915);
	--ut-home-logo-offset-y: max(0px, calc(100dvh - var(--ut-home-logo-bottom-gap) - var(--ut-header-padding-y) - var(--ut-home-logo-height)));
	--ut-home-header-shift: clamp(3rem, 7vh, 4.75rem);
	--ut-home-logo-start-lift: clamp(4rem, 9vh, 6rem);
	--ut-home-logo-rest-offset: clamp(1rem, 2.5vh, 1.75rem);
	--ut-home-logo-exit-distance: 160vh;
	background-color: #ffffff;
	transition: background-color 0.45s ease;
}

body.ut-home-intro.ut-home-content-visible {
	background-color: var(--wp--preset--color--warm);
}

html.ut-skip-home-intro body.ut-home-intro {
	--ut-home-logo-target-height: var(--ut-header-nav-size);
	--ut-home-logo-height: var(--ut-header-nav-size);
	--ut-home-logo-offset-y: 0px;
}

body.ut-home-intro .ut-header {
	background-color: #ffffff;
	transform: translate3d(0, calc(-1 * var(--ut-home-header-shift, 0px)), 0);
	transition: background-color 0.45s ease, transform 0.72s var(--ut-ease-out-expo), border-color 0.28s ease;
}

body.ut-home-intro.ut-home-content-visible .ut-header {
	background-color: var(--wp--preset--color--warm);
}

body.ut-home-intro:not(.ut-home-content-visible) .ut-header {
	border-bottom-color: transparent;
}

html.ut-skip-home-intro body.ut-home-intro .ut-header {
	border-bottom-color: rgba( 26, 26, 26, 0.15 );
}

html.ut-home-scroll-locked,
body.ut-home-intro.ut-home-scroll-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

body.ut-home-intro .ut-header__nav,
body.ut-home-intro .ut-content {
	will-change: transform, opacity;
}

body.ut-home-intro .ut-header__logo {
	flex: 0 0 auto;
	opacity: 1;
	transform: translate3d(0, calc(var(--ut-home-logo-offset-y, 0px) + var(--ut-home-header-shift, 0px) - var(--ut-home-logo-start-lift, 0px)), 0);
	will-change: transform, opacity;
}

body.ut-home-intro .ut-header__logo-svg {
	height: var(--ut-home-logo-height, var(--ut-header-nav-size));
	width: auto;
	max-width: none;
	overflow: visible;
}

body.ut-home-intro .ut-header__logo-svg path {
	opacity: 0;
	color: var(--wp--preset--color--accent);
	transform-box: fill-box;
	transform-origin: center;
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(1) {
	transform: translate3d(-1.4rem, 2.4rem, 0) rotate(-8deg) scale(0.92);
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(2) {
	transform: translate3d(1.2rem, -1.1rem, 0) rotate(6deg) scale(0.94);
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(3) {
	transform: translate3d(0.4rem, 2.8rem, 0) rotate(-5deg) scale(0.95);
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(4) {
	transform: translate3d(-1rem, -1.6rem, 0) rotate(5deg) scale(0.96);
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(5) {
	transform: translate3d(0.9rem, 2rem, 0) rotate(-4deg) scale(0.93);
}

body.ut-home-intro .ut-header__logo-svg path:nth-of-type(6) {
	transform: translate3d(1.6rem, -1rem, 0) rotate(7deg) scale(0.94);
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo {
	transition: transform 0.8s var(--ut-ease-out-expo);
}

body.ut-home-intro.ut-home-logo-exit .ut-header__logo {
	transform: translate3d(0, calc(var(--ut-home-logo-offset-y, 0px) + var(--ut-home-header-shift, 0px) - var(--ut-home-logo-start-lift, 0px) + var(--ut-home-logo-exit-distance, 12vh)), 0);
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg {
	transition: height 0.8s var(--ut-ease-out-expo);
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path {
	animation: ut-logo-path-in 0.9s var(--ut-ease-out-spring) forwards;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(1) {
	animation-delay: 0.04s;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(2) {
	animation-delay: 0.12s;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(3) {
	animation-delay: 0.2s;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(4) {
	animation-delay: 0.28s;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(5) {
	animation-delay: 0.36s;
}

body.ut-home-intro.ut-home-intro-animate .ut-header__logo-svg path:nth-of-type(6) {
	animation-delay: 0.44s;
}

body.ut-home-intro .ut-header__nav,
body.ut-home-intro .ut-content {
	opacity: 0;
	pointer-events: none;
}

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

html.ut-skip-home-intro body.ut-home-intro .ut-header__logo-svg path {
	opacity: 1;
	color: var(--wp--preset--color--foreground);
	transform: none;
}

body.ut-home-intro .ut-header__nav {
	transform: translateY(-0.85rem);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

body.ut-home-intro .ut-content {
	transform: translateY(0.9rem);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

body.ut-home-intro.ut-home-intro-ready .ut-header {
	transform: translate3d(0, 0, 0);
}

body.ut-home-intro.ut-home-intro-ready .ut-header__logo {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: none;
}

body.ut-home-intro.ut-home-intro-ready .ut-header__logo-svg {
	height: var(--ut-home-logo-target-height, var(--ut-header-nav-size));
	transition: none;
}

body.ut-home-intro.ut-home-nav-visible .ut-header__nav,
body.ut-home-intro.ut-home-content-visible .ut-content {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

body.ut-home-intro.ut-home-content-visible .ut-header__logo-svg path {
	opacity: 1;
	color: var(--wp--preset--color--foreground);
	transform: none;
}

@keyframes ut-logo-path-in {
	0% {
		opacity: 0;
		color: var(--wp--preset--color--accent);
	}

	30% {
		color: var(--wp--preset--color--contrast);
	}

	55% {
		opacity: 1;
		color: var(--wp--preset--color--contrast);
	}

	72% {
		opacity: 1;
		color: var(--wp--preset--color--accent);
		transform: translate3d(0, -0.35rem, 0) rotate(0deg) scale(1.035);
	}

	100% {
		opacity: 1;
		color: var(--wp--preset--color--foreground);
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ut-header__logo-svg path,
	body.ut-home-intro .ut-header__logo-svg path {
		opacity: 1;
		color: var(--wp--preset--color--foreground);
		transform: none;
		animation: none;
	}
}