/*!
 * WaveButton — letter-wave hover button with an optional "sent" swap state
 * =============================================================================
 * Adapted from the community button by marcelodolza on Uiverse.io
 * (https://uiverse.io/marcelodolza/fat-zebra-11), re-themed to this site's
 * brand color and re-namespaced so it can drop into any project without
 * clashing with existing `.button`/`.state`/`.icon`/`.outline` classes.
 *
 * WHAT IT DOES
 *   - Each letter of the button label is its own <span>. On page load they
 *     "slide down" into place one after another (rgwb-slideDown); on hover
 *     they play a little up-down "wave" ripple across the word
 *     (rgwb-wave); a spinning conic-gradient light chases around the
 *     button border while hovered (rgwb-spin).
 *   - Optionally, a SECOND state block (`.rgwb-state--sent`) can swap in to
 *     replace the label + icon entirely — e.g. turning "Enviar solicitud"
 *     + a paper-plane icon into "¡Enviado!" + a checkmark once a form
 *     actually finishes submitting. The swap is driven by an `.is-sent`
 *     class on the button (see wave-button.js for wiring it up to a real
 *     Contact Form 7 success event), NOT by `:focus` like the original
 *     demo — a demo can fake success on focus, a real form shouldn't.
 *
 * HOW TO USE — two flavours
 *
 *   1) Simple link/button, no success state (see markup further down for
 *      the exact HTML — e.g. a "Ver Brochure" link):
 *        <a class="rgwb" href="...">
 *          <span class="rgwb__outline"></span>
 *          <span class="rgwb__state rgwb-state--default">
 *            <span class="rgwb__icon">...svg...</span>
 *            <p><span style="--i:0">V</span><span style="--i:1">e</span>...</p>
 *          </span>
 *        </a>
 *      Nothing else needed: hover/spin/wave all work from CSS alone.
 *
 *   2) Submit button with a real "sent" swap (see wave-button.js):
 *      add a second `.rgwb__state.rgwb-state--sent` block after the
 *      default one (hidden until `.is-sent` is toggled on `.rgwb`).
 *
 * All class names are prefixed `rgwb` ("R&G Wave Button") and all
 * `@keyframes` are prefixed `rgwb-` so this file is safe to enqueue
 * site-wide alongside any theme's own CSS.
 */

.rgwb {
	--primary: #00adc4;
	--neutral-1: #f7f8f7;
	--neutral-2: #e7e7e7;
	--radius: 14px;

	cursor: pointer;
	border-radius: var(--radius);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	border: none;
	box-shadow:
		0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
		0 10px 20px rgba(0, 0, 0, 0.2),
		0 4px 5px 0px rgba(0, 0, 0, 0.05);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.3s ease;
	min-width: 200px;
	padding: 20px;
	height: 68px;
	font-family: inherit;
	font-style: normal;
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	overflow: visible;
}

.rgwb:hover {
	transform: scale(1.02);
	box-shadow:
		0 0 1px 2px rgba(255, 255, 255, 0.3),
		0 15px 30px rgba(0, 0, 0, 0.3),
		0 10px 3px -3px rgba(0, 0, 0, 0.04);
}
.rgwb:active {
	transform: scale(1);
	box-shadow:
		0 0 1px 2px rgba(255, 255, 255, 0.3),
		0 10px 3px -3px rgba(0, 0, 0, 0.2);
}

