/**
 * Share to Social - Animationen (separat ausgelagert)
 *
 * Diese Datei enthält alle Animationen, die optional geladen werden
 * können. Sie wird zusammen mit frontend.css geladen.
 *
 * @package Share_To_Social
 * @since   1.0.0
 */

/* Drop-Shadow Filter für SVG-Pfade */
.sts-btn.sts-drop-shadow-on .sts-icon {
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
}

/* Pulse-Animation für aktive Buttons (z.B. Copy-Link nach Klick) */
.sts-btn.sts-pulse-active {
	animation: sts-btn-pulse 0.4s ease;
}

@keyframes sts-btn-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

/* Slide-In für Floating beim Laden */
.sts-floating.sts-anim-played {
	animation: sts-floating-in 0.5s ease forwards;
}

@keyframes sts-floating-in {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}

.sts-float-left.sts-anim-played {
	animation: sts-floating-in-left 0.5s ease forwards;
}

@keyframes sts-floating-in-left {
	from { opacity: 0; transform: translateX(-20px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Mobile Bottom Bar Slide-Up */
.sts-mobile-bar.sts-anim-played {
	animation: sts-mobile-in 0.4s ease forwards;
}

@keyframes sts-mobile-in {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Continuous Pulse (für Trigger-Icons) */
.sts-pulse-continuous {
	animation: sts-pulse-loop 2s ease infinite;
}

@keyframes sts-pulse-loop {
	0%, 100% { box-shadow: 0 0 0 0 rgba(51, 51, 51, 0.4); }
	50% { box-shadow: 0 0 0 12px rgba(51, 51, 51, 0); }
}