/**
 * Creative Addons — Sticky module.
 *
 * The JS engine only flips state classes; everything visual lives here or in
 * the per-element CSS Elementor generates from the Sticky controls.
 *
 * States:
 *   .dea-sticky            base, sticky is enabled
 *   .dea-sticky--fixed     position: fixed (overlay or forced)
 *   .dea-sticky--overlay   transparent until scrolled, floats over the page
 *   .dea-sticky-scrolled   page scrolled past the configured distance
 *   .dea-sticky-hidden     pushed out of view by "Hide on Scroll Down"
 *   .dea-sticky-off        device excluded, every sticky behaviour disabled
 */

.elementor-element.dea-sticky {
	--dea-sticky-offset: 0px;
	--dea-sticky-duration: 400ms;
	--dea-sticky-z: 999;

	position: -webkit-sticky;
	position: sticky;
	z-index: var(--dea-sticky-z);
	transition-property: background-color, background-image, padding, box-shadow, border-color, transform, opacity, -webkit-backdrop-filter, backdrop-filter;
	transition-duration: var(--dea-sticky-duration);
	transition-timing-function: ease;
	will-change: transform;
}

.elementor-element.dea-sticky--top {
	top: var(--dea-sticky-offset);
	bottom: auto;
}

.elementor-element.dea-sticky--bottom {
	bottom: var(--dea-sticky-offset);
	top: auto;
}

/* ── Fixed / overlay positioning ── */

.elementor-element.dea-sticky--fixed {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* Transparent until scrolled. No !important — the class stack already beats
   Elementor's own .elementor-element.elementor-element-<id> background rule,
   which lets the "Top of Page" background control override this in turn. */
.elementor-element.dea-sticky--overlay:not(.dea-sticky-scrolled) {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

/* ── Hide on scroll down ── */

.elementor-element.dea-sticky--top.dea-sticky-hidden {
	transform: translateY(-100%);
}

.elementor-element.dea-sticky--bottom.dea-sticky-hidden {
	transform: translateY(100%);
}

/* ── Entrance effects, played once the element becomes stuck ── */

.dea-sticky--effect-slide.dea-sticky-scrolled:not(.dea-sticky-hidden) {
	animation: dea-sticky-slide var(--dea-sticky-duration) ease both;
}

.dea-sticky--effect-fade.dea-sticky-scrolled:not(.dea-sticky-hidden) {
	animation: dea-sticky-fade var(--dea-sticky-duration) ease both;
}

@keyframes dea-sticky-slide {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes dea-sticky-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* The slide keyframe fights the hide-on-scroll transform, so bottom-stuck
   elements slide in from below instead. */
.dea-sticky--bottom.dea-sticky--effect-slide.dea-sticky-scrolled:not(.dea-sticky-hidden) {
	animation-name: dea-sticky-slide-up;
}

@keyframes dea-sticky-slide-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

/* ── Spacer that replaces a fixed element in the flow ── */

.dea-sticky-spacer {
	display: block;
	width: 100%;
	flex: 0 0 auto;
	pointer-events: none;
}

/* ── Per-state visibility helpers ──
   Both rules only ever hide, so a revealed element keeps its own display
   value instead of being forced to block. */

.dea-sticky:not(.dea-sticky-scrolled) .dea-sticky-only-scrolled {
	display: none !important;
}

.dea-sticky.dea-sticky-scrolled .dea-sticky-only-top {
	display: none !important;
}

/* ── Disabled on this device ── */

.elementor-element.dea-sticky.dea-sticky-off {
	position: static;
	transform: none;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.dea-sticky {
		transition-duration: 1ms;
	}

	.dea-sticky-scrolled {
		animation: none !important;
	}
}