/**
 * Button attention effect — the layer `button-attention.js` injects beside a native Elementor
 * Button's <a>, when (and only when) that button's "Attention effect" is not None.
 *
 * ── WHY THE LAYER IS A SIBLING OF THE <a>, NOT A CHILD ─────────────────────────────────────────
 * Home's button carries `overflow: hidden` on `.elementor-button` in its own Custom CSS, to clip
 * the gold hover fill to the pill. A child of that <a> can never paint outside it, so an OUTWARD
 * glow drawn inside the button is clipped away. The layer is therefore inserted AFTER the <a>, in
 * the widget wrapper (which Elementor makes `position: relative`), and the JS sizes it to the <a>'s
 * own offset box. Nothing about the <a> changes, so the page's Custom CSS is untouched.
 * The FULL sweep, which must stay INSIDE the pill, clips itself: `overflow: hidden` + the <a>'s
 * computed border-radius, copied onto the layer by the JS.
 *
 * ⭐ Stacking falls out right without a z-index: the <a> is `position: relative; z-index: auto`, so
 * its `::before` fill (z 0) and its label (z 1) paint in the SAME stacking context as this layer.
 * The layer (auto, later in the tree) lands above the fill and below the label.
 *
 * ── THE HOVER RULE, WHICH IS THE HARD REQUIREMENT ──────────────────────────────────────────────
 * While the <a> is hovered or keyboard-focused the layer's OWN opacity goes to 0, in CSS, so it is
 * instant and independent of the JS. The WAAPI animations run on CHILDREN of the layer and never
 * on the layer itself — an animation outranks every normal declaration, so if it animated this
 * element's opacity no hover rule could win.
 * ⛔ `:hover` and `:focus-visible` are TWO rules, not one selector list: an engine without
 * `:focus-visible` drops the whole list as invalid, and would lose the hover half with it.
 *
 * Everything a control sets (colours, widths, blur, strength, fade) comes from Elementor's compiled
 * CSS at (0,3,0)+; the values here are only the fallbacks and the fixed geometry. Where a rule here
 * sets the SAME property a control sets (colour, opacity, width, blur), it is that fallback, and the
 * compiled control selector wins on specificity (§6a) — never on source order.
 */

.tw-attn {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 1;
	transition-property: opacity;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.elementor-button:hover ~ .tw-attn {
	opacity: 0;
}

.elementor-button:focus-visible ~ .tw-attn {
	opacity: 0;
}

.tw-attn.is-off {
	opacity: 0;
}

/* Once hovered, the JS sets `display: none` after the fade (a composited layer, even invisible,
 * changed the label's anti-aliasing — see `twHideSoon()`). Coming back from `display: none` has
 * no before-state to transition from, so this supplies one and the layer fades back in. An engine
 * without `@starting-style` shows it at once, which is the only cost. */
@starting-style {
	.tw-attn {
		opacity: 0;
	}
}

.tw-attn__fx {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ── Full sweep ─────────────────────────────────────────────────────────────────────────────── */

.tw-attn--sweep {
	overflow: hidden;
}

.tw-attn__band {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	/* Parked well off the pill: this is what shows whenever no animation is applied. */
	transform: translateX(-400%);
}

.tw-attn__beam {
	position: absolute;
	inset: 0;
	color: #fff3dd;
	opacity: 0.35;
	background-image: linear-gradient(90deg, transparent 0%, currentColor 40%, currentColor 60%, transparent 100%);
}

/* ── Edge sweep + Shimmer: the OUTSIDE HALO (0.4.56) ───────────────────────────────────────── */
/* `base` is the halo at rest, `win` the band window, `lit` the halo copy the window reveals. The
 * JS sets the geometry and the box-shadow (see twHaloGeometry for why an outer shadow is the
 * exclusion mechanism); everything here is a fallback for what a control owns. */

.tw-attn--edge {
	color: #e2c093;
}

.tw-attn__base {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tw-attn--edge .tw-attn__base {
	opacity: 0;
}

.tw-attn--shimmer .tw-attn__base {
	color: #b18051;
	opacity: 0.45;
}

.tw-attn__win {
	position: absolute;
	/* Parked off the pill: what shows whenever no animation is applied. */
	left: -10000px;
	width: 30%;
	overflow: hidden;
	opacity: 0.9;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
}

.tw-attn--shimmer .tw-attn__win {
	width: 35%;
}

.tw-attn__lit {
	position: absolute;
	left: 0;
}

.tw-attn--shimmer .tw-attn__lit {
	color: #f3dcb4;
}

/* ── Edge pulse ─────────────────────────────────────────────────────────────────────────────── */

.tw-attn--pulse .tw-attn__fx {
	box-sizing: border-box;
	color: #e2c093;
	border: 0 solid currentColor;
	opacity: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────────── */
/* The JS does not build the two sweeps at all under reduced motion, holds the pulse still and
 * keeps only Shimmer's resting halo (no travelling highlight);
 * this is the belt to that brace, for the moment between a preference change and the rebuild.
 * Last in the file and prefixed, so no later rule can re-enable it (§6b). */
@media (prefers-reduced-motion: reduce) {
	.tw-attn.tw-attn--sweep,
	.tw-attn.tw-attn--edge,
	.tw-attn.tw-attn--shimmer .tw-attn__win {
		display: none;
	}
}