/*
 * Better Hover Effects
 * Frontend Styles
 */

:root {
	--bhe-duration: 0.3s;
	--bhe-lift-distance: -8px;
	--bhe-zoom-scale: 1.1;
	--bhe-rotate-angle: 10deg;
}

.bhe-effect {
	display: inline-block;
	transition: all var(--bhe-duration, 0.3s) var(--bhe-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94));
	will-change: transform;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

/* ---- Glow ---- */
.bhe-glow {
	--bhe-glow-color: rgba(255, 255, 255, 0.6);
	--bhe-glow-blur: 12px;
}

.bhe-glow:hover {
	text-shadow: 0 0 var(--bhe-glow-blur) var(--bhe-glow-color);
}

.bhe-glow:hover img {
	filter: drop-shadow(0 0 var(--bhe-glow-blur) var(--bhe-glow-color));
}

.bhe-glow img {
	transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}

.bhe-glow-blue   { --bhe-glow-color: rgba(59, 130, 246, 0.6); }
.bhe-glow-pink   { --bhe-glow-color: rgba(236, 72, 153, 0.6); }
.bhe-glow-green  { --bhe-glow-color: rgba(34, 197, 94, 0.6); }
.bhe-glow-gold   { --bhe-glow-color: rgba(234, 179, 8, 0.6); }
.bhe-glow-white  { --bhe-glow-color: rgba(255, 255, 255, 0.6); }
.bhe-glow-red    { --bhe-glow-color: rgba(239, 68, 68, 0.6); }
.bhe-glow-orange { --bhe-glow-color: rgba(249, 115, 22, 0.6); }
.bhe-glow-purple { --bhe-glow-color: rgba(168, 85, 247, 0.6); }
.bhe-glow-indigo { --bhe-glow-color: rgba(99, 102, 241, 0.6); }
.bhe-glow-teal   { --bhe-glow-color: rgba(20, 184, 166, 0.6); }
.bhe-glow-cyan   { --bhe-glow-color: rgba(6, 182, 212, 0.6); }
.bhe-glow-rose   { --bhe-glow-color: rgba(244, 63, 94, 0.6); }
.bhe-glow-violet { --bhe-glow-color: rgba(139, 92, 246, 0.6); }
.bhe-glow-lime   { --bhe-glow-color: rgba(132, 204, 22, 0.6); }
.bhe-glow-sky    { --bhe-glow-color: rgba(14, 165, 233, 0.6); }

/* ---- Lift ---- */
.bhe-lift {
	--bhe-lift-distance: -8px;
}

.bhe-lift-sm { --bhe-lift-distance: -4px; }
.bhe-lift-md { --bhe-lift-distance: -8px; }
.bhe-lift-lg { --bhe-lift-distance: -16px; }

.bhe-lift:hover {
	transform: translateY(var(--bhe-lift-distance));
	box-shadow: 0 calc(var(--bhe-lift-distance, -8px) * -1 + 4px) calc(var(--bhe-lift-distance, -8px) * -1 + 12px) rgba(0, 0, 0, 0.15);
}

/* ---- Zoom ---- */
.bhe-zoom {
	--bhe-zoom-scale: 1.1;
}

.bhe-zoom-105 { --bhe-zoom-scale: 1.05; }
.bhe-zoom-110 { --bhe-zoom-scale: 1.1; }
.bhe-zoom-120 { --bhe-zoom-scale: 1.2; }

.bhe-zoom:hover {
	transform: scale(var(--bhe-zoom-scale));
}

/* ---- Rotate ---- */
.bhe-rotate {
	--bhe-rotate-angle: 10deg;
}

.bhe-rotate-5 { --bhe-rotate-angle: 5deg; }
.bhe-rotate-10 { --bhe-rotate-angle: 10deg; }
.bhe-rotate-15 { --bhe-rotate-angle: 15deg; }
.bhe-rotate-45 { --bhe-rotate-angle: 45deg; }
.bhe-rotate-90 { --bhe-rotate-angle: 90deg; }
.bhe-rotate-180 { --bhe-rotate-angle: 180deg; }

.bhe-rotate:hover {
	transform: rotate(var(--bhe-rotate-angle));
}

@keyframes bhe-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.bhe-spin {
	animation: bhe-spin 2s linear infinite;
}

/* ---- Image Overlay ---- */

.bhe-overlay-container {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	line-height: 0;
}

