/* AB Shine Divider */
.ab-sd {
	--ab-sd-base: rgba(255, 255, 255, 0.18);
	--ab-sd-light: rgba(255, 255, 255, 0.9);
	--ab-sd-dark: rgba(0, 0, 0, 0.6);
	--ab-sd-w: 35%;
	--ab-sd-glow: 0px;
	display: flex;
	justify-content: center;
	padding-block: 15px;
}

.ab-sd__line {
	position: relative;
	display: block;
	width: 100%;
	height: 1px;
	overflow: hidden;
	background: var(--ab-sd-base);
}

.ab-sd-round-yes .ab-sd__line {
	border-radius: 999px;
}

/* Wandernder Lichtschein */
.ab-sd__line::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: var(--ab-sd-w);
	pointer-events: none;
	will-change: left;
}

.ab-sd--light .ab-sd__line::after {
	background: linear-gradient(90deg, transparent, var(--ab-sd-light), transparent);
}

.ab-sd--dark .ab-sd__line::after {
	background: linear-gradient(90deg, transparent, var(--ab-sd-dark), transparent);
}

/* Heller + dunkler: Schatten läuft vor, Glanz folgt */
.ab-sd--both .ab-sd__line::after {
	background: linear-gradient(90deg,
		transparent 0%,
		var(--ab-sd-dark) 22%,
		transparent 42%,
		var(--ab-sd-light) 66%,
		transparent 100%);
}

/* Leuchten: sichtbarer Glow, die Linie darf dafür nicht abschneiden */
.ab-sd--light .ab-sd__line,
.ab-sd--both .ab-sd__line {
	filter: drop-shadow(0 0 var(--ab-sd-glow) var(--ab-sd-light));
}

/* Enden weich ausblenden */
.ab-sd-fade-yes .ab-sd__line {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.ab-sd-hoverpause-yes .ab-sd:hover .ab-sd__line::after {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ab-sd__line::after {
		animation: none !important;
		display: none;
	}
}
