/*----------------------------------------------------------------------*/
/* content animation (fade-in) title/desc & button/ img parallax effect */
/*----------------------------------------------------------------------*/

/* Der Container begrenzt den Sichtbereich */
.sawasdee-hero-cover {
	/* position: relative; */ /* block setting */
	overflow: hidden;
	/* height: 100vh; */ /* block setting */
}

/* Das Bild im Inneren */
.sawasdee-hero-cover img {
	/* position: absolute; */ /* block setting */
	top: -35% !important;
	/* left: 0; */ /* block setting */
	/* width: 100%; */ /* block setting */
	height: 150% !important; /* Puffer für die Verschiebung */
	/* object-fit: cover; */ /* block setting */
	will-change: transform; /* Optimiert die Performance im Browser */
}

/* prepare content */
.sawasdee-hero-title,
.sawasdee-hero-description,
.sawasdee-hero-button {
	transform: translateY(50px);
	filter: blur(20px);
	opacity: 0;
}

/* .sawasdee-hero-title,
.sawasdee-hero-description,
.sawasdee-hero-button {
	animation: show-content 0.5s linear 1 forwards;
} */

/* mit intersection observer erf. cover class 'sawasdee-animate' */
.sawasdee-hero-cover.sawasdee-is-visible
	:is(
		.sawasdee-hero-title,
		.sawasdee-hero-description,
		.sawasdee-hero-button
	) {
	animation: show-content 0.5s linear 1 forwards;
}

/* trigger animation sequential for all elements within content container*/
.sawasdee-hero-title {
	animation-delay: /* 0.1s */ 0.6s !important;
}
.sawasdee-hero-description {
	animation-delay: /* 0.3s */ 0.8s !important;
}
.sawasdee-hero-button {
	animation-delay: /* 0.5s */ 1s !important;
}

/* animations */
@keyframes show-content {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}