.bhe-overlay-container img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--bhe-duration, 0.3s) var(--bhe-easing, ease),
	            filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}

.bhe-overlay-content {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	line-height: 1.4;
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: all var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
	pointer-events: none;
}

/* Fade */
.bhe-overlay-fade .bhe-overlay-content {
	inset: 0;
}

.bhe-overlay-fade:hover .bhe-overlay-content {
	opacity: 1;
}

/* Slide Up */
.bhe-overlay-slide-up .bhe-overlay-content {
	inset: 0;
	transform: translateY(100%);
}

.bhe-overlay-slide-up:hover .bhe-overlay-content {
	transform: translateY(0);
	opacity: 1;
}

/* Slide Down */
.bhe-overlay-slide-down .bhe-overlay-content {
	inset: 0;
	transform: translateY(-100%);
}

.bhe-overlay-slide-down:hover .bhe-overlay-content {
	transform: translateY(0);
	opacity: 1;
}

/* Slide Left */
.bhe-overlay-slide-left .bhe-overlay-content {
	inset: 0;
	transform: translateX(100%);
}

.bhe-overlay-slide-left:hover .bhe-overlay-content {
	transform: translateX(0);
	opacity: 1;
}

/* Slide Right */
.bhe-overlay-slide-right .bhe-overlay-content {
	inset: 0;
	transform: translateX(-100%);
}

.bhe-overlay-slide-right:hover .bhe-overlay-content {
	transform: translateX(0);
	opacity: 1;
}

/* Zoom In */
.bhe-overlay-zoom-in .bhe-overlay-content {
	inset: 0;
	transform: scale(0);
}

.bhe-overlay-zoom-in:hover .bhe-overlay-content {
	transform: scale(1);
	opacity: 1;
}

/* Rotate In */
.bhe-overlay-rotate-in .bhe-overlay-content {
	inset: 0;
	transform: rotate(-180deg) scale(0);
}

.bhe-overlay-rotate-in:hover .bhe-overlay-content {
	transform: rotate(0deg) scale(1);
	opacity: 1;
}

/* Ripple */
.bhe-overlay-ripple .bhe-overlay-content::before {
	content: '';
	position: absolute;
	inset: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	transition: all var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
	transform: translate(-50%, -50%);
	z-index: 0;
}

.bhe-overlay-ripple .bhe-overlay-content > * {
	position: relative;
	z-index: 1;
}

.bhe-overlay-ripple:hover .bhe-overlay-content::before {
	width: 200%;
	height: 200%;
}

.bhe-overlay-ripple .bhe-overlay-content {
	inset: 0;
	opacity: 0;
	background: transparent;
	backdrop-filter: none;
}

.bhe-overlay-ripple:hover .bhe-overlay-content {
	opacity: 1;
}

/* Shutter Horizontal */
.bhe-overlay-shutter-h .bhe-overlay-content {
	inset: 0;
	transform: scaleX(0);
	transform-origin: left;
	background: rgba(0, 0, 0, 0.7);
}

.bhe-overlay-shutter-h:hover .bhe-overlay-content {
	transform: scaleX(1);
	opacity: 1;
}

/* Shutter Vertical */
.bhe-overlay-shutter-v .bhe-overlay-content {
	inset: 0;
	transform: scaleY(0);
	transform-origin: top;
	background: rgba(0, 0, 0, 0.7);
}

.bhe-overlay-shutter-v:hover .bhe-overlay-content {
	transform: scaleY(1);
	opacity: 1;
}

/* Flash */
.bhe-overlay-flash .bhe-overlay-content {
	inset: 0;
	opacity: 0;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: none;
}

.bhe-overlay-flash:hover .bhe-overlay-content {
	opacity: 1;
}

.bhe-overlay-flash:hover img {
	opacity: 0.7;
	filter: brightness(1.2);
}

/* Blur */
.bhe-overlay-blur .bhe-overlay-content {
	inset: 0;
	opacity: 0;
}

.bhe-overlay-blur:hover img {
	filter: blur(4px);
	transform: scale(1.05);
}

.bhe-overlay-blur:hover .bhe-overlay-content {
	opacity: 1;
}

/* ===================================================
 * v1.1 — Expanded Effects
 * =================================================== */

