/*
 * NSCO – Ditty Divi 5 Fix v1.0.3
 */

.nsco-ditty-divi5-fixed {
	position: relative;
	overflow: hidden !important;
}

/* Keep Ditty alive in DOM, but invisible once our layer is ready. */
.nsco-ditty-divi5-fixed.nsco-ditty-replacement-ready > .nsco-ditty-native-layer {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.nsco-ditty-divi5-fixed > .nsco-ditty-marquee {
	position: absolute;
	inset: 0;
	z-index: 999;
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.nsco-ditty-divi5-fixed > .nsco-ditty-marquee.is-ready {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nsco-ditty-marquee__track {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	width: max-content !important;
	min-width: max-content !important;
	will-change: transform;
	animation: nsco-ditty-marquee-scroll var(--nsco-ditty-duration, 30s) linear infinite !important;
}

.nsco-ditty-marquee__group {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: var(--nsco-ditty-gap, 36px) !important;
	padding-right: var(--nsco-ditty-gap, 36px) !important;
	width: max-content !important;
	min-width: max-content !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.nsco-ditty-marquee__item {
	position: relative !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: nowrap !important;
}

.nsco-ditty-marquee__item *,
.nsco-ditty-marquee__item *::before,
.nsco-ditty-marquee__item *::after {
	visibility: visible !important;
	opacity: 1 !important;
}

.nsco-ditty-marquee:hover .nsco-ditty-marquee__track {
	animation-play-state: paused !important;
}

@keyframes nsco-ditty-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--nsco-ditty-distance)), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsco-ditty-marquee__track {
		animation-play-state: paused !important;
	}
}