/* ==========================================================================
   BTN HOVER FX — Reusable button hover animations.
   Usage: add class  .btn-fx--{type}  to any <a> or <button>.
   Types: shine | fill-sweep | ripple | magnetic
   Accent color defaults to the project orange; override with --btn-fx-accent.
   ========================================================================== */

:root {
	--btn-fx-accent: #f5700a;
}

/* ---------- Shared base ---------- */

[class*="btn-fx--"] {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            color 0.3s;
}

/* =======================================================================
   1. SHINE  — glossy light sweep across the surface
   ======================================================================= */

.btn-fx--shine::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -75%;
	width: 50%;
	height: 200%;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 255, 255, 0.45) 45%,
		rgba(255, 255, 255, 0.15) 50%,
		transparent 55%
	);
	transform: skewX(-20deg);
	transition: none;
	pointer-events: none;
	z-index: 1;
}

.btn-fx--shine:hover::after {
	animation: btn-fx-shine 0.7s ease forwards;
}

.btn-fx--shine:hover {
	box-shadow: 0 6px 24px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.35);
}

@keyframes btn-fx-shine {
	0%   { left: -75%; }
	100% { left: 125%; }
}

/* =======================================================================
   2. FILL SWEEP  — accent color fills from bottom with a smooth wave
   ======================================================================= */

.btn-fx--fill-sweep::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--btn-fx-accent);
	border-radius: inherit;
	transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

.btn-fx--fill-sweep:hover::before {
	height: 100%;
}

.btn-fx--fill-sweep:hover {
	color: #fff;
	border-color: var(--btn-fx-accent);
	box-shadow: 0 8px 28px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.3);
}

/* =======================================================================
   2b. FILL SWEEP LEFT  — accent color fills from left to right
   ======================================================================= */

.btn-fx--fill-sweep-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--btn-fx-accent);
	border-radius: inherit;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

.btn-fx--fill-sweep-left:hover::before {
	width: 100%;
}

.btn-fx--fill-sweep-left:hover {
	color: #fff;
	border-color: var(--btn-fx-accent);
	box-shadow: 0 8px 28px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.3);
}

/* =======================================================================
   3. RIPPLE  — expanding circle from center on hover
   ======================================================================= */

.btn-fx--ripple::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: var(--btn-fx-accent);
	transform: translate(-50%, -50%);
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
	            height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: -1;
}

.btn-fx--ripple:hover::before {
	width: 300%;
	height: 300%;
}

.btn-fx--ripple:hover {
	color: #fff;
	border-color: var(--btn-fx-accent);
	box-shadow: 0 6px 20px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.3);
}

/* =======================================================================
   4. MAGNETIC  — lifts + tilts toward cursor, glow underneath
   JS adds inline transform via [data-magnetic]; CSS handles the rest.
   Falls back to a clean lift if JS is unavailable.
   ======================================================================= */

.btn-fx--magnetic {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s ease;
	will-change: transform;
}

.btn-fx--magnetic:hover {
	box-shadow: 0 8px 30px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.35),
	            0 0 0 2px var(--btn-fx-accent);
}

/* Fallback if no JS magnetic effect */
.btn-fx--magnetic:not([style*="translate"]):hover {
	transform: translateY(-3px) scale(1.03);
}

/* =======================================================================
   5. NEON PULSE  — intense glowing border pulse + lift
   ======================================================================= */

.btn-fx--neon-pulse {
	border: 2px solid var(--btn-fx-accent) !important;
}

.btn-fx--neon-pulse:hover {
	color: #fff;
	background: var(--btn-fx-accent);
	transform: translateY(-4px) scale(1.04);
	animation: btn-fx-neon-glow 1.2s ease-in-out infinite;
}

