/**
 * Syoska Motion Presets – Trenner & Linien
 *
 * hr.smp-divider-shimmer: horizontale Linie mit wanderndem Glanz.
 * .smp-divider-gradient-wave: Block-Trenner mit animiertem Verlauf.
 * .smp-divider-grow: Linie wächst von der Mitte (einmalige Animation).
 */

hr.smp-divider-shimmer {
	border: none;
	height: 2px;
	margin: 1.5rem auto;
	max-width: min(100%, 28rem);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--smp-accent) 40%, transparent),
		transparent
	);
	background-size: 200% 100%;
	animation: smp-divider-shimmer-move var(--smp-duration-slow) linear infinite;
}

@keyframes smp-divider-shimmer-move {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.smp-divider-gradient-wave {
	display: block;
	height: 3px;
	width: 100%;
	max-width: 36rem;
	margin: 1.5rem auto;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--smp-accent),
		var(--smp-accent-2),
		var(--smp-accent)
	);
	background-size: 200% 100%;
	animation: smp-divider-wave var(--smp-duration-slow) ease-in-out infinite alternate;
}

@keyframes smp-divider-wave {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

.smp-divider-grow {
	display: block;
	height: 2px;
	width: 100%;
	max-width: 20rem;
	margin: 1.25rem auto;
	border: none;
	background: linear-gradient(90deg, transparent, var(--smp-accent), transparent);
	transform: scaleX(0);
	transform-origin: center;
	animation: smp-divider-grow-in var(--smp-duration-slow) var(--smp-ease-out) forwards;
}

@keyframes smp-divider-grow-in {
	to {
		transform: scaleX(1);
	}
}