.main-header,
.main-header * {
	will-change: contents;
	backface-visibility: hidden;
	opacity: 0.999999;
}

.main-header {
	--_load-transition: 1.5s;
	--_scroll-text-offset: 0rem;
	background-color: var(--linen);
	width: 100vw;
	height: 100svh;
	position: relative;
	overflow: hidden;
	transition: var(--_load-transition);
	isolation: isolate;
}

.main-header .absolute-center {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}

/* PRELOAD */

.main-header :is(.logo-wrapper, .deco) img {
	object-fit: contain;
	object-position: top;
}

.main-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--_bg-image);
	object-fit: cover;
	transition: var(--_load-transition);
	background-size: cover;
}

.main-header > * {
	grid-area: 1/1;
}

.main-header .deco {
	inset: 0;
	position: absolute;
}

.main-header :is(.left, .right) {
	transition: var(--_load-transition);
	position: absolute;
	transform-origin: bottom center;
}

.main-header .logo-wrapper {
	position: absolute;
	transition: var(--_load-transition);
	mix-blend-mode: darken;
	z-index: 1;
}

/* CONTENT  */

.main-header .hero {
	transition: var(--_load-transition);
}

.main-header .content {
	transition: var(--_load-transition);
}

.main-header .content::before,
.main-header .hero::after {
	content: var(--_text, "");
	font-family: var(--font-degular);
	font-weight: var(--font-light);

	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 100vw;
	text-align: center;
	overflow: visible;

	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: 0 calc(-8rem - var(--_scroll-text-offset));
	transform: translate(0, var(--_scroll-text-offset));
}

.main-header .content::before {
	color: var(--fresh-lawn);
}

.main-header .content .hero::after {
	color: var(--linen);
}

.main-header .content .subheader {
	position: absolute;
	text-transform: uppercase;
	color: var(--fresh-lawn);
	transition: all var(--anim-delay);
	z-index: 10;
}

.main-header .scroll-down {
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 0;
	transition: 0.5s;
}

