/*
 * ma-buttons.css
 * /wp-content/themes/bricks-child/css/ma-buttons.css
 *
 * Hierarchy:
 *   1. This file     — working defaults, button looks correct with zero config
 *   2. Bricks panel  — element Style controls override via Bricks-generated CSS
 *   3. Custom CSS    — always wins
 *
 * Typography NOT set here — inherits from Bricks theme styles or element controls
 */

/* ══════════════════════════════════════════════════
   SHARED STRUCTURE
══════════════════════════════════════════════════ */
.ma-liquid-btn,
.ma-magnetic-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.35s ease, box-shadow 0.4s ease;
	border-radius: 50px;
	padding: 18px 44px;
}

.ma-liquid-btn:active,
.ma-magnetic-btn:active {
	transform: translateY(-1px) !important;
}

.ma-liquid-btn i,
.ma-magnetic-btn i {
	position: relative;
	z-index: 2;
}

/* ══════════════════════════════════════════════════
   LIQUID BUTTON
══════════════════════════════════════════════════ */
.ma-liquid-btn {
	color: #ffffff;
	background: linear-gradient(135deg, #b060d8, #9b4dca, #6a1fa0, #3a0878, #9b4dca);
	background-size: 300% 300%;
	animation: ma-liquid-shift 5s ease infinite;
	border: none;
}

@keyframes ma-liquid-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.ma-liquid-btn:hover {
	transform: translateY(-4px);
	box-shadow:
		0 0 60px rgba(155, 77, 202, 0.75),
		0 0 120px rgba(155, 77, 202, 0.3),
		0 8px 32px rgba(0, 0, 0, 0.35);
}

.ma-liquid-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, #e090f5, #9b4dca);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 0;
}

.ma-liquid-btn:hover::before {
	opacity: 1;
}

.ma-liquid-btn::after {
	content: '';
	position: absolute;
	top: -60%;
	left: -70%;
	width: 45%;
	height: 220%;
	background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
	transform: skewX(-15deg);
	transition: left 0.6s ease;
	pointer-events: none;
	z-index: 0;
}

.ma-liquid-btn:hover::after {
	left: 125%;
}

.ma-liquid-label {
	position: relative;
	z-index: 2;
	color: inherit;
	display: inline-block;
}

/* ══════════════════════════════════════════════════
   MAGNETIC BUTTON
══════════════════════════════════════════════════ */
.ma-magnetic-btn {
	color: #e8d5f5;
	background: #1a0030;
	border: 1px solid rgba(92, 31, 168, 0.4);
	transition: color 0.35s ease, transform 0.35s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.ma-magnetic-btn:hover {
	transform: translateY(-4px);
	box-shadow:
		0 0 50px rgba(92, 31, 168, 0.65),
		0 8px 32px rgba(0, 0, 0, 0.4);
	border-color: rgba(155, 77, 202, 0.6);
}

.ma-magnetic-fill {
	position: absolute;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle, #b060d8 0%, #6a1fa0 50%, transparent 75%);
	transition: width 0.55s ease, height 0.55s ease, opacity 0.4s ease;
}

.ma-magnetic-label {
	position: relative;
	z-index: 2;
	color: inherit;
	display: inline-block;
}