/* Brushed-metal surface, built from two stacked pseudo-elements. */
.rgwb::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	border: 2.5px solid transparent;
	background:
		linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
		linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
	z-index: 0;
	transition: all 0.4s ease;
}
.rgwb:hover::after {
	transform: scale(1.05, 1.1);
	box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.rgwb::before {
	content: '';
	position: absolute;
	inset: 7px 6px 6px 6px;
	background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
	border-radius: 30px;
	filter: blur(0.5px);
	z-index: 0;
}

/* Spinning highlight that chases around the border on hover. */
.rgwb__outline {
	position: absolute;
	border-radius: inherit;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.4s ease;
	inset: -2px -3.5px;
}
.rgwb__outline::before {
	content: '';
	position: absolute;
	inset: -100%;
	background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
	animation: rgwb-spin 2s linear infinite;
	animation-play-state: paused;
}
@keyframes rgwb-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.rgwb:hover .rgwb__outline {
	opacity: 1;
}
.rgwb:hover .rgwb__outline::before {
	animation-play-state: running;
}

/* Layout for a state block (icon + label). */
.rgwb__state {
	padding-left: 29px;
	z-index: 2;
	display: flex;
	position: relative;
}
.rgwb__state p {
	display: flex;
	align-items: center;
	justify-content: center;
}
.rgwb__icon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transform: scale(1.25);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rgwb__icon svg {
	overflow: visible;
}

/* Per-letter entrance + hover wave. Each <span> needs an inline
   `style="--i:N"` (N = character index) so the animation-delay staggers. */
.rgwb__state p span {
	display: block;
	opacity: 0;
	animation: rgwb-slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.rgwb:hover .rgwb__state p span {
	opacity: 1;
	animation: rgwb-wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
@keyframes rgwb-wave {
	30% {
		opacity: 1;
		transform: translateY(4px) translateX(0) rotate(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-3px) translateX(0) rotate(0);
		color: var(--primary);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) rotate(0);
	}
}
@keyframes rgwb-slideDown {
	0% {
		opacity: 0;
		transform: translateY(-20px) translateX(5px) rotate(-90deg);
		color: var(--primary);
		filter: blur(5px);
	}
	30% {
		opacity: 1;
		transform: translateY(4px) translateX(0) rotate(0);
		filter: blur(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-3px) translateX(0) rotate(0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) rotate(0);
	}
}

/* ---- Optional "sent" swap state (submit buttons only) ---------------- */

.rgwb.is-sent .rgwb-state--default p span {
	opacity: 1;
	animation: rgwb-disappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes rgwb-disappear {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateX(5px) translateY(20px);
		color: var(--primary);
		filter: blur(5px);
	}
}

.rgwb-state--default .rgwb__icon svg {
	animation: rgwb-land 0.6s ease forwards;
}
.rgwb:hover .rgwb-state--default .rgwb__icon {
	transform: rotate(45deg) scale(1.25);
}
.rgwb.is-sent .rgwb-state--default svg {
	animation: rgwb-takeOff 0.8s linear forwards;
}
.rgwb.is-sent .rgwb-state--default .rgwb__icon {
	transform: rotate(0) scale(1.25);
}
@keyframes rgwb-takeOff {
	0% {
		opacity: 1;
	}
	60% {
		opacity: 1;
		transform: translateX(70px) rotate(45deg) scale(2);
	}
	100% {
		opacity: 0;
		transform: translateX(160px) rotate(45deg) scale(0);
	}
}
@keyframes rgwb-land {
	0% {
		transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
		opacity: 0;
		filter: blur(3px);
	}
	100% {
		transform: translateX(0) translateY(0) rotate(0);
		opacity: 1;
		filter: blur(0);
	}
}

/* Little "contrail" line left behind the icon as it takes off. */
.rgwb-state--default .rgwb__icon::before {
	content: '';
	position: absolute;
	top: 50%;
	height: 2px;
	width: 0;
	left: -5px;
	background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.rgwb.is-sent .rgwb-state--default .rgwb__icon::before {
	animation: rgwb-contrail 0.8s linear forwards;
}
@keyframes rgwb-contrail {
	0% {
		width: 0;
		opacity: 1;
	}
	8% {
		width: 15px;
	}
	60% {
		opacity: 0.7;
		width: 80px;
	}
	100% {
		opacity: 0;
		width: 160px;
	}
}

.rgwb-state--sent {
	display: none;
}
.rgwb-state--sent svg {
	transform: scale(1.25);
	margin-right: 8px;
}
.rgwb.is-sent .rgwb-state--default {
	position: absolute;
}
.rgwb.is-sent .rgwb-state--sent {
	display: flex;
}
.rgwb.is-sent .rgwb-state--sent span {
	opacity: 0;
	animation: rgwb-slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.rgwb.is-sent .rgwb-state--sent .rgwb__icon svg {
	opacity: 0;
	animation: rgwb-appear 1.2s ease forwards 0.8s;
}
@keyframes rgwb-appear {
	0% {
		opacity: 0;
		transform: scale(4) rotate(-40deg);
		color: var(--primary);
		filter: blur(4px);
	}
	30% {
		opacity: 1;
		transform: scale(0.6);
		filter: blur(1px);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rgwb,
	.rgwb * {
		animation: none !important;
		transition: none !important;
	}
	.rgwb__state p span {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}