/*!
 * ShineButton — pill button with a hover "shine sweep" + sliding arrow
 * =============================================================================
 * Adapted from the community button by satyamchaudharydev on Uiverse.io
 * (https://uiverse.io/satyamchaudharydev/rude-wolverine-24), re-themed to
 * this site's brand color and re-namespaced (`rg-shine-btn` / `rgsb-*`) so
 * it can drop into any project without clashing with existing button
 * styles.
 *
 * Replaces the earlier per-letter "WaveButton" component (removed): this
 * one is intentionally simpler — no JS required at all, pure CSS, works
 * on any <a> or <button>.
 *
 * WHAT IT DOES
 *   - A soft drop shadow + colored pill background at rest.
 *   - On hover: the button scales up very slightly, the border brightens,
 *     the trailing arrow icon slides right a few pixels, and a diagonal
 *     light streak sweeps across the button on a loop (rgsb-shine) for as
 *     long as the pointer stays over it.
 *
 * HOW TO USE
 *   <a href="/wherever" class="rg-shine-btn">
 *     Texto del botón
 *     <svg class="rg-shine-btn__icon" viewBox="0 0 24 24" fill="currentColor">
 *       <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"/>
 *     </svg>
 *   </a>
 * Works the same on a real <button type="submit"> for form submits — no
 * markup differences needed, unlike the old WaveButton.
 *
 * Override the color per-instance if needed:
 *   <a class="rg-shine-btn" style="--rgsb-bg:#111e38;">...
 *
 * All class names are prefixed `rg-shine-btn` and the keyframe is
 * `rgsb-shine`, so this file is safe to enqueue site-wide alongside any
 * theme's own CSS.
 */

.rg-shine-btn {
	--rgsb-bg: #00adc4;

	position: relative;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	padding-block: 0.75rem;
	padding-inline: 1.75rem;
	background-color: var(--rgsb-bg);
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	gap: 10px;
	font-weight: bold;
	font-family: inherit;
	border: 3px solid rgba(255, 255, 255, 0.3);
	outline: none;
	overflow: hidden;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}

.rg-shine-btn__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	transition: all 0.3s ease-in-out;
}

.rg-shine-btn:hover {
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.rg-shine-btn:hover .rg-shine-btn__icon {
	transform: translateX(4px);
}

.rg-shine-btn:hover::before {
	animation: rgsb-shine 1.5s ease-out infinite;
}

.rg-shine-btn::before {
	content: '';
	position: absolute;
	width: 100px;
	height: 100%;
	background-image: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.8),
		rgba(255, 255, 255, 0) 70%
	);
	top: 0;
	left: -100px;
	opacity: 0.6;
	pointer-events: none;
}

@keyframes rgsb-shine {
	0% {
		left: -100px;
	}
	60% {
		left: 100%;
	}
	to {
		left: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rg-shine-btn,
	.rg-shine-btn * {
		transition: none !important;
		animation: none !important;
	}
}