/* ---- Pulse ---- */
@keyframes bhe-pulse-keys {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(var(--bhe-pulse-scale, 1.05)); }
}
.bhe-pulse {
	--bhe-pulse-scale: 1.05;
}
.bhe-pulse-105 { --bhe-pulse-scale: 1.05; }
.bhe-pulse-110 { --bhe-pulse-scale: 1.1; }
.bhe-pulse-115 { --bhe-pulse-scale: 1.15; }
.bhe-pulse:hover {
	animation: bhe-pulse-keys var(--bhe-duration, 0.3s) ease-in-out;
}

/* ---- Shake ---- */
@keyframes bhe-shake-keys {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(calc(-1 * var(--bhe-shake-dist, 5px))); }
	50% { transform: translateX(var(--bhe-shake-dist, 5px)); }
	75% { transform: translateX(calc(-1 * var(--bhe-shake-dist, 5px))); }
}
.bhe-shake {
	--bhe-shake-dist: 5px;
}
.bhe-shake-subtle { --bhe-shake-dist: 3px; }
.bhe-shake-medium { --bhe-shake-dist: 5px; }
.bhe-shake-intense { --bhe-shake-dist: 10px; }
.bhe-shake:hover {
	animation: bhe-shake-keys var(--bhe-duration, 0.3s) ease-in-out;
}

/* ---- Wobble ---- */
@keyframes bhe-wobble-keys {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(calc(-1 * var(--bhe-wobble-angle, 5deg))); }
	75% { transform: rotate(var(--bhe-wobble-angle, 5deg)); }
}
.bhe-wobble {
	--bhe-wobble-angle: 5deg;
}
.bhe-wobble-5 { --bhe-wobble-angle: 5deg; }
.bhe-wobble-10 { --bhe-wobble-angle: 10deg; }
.bhe-wobble-15 { --bhe-wobble-angle: 15deg; }
.bhe-wobble:hover {
	animation: bhe-wobble-keys var(--bhe-duration, 0.3s) ease-in-out;
}

/* ---- Swing ---- */
@keyframes bhe-swing-keys {
	0% { transform: rotate(0deg); transform-origin: top center; }
	20% { transform: rotate(var(--bhe-swing-angle, 15deg)); }
	40% { transform: rotate(calc(-1 * var(--bhe-swing-angle, 15deg) * 0.6)); }
	60% { transform: rotate(calc(var(--bhe-swing-angle, 15deg) * 0.3)); }
	80% { transform: rotate(calc(-1 * var(--bhe-swing-angle, 15deg) * 0.3)); }
	100% { transform: rotate(0deg); }
}
.bhe-swing {
	--bhe-swing-angle: 15deg;
}
.bhe-swing-10 { --bhe-swing-angle: 10deg; }
.bhe-swing-15 { --bhe-swing-angle: 15deg; }
.bhe-swing-20 { --bhe-swing-angle: 20deg; }
.bhe-swing:hover {
	animation: bhe-swing-keys 1s ease-in-out;
}

/* ---- Float ---- */
@keyframes bhe-float-keys {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(var(--bhe-float-dist, -8px)); }
}
.bhe-float {
	--bhe-float-dist: -8px;
}
.bhe-float-sm { --bhe-float-dist: -4px; }
.bhe-float-md { --bhe-float-dist: -8px; }
.bhe-float-lg { --bhe-float-dist: -14px; }
.bhe-float:hover {
	animation: bhe-float-keys calc(var(--bhe-duration, 0.3s) * 2) ease-in-out infinite;
}

/* ---- Skew ---- */
.bhe-skew {
	--bhe-skew-angle: 5deg;
}
.bhe-skew-5 { --bhe-skew-angle: 5deg; }
.bhe-skew-10 { --bhe-skew-angle: 10deg; }
.bhe-skew-15 { --bhe-skew-angle: 15deg; }
.bhe-skew:hover {
	transform: skewX(var(--bhe-skew-angle));
}

/* ---- Shadow (no translate, just shadow) ---- */
.bhe-shadow {
	--bhe-shadow-val: 0 8px 25px rgba(0,0,0,0.18);
}
.bhe-shadow-sm { --bhe-shadow-val: 0 4px 12px rgba(0,0,0,0.12); }
.bhe-shadow-md { --bhe-shadow-val: 0 8px 25px rgba(0,0,0,0.18); }
.bhe-shadow-lg { --bhe-shadow-val: 0 16px 48px rgba(0,0,0,0.22); }
.bhe-shadow:hover {
	box-shadow: var(--bhe-shadow-val);
}

