/**
 * Ethos visibility and page transitions.
 * Loaded after legacy motion styles so this file owns `.reveal` timing.
 */

.has-js .reveal.ethos-reveal-owned {
	opacity: 0 !important;
	transform: translate3d(0, 16px, 0) !important;
	transition-delay: 0ms !important;
	transition-duration: 640ms !important;
	transition-property: opacity, transform !important;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
	will-change: opacity, transform;
}

.has-js .reveal.ethos-reveal-owned.ethos-reveal-releasing,
.has-js .reveal.ethos-reveal-owned.is-visible {
	opacity: 1 !important;
	transform: none !important;
}

/* Eyebrows lead their associated headings by 120ms. */
.has-js .reveal.ethos-reveal-owned .eyebrow {
	opacity: 0;
	transform: translate3d(0, 5px, 0);
	transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-js .reveal.ethos-reveal-owned :is(h1, h2, h3) {
	opacity: 0;
	transform: translate3d(0, 7px, 0);
	transition: opacity 420ms ease 120ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

.has-js .reveal.ethos-reveal-owned:is(.ethos-reveal-releasing, .is-visible) .eyebrow,
.has-js .reveal.ethos-reveal-owned:is(.ethos-reveal-releasing, .is-visible) :is(h1, h2, h3) {
	opacity: 1;
	transform: none;
}

/*
 * Clip-path wipes are added only by JavaScript. Their targets are media
 * descendants rather than `.reveal` cards, keeping the two transitions from
 * competing for the same transition declaration.
 */
.has-js .ethos-image-wipe {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 800ms cubic-bezier(0.76, 0, 0.24, 1) var(--ethos-image-wipe-delay, 0ms);
	will-change: clip-path;
}

.has-js .ethos-image-wipe:not(img) img,
.has-js img.ethos-image-wipe {
	transform: scale(1.06);
	transform-origin: center;
	transition: transform 800ms cubic-bezier(0.76, 0, 0.24, 1) var(--ethos-image-wipe-delay, 0ms);
	will-change: transform;
}

.has-js .ethos-image-wipe.ethos-image-wipe--visible,
.has-js .ethos-image-wipe.ethos-image-wipe--instant {
	clip-path: inset(0 0 0 0);
}

.has-js .ethos-image-wipe.ethos-image-wipe--visible:not(img) img,
.has-js .ethos-image-wipe.ethos-image-wipe--instant:not(img) img,
.has-js img.ethos-image-wipe.ethos-image-wipe--visible,
.has-js img.ethos-image-wipe.ethos-image-wipe--instant {
	transform: scale(1);
}

.has-js .ethos-image-wipe.ethos-image-wipe--instant {
	transition: none !important;
}

.has-js .ethos-image-wipe.ethos-image-wipe--instant:not(img) img,
.has-js img.ethos-image-wipe.ethos-image-wipe--instant {
	transition: none !important;
}

/*
 * The root pseudo-elements make the wipe available before body markup exists.
 * An early head bootstrap can set `ethos-page-arrival-pending` before first
 * paint; the JavaScript then moves the curtain away and clears every class.
 */
html.ethos-page-wipe-ready::before,
html.ethos-page-arrival-pending::before,
html.ethos-page-arrival-active::before,
html.ethos-page-departure-active::before {
	background: #10110f;
	content: '';
	inset: 0;
	pointer-events: none;
	position: fixed;
	transform: translate3d(0, 101%, 0);
	transition: transform 350ms cubic-bezier(0.76, 0, 0.24, 1);
	z-index: 2147483000;
}

html.ethos-page-wipe-ready::after,
html.ethos-page-arrival-pending::after,
html.ethos-page-arrival-active::after,
html.ethos-page-departure-active::after {
	background: linear-gradient(90deg, transparent, rgba(183, 148, 83, 0.92) 22%, rgba(237, 224, 191, 0.98) 50%, rgba(183, 148, 83, 0.92) 78%, transparent);
	box-shadow: 0 0 22px rgba(183, 148, 83, 0.2);
	content: '';
	height: 1px;
	left: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transform: translate3d(0, calc(100vh + 1px), 0);
	transition: transform 350ms cubic-bezier(0.76, 0, 0.24, 1);
	z-index: 2147483001;
}

html.ethos-page-arrival-pending::before {
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition: none;
}

html.ethos-page-arrival-pending::after {
	transform: translate3d(0, 0, 0);
	transition: none;
}

html.ethos-page-arrival-active::before {
	pointer-events: auto;
	transform: translate3d(0, -101%, 0);
}

html.ethos-page-arrival-active::after {
	transform: translate3d(0, calc(-100vh - 1px), 0);
}

html.ethos-page-departure-active::before {
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

html.ethos-page-departure-active::after {
	transform: translate3d(0, 0, 0);
}

html.ethos-page-arrival-pending,
html.ethos-page-arrival-active,
html.ethos-page-departure-active {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.has-js .reveal,
	.has-js .reveal.ethos-reveal-owned,
	.has-js .reveal.ethos-reveal-owned.ethos-reveal-releasing,
	.has-js .ethos-image-wipe,
	.has-js .ethos-image-wipe.ethos-image-wipe--visible {
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	html.ethos-page-wipe-ready::before,
	html.ethos-page-wipe-ready::after,
	html.ethos-page-arrival-pending::before,
	html.ethos-page-arrival-pending::after,
	html.ethos-page-arrival-active::before,
	html.ethos-page-arrival-active::after,
	html.ethos-page-departure-active::before,
	html.ethos-page-departure-active::after {
		content: none !important;
		transition: none !important;
	}
}

@media print {
	.has-js .reveal,
	.has-js .ethos-image-wipe {
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	html::before,
	html::after {
		content: none !important;
	}
}