/* ==========================================================================
   Cannachris — Newsletter Button Shake on Validation Error
   Scope: Divi Opt-In / Newsletter module submit button.
   Principles:
   - transform-only animation (GPU-friendly, no layout shift)
   - CSS custom properties for timing/distance
   - respects prefers-reduced-motion
   - no JS-driven inline styles
   ========================================================================== */

:root {
	--cc-shake-count: 3;
	--cc-shake-distance: 0.5rem;
	--cc-shake-duration: 0.42s;
	--cc-shake-timing: ease-in-out;
	--cc-error-color: #f44336;
}

@keyframes cc-button-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(calc(var(--cc-shake-distance) * -1));
	}

	40% {
		transform: translateX(var(--cc-shake-distance));
	}

	60% {
		transform: translateX(calc(var(--cc-shake-distance) * -0.5));
	}

	80% {
		transform: translateX(calc(var(--cc-shake-distance) * 0.5));
	}
}

.et_pb_newsletter_button.cc-shake {
	animation: cc-button-shake var(--cc-shake-duration) var(--cc-shake-timing);
	will-change: transform;
}

/* Reduced motion: skip animation, use high-contrast outline instead. */
@media (prefers-reduced-motion: reduce) {
	.et_pb_newsletter_button.cc-shake {
		animation: none;
		will-change: auto;
		outline: 2px solid var(--cc-error-color);
		outline-offset: 2px;
	}
}