@keyframes btn-fx-neon-glow {
	0%, 100% {
		box-shadow:
			0 0 8px  var(--btn-fx-accent),
			0 0 20px var(--btn-fx-accent),
			0 0 40px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.4),
			0 0 80px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.15);
	}
	50% {
		box-shadow:
			0 0 12px var(--btn-fx-accent),
			0 0 30px var(--btn-fx-accent),
			0 0 60px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.5),
			0 0 100px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.2);
	}
}

/* =======================================================================
   6. GLITCH  — RGB split + shake, cyberpunk style
   ======================================================================= */

.btn-fx--glitch {
	overflow: visible;
}

.btn-fx--glitch::before,
.btn-fx--glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: inherit;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.btn-fx--glitch::before { color: #0ff; }
.btn-fx--glitch::after  { color: #f0f; }

.btn-fx--glitch:hover {
	animation: btn-fx-glitch-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	box-shadow: 0 0 20px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.5);
}

.btn-fx--glitch:hover::before {
	opacity: 0.8;
	animation: btn-fx-glitch-r 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
}

.btn-fx--glitch:hover::after {
	opacity: 0.8;
	animation: btn-fx-glitch-b 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
}

@keyframes btn-fx-glitch-shake {
	0%, 100% { transform: translate(0); }
	10%  { transform: translate(-3px, -2px); }
	20%  { transform: translate(3px, 2px); }
	30%  { transform: translate(-2px, 1px); }
	40%  { transform: translate(2px, -1px); }
	50%  { transform: translate(-1px, 2px); }
	60%  { transform: translate(3px, -1px); }
	70%  { transform: translate(-2px, -2px); }
	80%  { transform: translate(1px, 3px); }
	90%  { transform: translate(-1px, -1px); }
}

@keyframes btn-fx-glitch-r {
	0%, 100% { clip-path: inset(0 0 65% 0); transform: translate(-4px, -2px); }
	25%      { clip-path: inset(30% 0 40% 0); transform: translate(4px, 2px); }
	50%      { clip-path: inset(60% 0 0 0); transform: translate(-3px, 1px); }
	75%      { clip-path: inset(0 0 50% 0); transform: translate(3px, -1px); }
}

@keyframes btn-fx-glitch-b {
	0%, 100% { clip-path: inset(60% 0 0 0); transform: translate(4px, 2px); }
	25%      { clip-path: inset(0 0 40% 0); transform: translate(-3px, -1px); }
	50%      { clip-path: inset(20% 0 50% 0); transform: translate(3px, 2px); }
	75%      { clip-path: inset(50% 0 10% 0); transform: translate(-4px, -2px); }
}

/* =======================================================================
   7. EXPLODE  — burst outward with scale + particle ring + snap back
   ======================================================================= */

.btn-fx--explode:hover {
	animation: btn-fx-explode 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.btn-fx--explode::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	border: 3px solid var(--btn-fx-accent);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.btn-fx--explode:hover::before {
	animation: btn-fx-explode-ring 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.btn-fx--explode::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle, rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.3) 0%, transparent 70%);
}

.btn-fx--explode:hover::after {
	animation: btn-fx-explode-flash 0.5s ease-out forwards;
}

@keyframes btn-fx-explode {
	0%   { transform: scale(1); box-shadow: none; }
	30%  { transform: scale(1.15); box-shadow: 0 0 30px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.6); }
	50%  { transform: scale(0.95); }
	70%  { transform: scale(1.05); box-shadow: 0 8px 30px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.35); }
	100% { transform: scale(1); box-shadow: 0 6px 24px rgba(var(--btn-fx-accent-rgb, 245, 112, 10), 0.25); }
}

@keyframes btn-fx-explode-ring {
	0%   { width: 0; height: 0; opacity: 1; border-width: 3px; }
	60%  { opacity: 0.6; }
	100% { width: 250%; height: 250%; opacity: 0; border-width: 1px; }
}

@keyframes btn-fx-explode-flash {
	0%   { opacity: 0; transform: scale(0.5); }
	30%  { opacity: 0.6; transform: scale(1.3); }
	100% { opacity: 0; transform: scale(2); }
}