/* ---- Border Glow ---- */
.bhe-border-glow {
	--bhe-bg-color: rgba(255,255,255,0.5);
	transition: box-shadow var(--bhe-duration, 0.3s) var(--bhe-easing, ease), border-color var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}
.bhe-border-glow:hover {
	box-shadow: 0 0 15px var(--bhe-bg-color), inset 0 0 15px var(--bhe-bg-color);
	border-color: var(--bhe-bg-color);
}
.bhe-border-glow-white { --bhe-bg-color: rgba(255,255,255,0.5); }
.bhe-border-glow-blue { --bhe-bg-color: rgba(59,130,246,0.5); }
.bhe-border-glow-pink { --bhe-bg-color: rgba(236,72,153,0.5); }
.bhe-border-glow-green { --bhe-bg-color: rgba(34,197,94,0.5); }
.bhe-border-glow-gold { --bhe-bg-color: rgba(234,179,8,0.5); }
.bhe-border-glow-red { --bhe-bg-color: rgba(239,68,68,0.5); }
.bhe-border-glow-orange { --bhe-bg-color: rgba(249,115,22,0.5); }
.bhe-border-glow-purple { --bhe-bg-color: rgba(168,85,247,0.5); }
.bhe-border-glow-indigo { --bhe-bg-color: rgba(99,102,241,0.5); }
.bhe-border-glow-teal { --bhe-bg-color: rgba(20,184,166,0.5); }
.bhe-border-glow-cyan { --bhe-bg-color: rgba(6,182,212,0.5); }
.bhe-border-glow-rose { --bhe-bg-color: rgba(244,63,94,0.5); }
.bhe-border-glow-violet { --bhe-bg-color: rgba(139,92,246,0.5); }
.bhe-border-glow-lime { --bhe-bg-color: rgba(132,204,22,0.5); }
.bhe-border-glow-sky { --bhe-bg-color: rgba(14,165,233,0.5); }

