/**
 * Syoska Motion Presets – Theme-/Builder-Kompatibilität
 *
 * Lädt nach allen anderen Plugin-Styles. Höhere Spezifität + !important
 * gegenüber typischen Divi-/Theme-Regeln (z. B. .et_pb_button mit background !important).
 *
 * Voraussetzung: Zusätzliche Klassen wie smp-btn-gradient-shift am gleichen Element wie der Button-Link.
 */

/* ── Divi & ähnliche Buttons ─────────────────────────────────── */

body.smp-motion-active a.et_pb_button.smp-btn-gradient-shift,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-gradient-shift {
	background-color: transparent !important;
	background-image: linear-gradient(
		120deg,
		var(--smp-accent) 0%,
		var(--smp-accent-2) 50%,
		var(--smp-accent) 100%
	) !important;
	background-size: 200% 100% !important;
	background-position: 0% 50% !important;
	color: #fff !important;
	border: none !important;
	transition:
		transform var(--smp-duration) var(--smp-ease),
		box-shadow var(--smp-duration) var(--smp-ease),
		background-position var(--smp-duration-slow) var(--smp-ease) !important;
}

body.smp-motion-active a.et_pb_button.smp-btn-gradient-shift:hover,
body.smp-motion-active a.et_pb_button.smp-btn-gradient-shift:focus-visible,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-gradient-shift:hover,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-gradient-shift:focus-visible {
	background-position: 100% 50% !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 0.35em 1.2em rgba(37, 99, 235, 0.35) !important;
}

body.smp-motion-active a.et_pb_button.smp-btn-scale-soft,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-scale-soft {
	background: color-mix(in srgb, var(--smp-accent) 12%, transparent) !important;
	background-color: color-mix(in srgb, var(--smp-accent) 12%, transparent) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	transition:
		transform var(--smp-duration) var(--smp-ease),
		box-shadow var(--smp-duration) var(--smp-ease) !important;
}

body.smp-motion-active a.et_pb_button.smp-btn-scale-soft:hover,
body.smp-motion-active a.et_pb_button.smp-btn-scale-soft:focus-visible,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-scale-soft:hover,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-scale-soft:focus-visible {
	transform: scale(1.03) !important;
	box-shadow: 0 0.5em 1.5em rgba(37, 99, 235, 0.2) !important;
}

body.smp-motion-active a.et_pb_button.smp-btn-shine,
body.smp-motion-active .et_pb_button_module_wrapper a.et_pb_button.smp-btn-shine {
	background-color: var(--smp-accent) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
}

/* ── Überschriften: Animation darf nicht vom Theme auf „none“ stehen ── */

body.smp-motion-active h1.smp-fade-in-up,
body.smp-motion-active h2.smp-fade-in-up,
body.smp-motion-active h3.smp-fade-in-up,
body.smp-motion-active h4.smp-fade-in-up,
body.smp-motion-active h5.smp-fade-in-up,
body.smp-motion-active h6.smp-fade-in-up,
body.smp-motion-active .et_pb_text_inner h1.smp-fade-in-up,
body.smp-motion-active .et_pb_text_inner h2.smp-fade-in-up,
body.smp-motion-active .et_pb_text_inner h3.smp-fade-in-up {
	animation-name: smp-fade-in-up !important;
	animation-duration: var(--smp-duration-slow) !important;
	animation-timing-function: var(--smp-ease-out) !important;
	animation-fill-mode: both !important;
}

body.smp-motion-active h1.smp-blur-in,
body.smp-motion-active h2.smp-blur-in,
body.smp-motion-active h3.smp-blur-in,
body.smp-motion-active .et_pb_text_inner h1.smp-blur-in,
body.smp-motion-active .et_pb_text_inner h2.smp-blur-in,
body.smp-motion-active .et_pb_text_inner h3.smp-blur-in {
	animation-name: smp-blur-in !important;
	animation-duration: var(--smp-duration-slow) !important;
	animation-timing-function: var(--smp-ease-out) !important;
	animation-fill-mode: both !important;
}

/* ── Trenner in Divi-Spalten ── */

body.smp-motion-active hr.smp-divider-shimmer {
	animation-name: smp-divider-shimmer-move !important;
	animation-duration: var(--smp-duration-slow) !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}

body.smp-motion-active .smp-divider-gradient-wave {
	animation-name: smp-divider-wave !important;
	animation-duration: var(--smp-duration-slow) !important;
	animation-timing-function: ease-in-out !important;
	animation-iteration-count: infinite !important;
	animation-direction: alternate !important;
}

body.smp-motion-active .smp-divider-grow {
	animation-name: smp-divider-grow-in !important;
	animation-duration: var(--smp-duration-slow) !important;
	animation-timing-function: var(--smp-ease-out) !important;
	animation-fill-mode: forwards !important;
}