/*
 * Duke of Drizzle — Shimmer Styles
 * Boujee boardwalk aesthetic.
 */

/* ── Idle holographic shimmer (.ddo-ready) ───────────────────────────────── */

@keyframes ddo-holo-shimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

.ddo-ready {
	/* Rolling holographic gradient */
	background: linear-gradient(
		120deg,
		#f9c74f  0%,
		#f472b6 20%,
		#818cf8 40%,
		#34d399 60%,
		#f472b6 80%,
		#f9c74f 100%
	);
	background-size: 300% auto;
	animation: ddo-holo-shimmer 3s linear infinite;

	/* Button chrome */
	color: #fff;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow: 0 4px 15px rgba(249, 199, 79, 0.4);
	transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.ddo-ready:hover {
	box-shadow: 0 6px 24px rgba(249, 199, 79, 0.65);
	transform: translateY(-1px);
}

.ddo-ready:active {
	transform: translateY(0);
}

/* ── AJAX success flash (.ddo-success-shimmer) ───────────────────────────── */
/*
 * Usage: add this class to the button after a successful AJAX response,
 * then remove it once the animation ends (listen for animationend).
 */

@keyframes ddo-flash {
	0%   { opacity: 0;   transform: skewX(-15deg) translateX(-120%); }
	35%  { opacity: 0.7; }
	100% { opacity: 0;   transform: skewX(-15deg) translateX(220%);  }
}

.ddo-success-shimmer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.78),
		transparent
	);
	animation: ddo-flash 0.55s ease-in-out forwards;
	pointer-events: none;
}