/* ═══════════════════════════════════════════════════════════════════
   BUTTON HOVER EFFECTS

   A set of interchangeable hover treatments. A button opts in with
   `btn-fx` plus one modifier:

       <a class="gd-btn btn-fx btn-fx--fill">

   Switch the whole site by changing GD_BUTTON_FX in functions.php —
   `fill` | `sweep` | `lift` | `ripple` | `none`. Nothing else needs
   editing; js/button-fx.js backfills any markup the theme does not
   render itself (Contact Form 7's submit input).

   Adding a new effect: define `.btn-fx--<name>` here and add the name to
   the constant. Effects must not set `background` on the button itself —
   they paint through the ::before layer so the base colour is free to
   stay put.
   ═══════════════════════════════════════════════════════════════════ */

:root {
	--btn-fx-t: .5s;
	--btn-fx-ease: cubic-bezier(.22, .61, .36, 1);
}

.btn-fx {
	overflow: hidden;
	position: relative;
	z-index: 0;                 /* own stacking context for the layer below */
	transition: background-color var(--btn-fx-t) var(--btn-fx-ease),
	            border-color var(--btn-fx-t) var(--btn-fx-ease),
	            color var(--btn-fx-t) var(--btn-fx-ease),
	            transform var(--btn-fx-t) var(--btn-fx-ease),
	            box-shadow var(--btn-fx-t) var(--btn-fx-ease);
}

/* Paints above the button's own background, below its text. */
.btn-fx::before {
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* An effect owns the hover, so the plain colour swap steps aside. */
.gd-btn.btn-fx:hover,
.gd-btn.btn-fx:focus-visible {
	background: var(--gd-blue);
	border-color: var(--gd-blue);
	color: var(--gd-white);
}
.gd-btn--outline.btn-fx:hover,
.gd-btn--outline.btn-fx:focus-visible {
	background: transparent;
	border-color: var(--gd-blue);
	color: var(--gd-blue);
}

/* ── fill — a panel wipes across from the left ────────────────── */
.btn-fx--fill::before {
	background: var(--gd-white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--btn-fx-t) var(--btn-fx-ease);
}
.btn-fx--fill:hover::before,
.btn-fx--fill:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}
.gd-btn.btn-fx--fill:hover,
.gd-btn.btn-fx--fill:focus-visible {
	color: var(--gd-blue);
}

.gd-btn--outline.btn-fx--fill::before {
	background: var(--gd-blue);
}
.gd-btn--outline.btn-fx--fill:hover,
.gd-btn--outline.btn-fx--fill:focus-visible {
	color: var(--gd-white);
}

/* ── sweep — a soft band travels across, colour unchanged ─────── */
.btn-fx--sweep::before {
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
	transform: translateX(-110%);
	transition: transform .75s var(--btn-fx-ease);
}
.btn-fx--sweep:hover::before,
.btn-fx--sweep:focus-visible::before {
	transform: translateX(110%);
}

.gd-btn--outline.btn-fx--sweep::before {
	background: linear-gradient(100deg, transparent 20%, rgba(43, 95, 148, .16) 50%, transparent 80%);
}

/* ── lift — rises with a shadow, no fill layer ────────────────── */
.btn-fx--lift:hover,
.btn-fx--lift:focus-visible {
	box-shadow: 0 10px 24px rgba(4, 32, 42, .22);
	transform: translateY(-3px);
}

/* ── ripple — a disc grows from the pointer (js sets --mx/--my) ─ */
.btn-fx--ripple::before {
	aspect-ratio: 1;
	background: var(--gd-white);
	border-radius: 50%;
	height: auto;
	inset: auto;
	left: var(--mx, 50%);
	top: var(--my, 50%);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .55s var(--btn-fx-ease);
	width: 240%;
}
.btn-fx--ripple:hover::before,
.btn-fx--ripple:focus-visible::before {
	transform: translate(-50%, -50%) scale(1);
}
.gd-btn.btn-fx--ripple:hover,
.gd-btn.btn-fx--ripple:focus-visible {
	color: var(--gd-blue);
}

.gd-btn--outline.btn-fx--ripple::before {
	background: var(--gd-blue);
}
.gd-btn--outline.btn-fx--ripple:hover,
.gd-btn--outline.btn-fx--ripple:focus-visible {
	color: var(--gd-white);
}

/* Contact Form 7 renders <input type="submit">, which cannot host a
   ::before — give it the colour transition on its own. */
input.gd-btn.btn-fx {
	overflow: visible;
}
input.gd-btn.btn-fx:hover,
input.gd-btn.btn-fx:focus-visible {
	background: var(--gd-white);
	color: var(--gd-blue);
}
input.gd-btn.btn-fx--lift:hover,
input.gd-btn.btn-fx--lift:focus-visible {
	background: var(--gd-blue);
	color: var(--gd-white);
}

@media (prefers-reduced-motion: reduce) {
	.btn-fx,
	.btn-fx::before {
		transition: none !important;
	}
	.btn-fx--lift:hover {
		transform: none;
	}
}