/* ---- Fill Left / Right / Up / Down ---- */
.bhe-fill-left, .bhe-fill-right, .bhe-fill-up, .bhe-fill-down {
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.bhe-fill-left::before, .bhe-fill-right::before,
.bhe-fill-up::before, .bhe-fill-down::before {
	content: '';
	position: absolute;
	z-index: -1;
	background: var(--bhe-fill-color, rgba(0,0,0,0.18));
	transition: transform var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
	inset: 0;
}
.bhe-fill-left::before     { transform: scaleX(0); transform-origin: left; }
.bhe-fill-right::before    { transform: scaleX(0); transform-origin: right; }
.bhe-fill-up::before       { transform: scaleY(0); transform-origin: bottom; }
.bhe-fill-down::before     { transform: scaleY(0); transform-origin: top; }

.bhe-fill-left:hover::before  { transform: scaleX(1); }
.bhe-fill-right:hover::before { transform: scaleX(1); }
.bhe-fill-up:hover::before    { transform: scaleY(1); }
.bhe-fill-down:hover::before  { transform: scaleY(1); }

.bhe-fill-left-white, .bhe-fill-right-white, .bhe-fill-up-white, .bhe-fill-down-white { --bhe-fill-color: rgba(255,255,255,0.25); }
.bhe-fill-left-blue, .bhe-fill-right-blue, .bhe-fill-up-blue, .bhe-fill-down-blue { --bhe-fill-color: rgba(59,130,246,0.25); }
.bhe-fill-left-pink, .bhe-fill-right-pink, .bhe-fill-up-pink, .bhe-fill-down-pink { --bhe-fill-color: rgba(236,72,153,0.25); }
.bhe-fill-left-green, .bhe-fill-right-green, .bhe-fill-up-green, .bhe-fill-down-green { --bhe-fill-color: rgba(34,197,94,0.25); }
.bhe-fill-left-gold, .bhe-fill-right-gold, .bhe-fill-up-gold, .bhe-fill-down-gold { --bhe-fill-color: rgba(234,179,8,0.25); }

/* ---- Box Glow (box-shadow variant for containers/cards) ---- */
.bhe-box-glow {
	--bhe-box-glow-color: rgba(255, 255, 255, 0.4);
	--bhe-box-glow-spread: 20px;
}
.bhe-box-glow:hover {
	box-shadow: 0 0 var(--bhe-box-glow-spread) var(--bhe-box-glow-color);
}
.bhe-box-glow-white { --bhe-box-glow-color: rgba(255,255,255,0.4); }
.bhe-box-glow-blue { --bhe-box-glow-color: rgba(59,130,246,0.4); }
.bhe-box-glow-pink { --bhe-box-glow-color: rgba(236,72,153,0.4); }
.bhe-box-glow-green { --bhe-box-glow-color: rgba(34,197,94,0.4); }
.bhe-box-glow-gold { --bhe-box-glow-color: rgba(234,179,8,0.4); }

/* ---- Bounce ---- */
@keyframes bhe-bounce-keys {
	0%, 100% { transform: scale(1); }
	30% { transform: scale(calc(1 - var(--bhe-bounce-shrink, 0.05))); }
	60% { transform: scale(calc(1 + var(--bhe-bounce-grow, 0.1))); }
	80% { transform: scale(calc(1 - var(--bhe-bounce-shrink, 0.03))); }
}
.bhe-bounce {
	--bhe-bounce-grow: 0.1;
	--bhe-bounce-shrink: 0.05;
}
.bhe-bounce-subtle { --bhe-bounce-grow: 0.05; --bhe-bounce-shrink: 0.02; }
.bhe-bounce-medium  { --bhe-bounce-grow: 0.1;  --bhe-bounce-shrink: 0.05; }
.bhe-bounce-strong  { --bhe-bounce-grow: 0.2;  --bhe-bounce-shrink: 0.08; }
.bhe-bounce:hover {
	animation: bhe-bounce-keys var(--bhe-duration, 0.4s) ease;
}

/* ---- Flash ---- */
@keyframes bhe-flash-keys {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}
.bhe-flash:hover {
	animation: bhe-flash-keys var(--bhe-duration, 0.3s) ease;
}

/* ---- Jello ---- */
@keyframes bhe-jello-keys {
	0%, 100% { transform: skewX(0deg) scaleX(1); }
	25% { transform: skewX(calc(-1 * var(--bhe-jello-angle, 6deg))) scaleX(1.05); }
	50% { transform: skewX(var(--bhe-jello-angle, 6deg)) scaleX(0.95); }
	75% { transform: skewX(calc(-1 * var(--bhe-jello-angle, 3deg))) scaleX(1.02); }
}
.bhe-jello {
	--bhe-jello-angle: 6deg;
}
.bhe-jello-subtle { --bhe-jello-angle: 3deg; }
.bhe-jello-medium  { --bhe-jello-angle: 6deg; }
.bhe-jello-strong  { --bhe-jello-angle: 12deg; }
.bhe-jello:hover {
	animation: bhe-jello-keys var(--bhe-duration, 0.4s) ease;
}

/* ---- Shine ---- */
.bhe-shine {
	position: relative;
	overflow: hidden;
}
.bhe-shine::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255,255,255,0.25) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 0s;
}
.bhe-shine:hover::after {
	transform: translateX(100%);
	transition: transform var(--bhe-duration, 0.5s) var(--bhe-easing, ease);
}

/* ---- Flip ---- */
.bhe-flip {
	perspective: 600px;
}
.bhe-flip:hover {
	transform: rotateY(var(--bhe-flip-angle, 180deg));
}
.bhe-flip-90  { --bhe-flip-angle: 90deg; }
.bhe-flip-180 { --bhe-flip-angle: 180deg; }
.bhe-flip-360 { --bhe-flip-angle: 360deg; }

