/**
 * Sekwencyjny fade-in dzieci wrappera .fade-sequence.
 *
 * Użycie (Elementor: Advanced → CSS Classes na kontenerze):
 *   <div class="fade-sequence">
 *     <div>…</div>
 *     <article>…</article>
 *     <a href="…">…</a>
 *   </div>
 *
 * Opcjonalne zmienne na wrapperze:
 *   --fade-sequence-duration  (domyślnie 1s)
 *   --fade-sequence-stagger   (domyślnie 0.22s)
 *   --fade-sequence-offset    (domyślnie 1.5rem)
 *   --fade-sequence-easing    (domyślnie ease-out)
 */

.fade-sequence {
	--fade-sequence-duration: 1s;
	--fade-sequence-stagger: 0.22s;
	--fade-sequence-offset: 1.5rem;
	--fade-sequence-easing: ease-out;
}

.elementor .fade-sequence > :is(div, article, a):not(
	.e-con-inner,
	.elementor-container,
	.elementor-widget-container,
	.elementor-posts-container,
	.elementor-grid,
	.elementor-loop-container
),
.elementor .fade-sequence .fade-sequence__item,
.fade-sequence > :is(div, article, a):not(
	.e-con-inner,
	.elementor-container,
	.elementor-widget-container,
	.elementor-posts-container,
	.elementor-grid,
	.elementor-loop-container
),
.fade-sequence .fade-sequence__item {
	opacity: 0;
	translate: 0 var(--fade-sequence-offset);
}

.elementor .fade-sequence.is-in-view > :is(div, article, a):not(
	.e-con-inner,
	.elementor-container,
	.elementor-widget-container,
	.elementor-posts-container,
	.elementor-grid,
	.elementor-loop-container
),
.elementor .fade-sequence.is-in-view .fade-sequence__item,
.fade-sequence.is-in-view > :is(div, article, a):not(
	.e-con-inner,
	.elementor-container,
	.elementor-widget-container,
	.elementor-posts-container,
	.elementor-grid,
	.elementor-loop-container
),
.fade-sequence.is-in-view .fade-sequence__item {
	animation: fade-sequence-in var(--fade-sequence-duration) var(--fade-sequence-easing) both;
	animation-delay: calc(var(--fade-index, 0) * var(--fade-sequence-stagger));
}

@keyframes fade-sequence-in {
	from {
		opacity: 0;
		translate: 0 var(--fade-sequence-offset);
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .fade-sequence > :is(div, article, a),
	.elementor .fade-sequence .fade-sequence__item,
	.fade-sequence > :is(div, article, a),
	.fade-sequence .fade-sequence__item {
		opacity: 1;
		translate: none;
		animation: none;
	}
}