/* ============================================================================================
	HEADER FRONT / PATTERN
============================================================================================ */
/* .resola-header-front-sticky, .resola-header-front-sticky-target, .resola-header-front-sticky-cover */
.resola-header-front-sticky-target {
	position: sticky;
	top: 0;
    height: 100lvh
}
.resola-header-front-sticky-cover {
	width: 100%;
	height: 100lvh
}
.wp-site-blocks:not(.block-editor-block-list__layout):has(.resola-header-front-sticky) {
	width: 100%;
}
.resola-header-front-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100lvh;
	color: var(--wp--preset--color--white)
}
.resola-header-front-content-1st {
	position: absolute;
	top: 0;
	left: 0
}
.resola-header-front-sentense {
	opacity: 0;
	margin: 0 !important;
	overflow: hidden
}
@keyframes titleFadeIn{100%{opacity:1;transform:translateY(0)}}
.resola-header-front-sentense:first-of-type {
	font-size: clamp(38px, 8vw, 70px);
	transform: translateY(20px);
	animation: titleFadeIn 1s ease-out forwards 2.5s
}
.resola-header-front-sentense:nth-of-type(2) {
	transform: translateY(-20px);
	animation: titleFadeIn 1s ease-out forwards 2.7s
}
.resola-header-front-sentense:last-of-type {
	transform: translateY(-20px);
	animation: titleFadeIn 1s ease-out forwards 3s
}
.resola-header-front-sentense-small {
	margin: 2em 0 0 !important;
	letter-spacing: 1px;
	text-indent: 1px
}

.resola-header-front-content-2nd {
	font-size: clamp(28px, 7vw, 60px)
}
.resola-catch-copy p:first-of-type {
	opacity: 0;
	transform: translateY(20px);
	transition: 1s ease-out .3s
}
.resola-catch-copy p:nth-of-type(2) {
	opacity: 0;
	transform: translateY(-20px);
	transition: 1s ease-out .6s
}
.observe_is_active.resola-catch-copy p {
	opacity: 1;
	transform: translateY(0)
}

.resola-header-section {
	position: relative;
	background: linear-gradient(to bottom, rgba(0,0,0,0), var(--wp--preset--color--base))
}
.resola-header-section-sentence {
	padding: 5em 3em
}
.resola-header-section-image {
	width: 80%
}
.resola-header-section-image:first-of-type {
	margin: 0 0 0 auto
}
.resola-header-section-image:nth-of-type(2) {
	margin: -2em 0 0 0
}
.resola-header-section-image:nth-of-type(3) {
	margin: -2em 0 0 auto
}

@media screen and (min-width: 768px) {
	.resola-header-section-inner {
		display: flex;
		align-items: flex-start
	}
	.resola-header-section-sentence {
		width: 30%
	}
	.resola-header-section-image-wrapper {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: flex-start;
		gap: 0 2%;
		position: relative;
		z-index: 2
	}
	.resola-header-section-image {
		opacity: 0;
		flex: 1;
		min-width: 0;
		width: 100%;
		transform: translateY(50%);
		transition: 1.2s
	}
	.resola-header-section-image:nth-of-type(2) {
		margin: 3em 0 0 !important;
		transition-delay: .3s
	}
	.resola-header-section-image:nth-of-type(3) {
		margin: 6em 0 0 !important;
		transition-delay: .6s
	}
	.observe_is_active .resola-header-section-image {
		opacity: 1;
		transform: translateY(0)
	}
}