@media only screen and (min-width: 961px) {
	.main-header .logo-wrapper {
		width: 50vw;
		height: 50rem;
	}

	.main-header::before {
		--_bg-image: url("../../img/preloader/floral_pattern.png");
	}

	.main-header .left {
		width: 122.3rem;
		height: 160.5rem;
		top: 4.35svh;
		left: -20vw;
	}

	.main-header .left.inner-deco {
		position: fixed;
		z-index: 10;
	}
	.main-header .deco .right {
		width: 80.3rem;
		height: 105.4rem;
		right: -5.5vw;
		top: 66svh;
	}

	.main-header .content {
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
	}

	.main-header .content::before,
	.main-header .hero::after {
		font-size: 18rem;
		letter-spacing: 0.055em;
		line-height: 2em;
		mask-image: url(../../img/preloader/text_mask.svg);
	}

	.main-header .content .subheader {
		translate: 0 37vh;
	}

	.main-header .scroll-down {
		bottom: 2.2rem;
	}

	.main-header .hero::before {
		content: "";
		position: absolute;
		pointer-events: none;
		inset: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.main-header .hero::after {
		z-index: 2;
	}

	body:not(.preloaded) .scroll-down {
		opacity: 0;
	}
}

@media only screen and (min-width: 961px) and (max-width: 1440px) {
}

@media only screen and (min-width: 0) and (max-width: 960px) {
	.main-header .inner-deco {
		display: none;
	}

	.main-header {
		display: grid;
		height: calc(100vh - 5.7rem);
		/* place-content: center; */
	}

	.main-header .logo-wrapper {
		width: 100vw;
		height: 60.9vw;
	}

	.main-header::before {
		--_bg-image: url("../../img/preloader/floral_pattern_mobile.png");
	}

	.main-header > * {
		grid-area: 1 / 1;
	}

	.main-header .content {
		z-index: unset;
	}

	.main-header .deco {
		z-index: 0;
	}

	.main-header .right {
		transition: var(--_load-transition);
		position: absolute;
	}

	.main-header[data-state="preload"] :is(.left, .right) {
		opacity: 0;
		translate: 0 -20rem;
	}

	.main-header[data-state="preload"] .left {
		rotate: -20deg;
	}

	.main-header[data-state="preload"] .right {
		rotate: 20deg;
	}

	.main-header[data-state="preload"] .content {
		opacity: 0;
	}

	.main-header .content::before,
	.main-header .hero::after {
		content: none;
	}

	.main-header .hero {
		width: 38rem;
		height: 26.5rem;
		will-change: auto;
		margin: auto;
	}

	.main-header h1 {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: 100vw;
		text-align: center;
		overflow: visible;
		line-height: 26rem;
		padding-bottom: 3rem;
		font-weight: var(--font-light);
		transform: translateZ(0);
		color: var(--fresh-lawn);

		z-index: 2;
	}

	.main-header h1 span:last-of-type {
		font-size: 11.8rem;
	}
	.main-header h1 span {
		display: block;
	}

	.main-header .subheader {
		width: 28rem;
		text-align: center;
		top: 50%;
		left: 50%;
		translate: -50% -50% !important;
		z-index: 1;
		transform: translate(0, 24rem);
		font-weight: 400;
	}

	.main-header :is(.left, .right) img {
		object-fit: cover;
	}

	.main-header .left {
		width: 51.3rem;
		height: 67.3rem;
		left: -18.7rem;
		top: 6.5rem;
	}

	.main-header .deco .left img {
		object-position: top left;
	}

	.main-header .right {
		width: 35.5rem;
		height: 43.9rem;
		right: -26.7vw;
		top: unset;
		bottom: 0;
		z-index: 1;
	}

	.main-header .deco .right img {
		object-position: top right;
	}

	.main-header .scroll-down {
		bottom: 3rem;
	}

	section:not(.mobile-intro) .scroll-down {
		opacity: 0;
	}
}

/* PRELOAD STATE */

@media only screen and (min-width: 961px) {
	.main-header[data-state="preload"] :is(.left, .right) {
		opacity: 0;
		translate: 0 -20rem;
	}

	.main-header[data-state="preload"] .left {
		rotate: -20deg;
	}

	.main-header[data-state="preload"] .deco .right {
		rotate: 20deg;
	}

	.main-header[data-state="preload"] .content {
		opacity: 0;
	}

	.main-header[data-state="preload"] .hero {
		width: 57.1rem;
		height: 27.5rem;
	}

	/* .main-header[data-state="start"]::before {
        opacity: 0;
    } */
}

/* ANIMATION START STATE */

.main-header[data-state="start"] .logo-wrapper {
	pointer-events: none;
	opacity: 0;
}

.preloaded .content .subheader {
	color: var(--linen);
}

@media only screen and (min-width: 961px) {
	.main-header[data-state="start"] .content {
		opacity: 1;
	}

	.main-header[data-state="start"] .hero {
		width: 82.4rem;
		height: 53.5rem;
		will-change: auto;
	}
}

@media only screen and (min-width: 0) and (max-width: 960px) {
	.main-header.mobile-intro {
		--_load-transition: 1.6s;
	}

	.main-header.mobile-intro .hero {
		width: 100vw;
		height: 100vh;
	}

	.main-header.mobile-intro :is(h1, .deco, .right) {
		transition: var(--_load-transition);
		opacity: 0;
		pointer-events: none;
	}

	.main-header .subheader {
		transition: var(--_load-transition);
	}

	.main-header.mobile-intro .subheader {
		transform: translate(0, 20rem);
		width: 28rem;
		color: var(--linen);
	}
}

/* @end */

/* @group force-done
------------------------------------ */

.force-done .main-header :is(.content, #important) {
	width: 100vw;
	height: 100vh;
	max-width: unset;
}

.force-done .main-header .content .hero {
	width: 100vw;
	height: 100vh;
}

.force-done :is(.content, #important)::before,
.force-done :is(.hero, #important)::after,
:is(.force-done, #important)::before,
.force-done :is(h1, #important) {
	content: none;
	display: none;
}

/* @end */

/* CMS */
.editor-styles-wrapper .main-header .hero {
	width: 100%;
	height: 100%;
	z-index: -1;
}