/**
 * Scroll-Reveal: Slide von unten + Fade-in, wenn das Element in den Viewport kommt.
 *
 * Nutzung: Klasse `seico-reveal` auf ein beliebiges Element setzen (z. B. Bricks → CSS-Klassen).
 * Das Skript ergänzt `is-visible`, sobald das Element sichtbar wird.
 *
 * Optional: `seico-reveal--small` für kürzere Verschiebung (12px statt 24px).
 * Legacy: `slide-reveal` / `slide-reveal--small` bleiben unterstützt.
 */

/* SVG als Reveal-Ziel: Block, sonst Layout-Sprung */
svg.seico-reveal {
	display: block;
}

.seico-reveal,
.slide-reveal {
	opacity: 0;
	transform: translateY(24px);
	/* Gestaffelt: --reveal-delay (z. B. 0ms, 100ms …) oder Kaskade per JS */
	transition:
		opacity 0.5s ease-out var(--reveal-delay, 0ms),
		transform 0.5s ease-out var(--reveal-delay, 0ms);
}

.seico-reveal.is-visible,
.slide-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Optional: geringere Bewegung */
.seico-reveal.seico-reveal--small,
.slide-reveal.slide-reveal--small {
	transform: translateY(12px);
}

.seico-reveal.seico-reveal--small.is-visible,
.slide-reveal.slide-reveal--small.is-visible {
	transform: translateY(0);
}

/* Hero-Box: erst Box aufbauen (links → rechts), dann Inhalte revealen */
.hero-box-blue,
.seico-edition-hero__box {
	--hero-box-build-radius: 24px;
	clip-path: inset(0 100% 0 0 round var(--hero-box-build-radius));
	animation: seico-hero-box-grow-x 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	will-change: clip-path;
}

/* Inhalte in der Hero-Box bleiben bis zum Box-Aufbau unsichtbar */
.hero-box-blue.is-built,
.seico-edition-hero__box.is-built {
	clip-path: none;
}

.hero-box-blue .seico-reveal,
.hero-box-blue .slide-reveal,
.seico-edition-hero__box .seico-reveal,
.seico-edition-hero__box .slide-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.hero-box-blue .seico-reveal.seico-reveal--small,
.hero-box-blue .slide-reveal.slide-reveal--small,
.seico-edition-hero__box .seico-reveal.seico-reveal--small,
.seico-edition-hero__box .slide-reveal.slide-reveal--small {
	transform: translateY(12px);
}

.hero-box-blue.is-built .seico-reveal.is-visible,
.hero-box-blue.is-built .slide-reveal.is-visible,
.seico-edition-hero__box.is-built .seico-reveal.is-visible,
.seico-edition-hero__box.is-built .slide-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hero-Box-Inhalte ohne seico-reveal: nach Box-Aufbau von unten einfaden */
.hero-box-blue .blue-box-hero-heading,
.hero-box-blue .edition-card-content-ist-item-wrapper,
.hero-box-blue .button.white-outline.has-image-left,
.hero-box-blue .seico-edition-hero__cta,
.seico-edition-hero__box .blue-box-hero-heading,
.seico-edition-hero__box .edition-card-content-ist-item-wrapper,
.seico-edition-hero__box .button.white-outline.has-image-left,
.seico-edition-hero__box .seico-edition-hero__cta,
.seico-edition-hero__box .button.is-inverted.is-filled.has-image-left,
.seico-edition-hero__box .button.is-inverted.is-outlined.has-image-left {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-box-blue.is-built .blue-box-hero-heading,
.seico-edition-hero__box.is-built .blue-box-hero-heading {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 20ms;
}

.hero-box-blue.is-built .edition-card-content-ist-item-wrapper,
.seico-edition-hero__box.is-built .edition-card-content-ist-item-wrapper {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 110ms;
}

.hero-box-blue.is-built .button.white-outline.has-image-left,
.hero-box-blue.is-built .seico-edition-hero__cta,
.seico-edition-hero__box.is-built .button.white-outline.has-image-left,
.seico-edition-hero__box.is-built .seico-edition-hero__cta,
.seico-edition-hero__box.is-built .button.is-inverted.is-filled.has-image-left,
.seico-edition-hero__box.is-built .button.is-inverted.is-outlined.has-image-left {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 180ms;
}

@keyframes seico-hero-box-grow-x {
	from { clip-path: inset(0 100% 0 0 round var(--hero-box-build-radius)); }
	to { clip-path: inset(0 0 0 0 round var(--hero-box-build-radius)); }
}

/* Barrierefreiheit: keine Bewegungs-Animation bei Nutzerpräferenz */
@media (prefers-reduced-motion: reduce) {
	.hero-box-blue,
	.seico-edition-hero__box {
		clip-path: none;
		animation: none;
	}
	.seico-reveal,
	.slide-reveal,
	.hero-box-blue .blue-box-hero-heading,
	.hero-box-blue .edition-card-content-ist-item-wrapper,
	.hero-box-blue .button.white-outline.has-image-left,
	.hero-box-blue .seico-edition-hero__cta,
	.seico-edition-hero__box .blue-box-hero-heading,
	.seico-edition-hero__box .edition-card-content-ist-item-wrapper,
	.seico-edition-hero__box .button.white-outline.has-image-left,
	.seico-edition-hero__box .seico-edition-hero__cta,
	.seico-edition-hero__box .button.is-inverted.is-filled.has-image-left,
	.seico-edition-hero__box .button.is-inverted.is-outlined.has-image-left {
		opacity: 1;
		transform: none;
		transition: none;
		--reveal-delay: 0ms !important;
	}
}