/* ── TOF Gooey Button Animation ──────────────────────────────────────────────
 *
 * Supports two widget types:
 *   • Elementor Button  — .elementor-button  (widget: elementor-widget-button)
 *   • Everest Forms     — .evf-submit        (widget: elementor-widget-evf-basic)
 *
 * The widget wrapper receives .tof-gooey via tof-animations.js when the
 * "Animation" control is set to "Gooey".
 *
 * On touch/mobile devices (no true hover) the gooey animation is disabled and
 * the button's own background/color transition takes over instead.
 *
 * Blob color: --tof-blob-color  (JS reads from Elementor's generated hover rule)
 * Hover text: --tof-blob-text-color  (defaults to #fff)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Always needed for content stacking */
.tof-gooey .elementor-button,
.tof-gooey .evf-submit {
	overflow: hidden;
	position: relative;
}

/*
 * Keep text/icon above the blobs.
 * Elementor buttons already have .elementor-button-content-wrapper.
 * For EVF, JS injects a .tof-btn-content span around the button text.
 */
.tof-gooey .elementor-button .elementor-button-content-wrapper,
.tof-gooey .evf-submit .tof-btn-content {
	position: relative;
	z-index: 1;
}

/* Hide blobs on touch devices — native transition handles hover */
.tof-gooey .elementor-button .c-button__blobs,
.tof-gooey .evf-submit .c-button__blobs {
	display: none;
}

/* ── Gooey animation — hover-capable devices only ────────────────────────── */
@media (hover: hover) and (pointer: fine) {

	.tof-gooey .elementor-button,
	.tof-gooey .evf-submit {
		transition: color 700ms ease;
	}

	/*
	 * Lock the button's own background-color on hover so the configured
	 * hover-bg doesn't flash in before the blobs finish animating.
	 * JS stores the normal computed background in --tof-button-bg.
	 */
	.tof-gooey .elementor-button:hover,
	.tof-gooey .elementor-button:focus,
	.tof-gooey .evf-submit:hover,
	.tof-gooey .evf-submit:focus {
		background-color: var(--tof-button-bg, transparent) !important;
	}

	/* Show blobs on desktop */
	.tof-gooey .elementor-button .c-button__blobs,
	.tof-gooey .evf-submit .c-button__blobs {
		display: block;
		position: absolute;
		top: -5px;
		left: -2px;
		bottom: -3px;
		right: -1px;
		overflow: hidden;
		border-radius: inherit;
		filter: url(#tof-goo);
		z-index: 0;
	}

	.tof-gooey .elementor-button .c-button__blobs div,
	.tof-gooey .evf-submit .c-button__blobs div {
		background-color: var(--tof-blob-color, #005e83);
		width: 34%;
		height: 100%;
		border-radius: 100%;
		position: absolute;
		transform: scale(1.4) translateY(125%) translateZ(0);
		transition: transform 700ms ease;
	}

	.tof-gooey .elementor-button .c-button__blobs div:nth-child(1),
	.tof-gooey .evf-submit .c-button__blobs div:nth-child(1) {
		left: -5%;
	}

	.tof-gooey .elementor-button .c-button__blobs div:nth-child(2),
	.tof-gooey .evf-submit .c-button__blobs div:nth-child(2) {
		left: 30%;
		transition-delay: 60ms;
	}

	.tof-gooey .elementor-button .c-button__blobs div:nth-child(3),
	.tof-gooey .evf-submit .c-button__blobs div:nth-child(3) {
		left: 66%;
		transition-delay: 25ms;
	}

	.tof-gooey .elementor-button:hover .c-button__blobs div,
	.tof-gooey .evf-submit:hover .c-button__blobs div {
		transform: scale(1.4) translateY(0) translateZ(0);
	}

	.tof-gooey .elementor-button:hover,
	.tof-gooey .evf-submit:hover {
		color: var(--tof-blob-text-color, #fff) !important;
	}

}