/* ---- Gradient Shift ---- */
.bhe-gradient {
	background-size: 200% 200%;
	background-image: linear-gradient(
		135deg,
		var(--bhe-grad-from, #667eea) 0%,
		var(--bhe-grad-to, #764ba2) 50%,
		var(--bhe-grad-from, #667eea) 100%
	);
	background-position: 0% 50%;
	transition: background-position var(--bhe-duration, 0.4s) var(--bhe-easing, ease);
}
.bhe-gradient:hover {
	background-position: 100% 50%;
}
.bhe-gradient-purple { --bhe-grad-from: #667eea; --bhe-grad-to: #764ba2; }
.bhe-gradient-blue    { --bhe-grad-from: #2193b0; --bhe-grad-to: #6dd5ed; }
.bhe-gradient-pink    { --bhe-grad-from: #ee0979; --bhe-grad-to: #ff6a00; }
.bhe-gradient-green   { --bhe-grad-from: #11998e; --bhe-grad-to: #38ef7d; }
.bhe-gradient-gold    { --bhe-grad-from: #f7971e; --bhe-grad-to: #ffd200; }

/* ---- Outline In ---- */
.bhe-outline-in {
	box-shadow: inset 0 0 0 0 currentColor;
	transition: box-shadow var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}
.bhe-outline-in:hover {
	box-shadow: inset 0 0 0 var(--bhe-ol-width, 2px) currentColor;
}
.bhe-outline-in-1 { --bhe-ol-width: 1px; }
.bhe-outline-in-2 { --bhe-ol-width: 2px; }
.bhe-outline-in-3 { --bhe-ol-width: 3px; }

/* ---- Letter Spread ---- */
.bhe-letter-spread {
	letter-spacing: 0;
	transition: letter-spacing var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}
.bhe-letter-spread-tight:hover   { letter-spacing: 0.04em; }
.bhe-letter-spread-medium:hover  { letter-spacing: 0.08em; }
.bhe-letter-spread-wide:hover    { letter-spacing: 0.15em; }

/* ---- Underline Slide ---- */
.bhe-underline-slide {
	position: relative;
	text-decoration: none !important;
}
.bhe-underline-slide::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: var(--bhe-ul-height, 2px);
	background: var(--bhe-ul-color, currentColor);
	transition: all var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
	transform: translateX(-50%);
}
.bhe-underline-slide:hover::after {
	width: 100%;
}
.bhe-underline-slide-1 { --bhe-ul-height: 1px; }
.bhe-underline-slide-2 { --bhe-ul-height: 2px; }
.bhe-underline-slide-3 { --bhe-ul-height: 3px; }

/* ---- Highlight ---- */
.bhe-highlight {
	position: relative;
	z-index: 0;
	display: inline-block;
}
.bhe-highlight::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--bhe-hl-color, rgba(255,255,0,0.3));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
}
.bhe-highlight-yellow { --bhe-hl-color: rgba(255,213,0,0.35); }
.bhe-highlight-blue   { --bhe-hl-color: rgba(59,130,246,0.25); }
.bhe-highlight-pink   { --bhe-hl-color: rgba(236,72,153,0.25); }
.bhe-highlight-green  { --bhe-hl-color: rgba(34,197,94,0.25); }

/* ---- Image / Element Filters ---- */
.bhe-filt-gray { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-gray:hover { filter: grayscale(100%); }

.bhe-filt-sepia { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-sepia:hover { filter: sepia(100%); }

.bhe-filt-blur { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-blur:hover { filter: blur(4px); }

.bhe-filt-bright { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-bright:hover { filter: brightness(1.4); }

.bhe-filt-contrast { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-contrast:hover { filter: contrast(150%); }

.bhe-filt-saturate { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-saturate:hover { filter: saturate(200%); }

.bhe-filt-hue { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-hue:hover { filter: hue-rotate(90deg); }

.bhe-filt-invert { transition: filter var(--bhe-duration, 0.3s) var(--bhe-easing, ease); }
.bhe-filt-invert:hover { filter: invert(100%); }

/* ---- Speed modifiers ---- */
.bhe-fast { --bhe-duration: 0.15s; }
.bhe-medium { --bhe-duration: 0.3s; }
.bhe-slow { --bhe-duration: 0.6s; }

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
	.bhe-effect,
	.bhe-overlay-container * {
		--bhe-duration: 0s !important;
		transition-duration: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---- Mobile: coarse pointer disables hover-only effects ---- */
@media (pointer: coarse) {
	.bhe-effect {
		transition-duration: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.bhe-effect:hover {
		transform: none !important;
		box-shadow: none !important;
		text-shadow: none !important;
		background-position: 0% 50% !important;
	}
	.bhe-shine::after {
		transform: translateX(-100%) !important;
		transition-duration: 0s !important;
	}
.bhe-overlay-content {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	line-height: 1.4;
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: all var(--bhe-duration, 0.3s) var(--bhe-easing, ease);
	pointer-events: none;
}
	.bhe-overlay-container img {
		filter: none !important;
	}
}

/* ---- Button ---- */
.bhe-button-wrapper {
	margin-top: 12px;
}

.bhe-button-effect {
	display: inline-block;
	border: none;
	background-color: var(--bhe-button-bg, #007cba);
	background-image: none;
	color: var(--bhe-button-text-color, #ffffff);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--bhe-button-duration, var(--bhe-duration, 0.3s)) var(--bhe-button-easing, var(--bhe-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94)));
	line-height: 1.4;
	text-align: center;
	width: var(--bhe-btn-w, auto);
	height: var(--bhe-btn-h, auto);
	padding: var(--bhe-btn-py, 10px) var(--bhe-btn-px, 24px);
	border-radius: var(--bhe-btn-radius, 4px);
}

.bhe-button-effect:hover {
	background-color: var(--bhe-button-hover-bg, var(--bhe-button-bg, #007cba));
	background-image: none;
	opacity: var(--bhe-button-hover-opacity, 1);
	color: var(--bhe-button-text-color, #ffffff);
}

/* ---- Button: Glow ---- */
.bhe-button-glow {
	--bhe-button-glow-color: rgba(255, 255, 255, 0.6);
	--bhe-button-glow-opacity: 0.6;
	--bhe-button-glow-blur: 12px;
}
.bhe-button-glow:hover {
	box-shadow: 0 0 var(--bhe-button-glow-blur) var(--bhe-button-glow-color);
}

/* ---- Button: Shadow ---- */
.bhe-button-shadow {
	--bhe-button-shadow-val: 0 8px 25px rgba(0,0,0,0.18);
}
.bhe-button-shadow:hover {
	box-shadow: var(--bhe-button-shadow-val);
}

/* ---- Button: Scale (Zoom) ---- */
.bhe-button-scale:hover,
.bhe-button-zoom:hover {
	transform: scale(1.05);
}

/* ---- Button: Lift ---- */
.bhe-button-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* ---- Button: Rotate ---- */
.bhe-button-rotate:hover {
	transform: rotate(5deg);
}

/* ---- Button: Pulse ---- */
@keyframes bhe-button-pulse-keys {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
.bhe-button-pulse:hover {
	animation: bhe-button-pulse-keys var(--bhe-button-duration, var(--bhe-duration, 0.3s)) ease-in-out;
}

/* ---- Button: Shake ---- */
@keyframes bhe-button-shake-keys {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	50% { transform: translateX(4px); }
	75% { transform: translateX(-4px); }
}
.bhe-button-shake:hover {
	animation: bhe-button-shake-keys var(--bhe-button-duration, var(--bhe-duration, 0.3s)) ease-in-out;
}

/* ---- Button: Wobble ---- */
@keyframes bhe-button-wobble-keys {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-3deg); }
	75% { transform: rotate(3deg); }
}
.bhe-button-wobble:hover {
	animation: bhe-button-wobble-keys var(--bhe-button-duration, var(--bhe-duration, 0.3s)) ease-in-out;
}

/* ---- Button: Swing ---- */
@keyframes bhe-button-swing-keys {
	0% { transform: rotate(0deg); transform-origin: top center; }
	20% { transform: rotate(10deg); }
	40% { transform: rotate(-6deg); }
	60% { transform: rotate(3deg); }
	80% { transform: rotate(-3deg); }
	100% { transform: rotate(0deg); }
}
.bhe-button-swing:hover {
	animation: bhe-button-swing-keys 1s ease-in-out;
}

/* ---- Button: Float ---- */
@keyframes bhe-button-float-keys {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
.bhe-button-float:hover {
	animation: bhe-button-float-keys calc(var(--bhe-button-duration, var(--bhe-duration, 0.3s)) * 2) ease-in-out infinite;
}

/* ---- Button: Bounce ---- */
@keyframes bhe-button-bounce-keys {
	0%, 100% { transform: scale(1); }
	30% { transform: scale(0.95); }
	60% { transform: scale(1.08); }
	80% { transform: scale(0.97); }
}
.bhe-button-bounce:hover {
	animation: bhe-button-bounce-keys var(--bhe-button-duration, var(--bhe-duration, 0.4s)) ease;
}

/* ---- Button: Flash ---- */
@keyframes bhe-button-flash-keys {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}
.bhe-button-flash:hover {
	animation: bhe-button-flash-keys var(--bhe-button-duration, var(--bhe-duration, 0.3s)) ease;
}

/* ---- Button: Jello ---- */
@keyframes bhe-button-jello-keys {
	0%, 100% { transform: skewX(0deg) scaleX(1); }
	25% { transform: skewX(-4deg) scaleX(1.03); }
	50% { transform: skewX(4deg) scaleX(0.97); }
	75% { transform: skewX(-2deg) scaleX(1.01); }
}
.bhe-button-jello:hover {
	animation: bhe-button-jello-keys var(--bhe-button-duration, var(--bhe-duration, 0.4s)) ease;
}

/* ---- Button: Shine ---- */
.bhe-button-shine {
	position: relative;
	overflow: hidden;
}
.bhe-button-shine::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255,255,255,0.25) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 0s;
}
.bhe-button-shine:hover::after {
	transform: translateX(100%);
	transition: transform var(--bhe-button-duration, var(--bhe-duration, 0.5s)) var(--bhe-button-easing, var(--bhe-easing, ease));
}

/* ---- Button: Skew ---- */
.bhe-button-skew:hover {
	transform: skewX(-5deg);
}

/* ---- Button: Border Glow ---- */
.bhe-button-border-glow:hover {
	box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

/* ---- Button: Box Glow ---- */
.bhe-button-box-glow:hover {
	box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* ---- Button: Gradient Shift ---- */
.bhe-button-gradient {
	background-size: 200% 200%;
	background-image: linear-gradient(
		var(--bhe-button-grad-angle, 135deg),
		var(--bhe-button-grad-from, #667eea) 0%,
		var(--bhe-button-grad-to, #764ba2) 50%,
		var(--bhe-button-grad-from, #667eea) 100%
	);
	background-position: 0% 50%;
	transition: background-position var(--bhe-button-duration, var(--bhe-duration, 0.4s)) var(--bhe-button-easing, var(--bhe-easing, ease));
}
.bhe-button-gradient:hover {
	background-image: linear-gradient(
		var(--bhe-button-grad-angle, 135deg),
		var(--bhe-button-grad-from, #667eea) 0%,
		var(--bhe-button-grad-to, #764ba2) 50%,
		var(--bhe-button-grad-from, #667eea) 100%
	);
	background-position: 100% 50%;
}

/* ---- Button: Underline Slide ---- */
.bhe-button-underline-slide {
	position: relative;
	text-decoration: none !important;
}
.bhe-button-underline-slide::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: all var(--bhe-button-duration, var(--bhe-duration, 0.3s)) var(--bhe-button-easing, var(--bhe-easing, ease));
	transform: translateX(-50%);
}
.bhe-button-underline-slide:hover::after {
	width: 100%;
}

/* ---- Button: Highlight ---- */
.bhe-button-highlight {
	position: relative;
	z-index: 0;
}
.bhe-button-highlight::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(255, 213, 0, 0.35);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bhe-button-duration, var(--bhe-duration, 0.3s)) var(--bhe-button-easing, var(--bhe-easing, ease));
}
.bhe-button-highlight:hover::before {
	transform: scaleX(1);
}

/* ---- Button: Fill Left / Right / Up / Down ---- */
.bhe-button-fill-left,
.bhe-button-fill-right,
.bhe-button-fill-up,
.bhe-button-fill-down {
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.bhe-button-fill-left::before,
.bhe-button-fill-right::before,
.bhe-button-fill-up::before,
.bhe-button-fill-down::before {
	content: '';
	position: absolute;
	z-index: -1;
	background: rgba(0,0,0,0.15);
	transition: transform var(--bhe-button-duration, var(--bhe-duration, 0.3s)) var(--bhe-button-easing, var(--bhe-easing, ease));
	inset: 0;
}
.bhe-button-fill-left::before     { transform: scaleX(0); transform-origin: left; }
.bhe-button-fill-right::before    { transform: scaleX(0); transform-origin: right; }
.bhe-button-fill-up::before       { transform: scaleY(0); transform-origin: bottom; }
.bhe-button-fill-down::before     { transform: scaleY(0); transform-origin: top; }
.bhe-button-fill-left:hover::before  { transform: scaleX(1); }
.bhe-button-fill-right:hover::before { transform: scaleX(1); }
.bhe-button-fill-up:hover::before    { transform: scaleY(1); }
.bhe-button-fill-down:hover::before  { transform: scaleY(1); }

/* ---- Button: Outline In ---- */
.bhe-button-outline-in {
	box-shadow: inset 0 0 0 0 currentColor;
	transition: box-shadow var(--bhe-button-duration, var(--bhe-duration, 0.3s)) var(--bhe-button-easing, var(--bhe-easing, ease));
}
.bhe-button-outline-in:hover {
	box-shadow: inset 0 0 0 2px currentColor;
}