/* Hero Lottie Intro */
@media screen and (min-width: 768px) {
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"] .circle-field-canvas {
		transition: opacity 1400ms cubic-bezier(0.19, 1, 0.22, 1);
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"]:not(.is-hero-intro-field-visible) .circle-field-canvas {
		opacity: 0;
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-field-visible .circle-field-canvas {
		opacity: 1;
	}

	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"]:is(:not([data-hero-intro-ready]), [data-hero-intro-ready="pending"]):not(.is-hero-intro-static):not(.is-hero-intro-complete)) .navbar,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"]:is(:not([data-hero-intro-ready]), [data-hero-intro-ready="pending"]):not(.is-hero-intro-static):not(.is-hero-intro-complete) [data-hero-intro-reveal],
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"]:is(:not([data-hero-intro-ready]), [data-hero-intro-ready="pending"]):not(.is-hero-intro-static):not(.is-hero-intro-complete)) [data-hero-intro-after] {
		opacity: 0;
		transform: translate3d(0, 34px, 0);
		animation: heroIntroFailsafe 1ms linear 8000ms forwards;
	}

	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"]:is(:not([data-hero-intro-ready]), [data-hero-intro-ready="pending"]):not(.is-hero-intro-static):not(.is-hero-intro-complete)) .navbar {
		transform: translate3d(0, -22px, 0);
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"]:is(:not([data-hero-intro-ready]), [data-hero-intro-ready="pending"]):not(.is-hero-intro-static):not(.is-hero-intro-complete) .hsp-column-media {
		opacity: 0;
		animation: heroIntroMediaFailsafe 1ms linear 8000ms forwards;
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-running .hsp-column-media,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-running [data-hero-intro-reveal],
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-running) .navbar,
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-running) [data-hero-intro-after] {
		animation: none;
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-running:not(.is-hero-intro-static):not(.is-hero-intro-complete) .hsp-column-media {
		opacity: 1;
		animation: none;
	}

	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-static .hsp-column-media,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-static .circle-field-canvas,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-static [data-hero-intro-reveal],
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-complete .hsp-column-media,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-complete .circle-field-canvas,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"].is-hero-intro-complete [data-hero-intro-reveal],
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-static) .navbar,
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-complete) .navbar,
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-static) [data-hero-intro-after],
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"].is-hero-intro-complete) [data-hero-intro-after] {
		opacity: 1;
		transform: none;
	}
}

@media screen and (max-width: 767px), (prefers-reduced-motion: reduce) {
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"] .hsp-column-media,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"] .circle-field-canvas,
	html:not(.wf-design-mode) .hero-spotlight[data-hero-intro="home"] [data-hero-intro-reveal],
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"]) .navbar,
	html:not(.wf-design-mode) body:has(.hero-spotlight[data-hero-intro="home"]) [data-hero-intro-after] {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
		animation: none;
	}
}

@keyframes heroIntroFailsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes heroIntroMediaFailsafe {
	to {
		opacity: 1;
	}
}
/* End Hero Lottie Intro */