/**
 * CSSFX for Elementor - Complete Frontend Stylesheet (76 Effects)
 */

/* ==========================================================================
   CATEGORY: HOVER EFFECTS (15 Effects)
   ========================================================================== */

/* 1. Hover Lift (Standalone class) */
.cssfx-hover-lift {
	--cssfx-hover-lift-distance: 8px;
	--cssfx-hover-lift-duration: 0.3s;
	transition: transform var(--cssfx-hover-lift-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-lift:hover {
	transform: translateY(calc(var(--cssfx-hover-lift-distance) * -1));
}

/* 2. Hover Lower */
.cssfx-hover-lower {
	--cssfx-hover-lower-distance: 8px;
	--cssfx-hover-lower-duration: 0.3s;
	transition: transform var(--cssfx-hover-lower-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-lower:hover {
	transform: translateY(var(--cssfx-hover-lower-distance));
}

/* 3. Hover Slide Left */
.cssfx-hover-slide-left {
	--cssfx-hover-slide-left-distance: 8px;
	--cssfx-hover-slide-left-duration: 0.3s;
	transition: transform var(--cssfx-hover-slide-left-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-slide-left:hover {
	transform: translateX(calc(var(--cssfx-hover-slide-left-distance) * -1));
}

/* 4. Hover Slide Right */
.cssfx-hover-slide-right {
	--cssfx-hover-slide-right-distance: 8px;
	--cssfx-hover-slide-right-duration: 0.3s;
	transition: transform var(--cssfx-hover-slide-right-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-slide-right:hover {
	transform: translateX(var(--cssfx-hover-slide-right-distance));
}

/* 5. Hover Grow */
.cssfx-hover-grow {
	--cssfx-hover-grow-scale: 1.05;
	--cssfx-hover-grow-duration: 0.3s;
	transition: transform var(--cssfx-hover-grow-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-grow:hover {
	transform: scale(var(--cssfx-hover-grow-scale));
}

/* 6. Hover Shrink */
.cssfx-hover-shrink {
	--cssfx-hover-shrink-scale: 0.95;
	--cssfx-hover-shrink-duration: 0.3s;
	transition: transform var(--cssfx-hover-shrink-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cssfx-hover-shrink:hover {
	transform: scale(var(--cssfx-hover-shrink-scale));
}

/* 7. Hover Rotate CW */
.cssfx-hover-rotate-cw {
	--cssfx-hover-rotate-cw-angle: 5deg;
	--cssfx-hover-rotate-cw-duration: 0.3s;
	transition: transform var(--cssfx-hover-rotate-cw-duration) ease;
}
.cssfx-hover-rotate-cw:hover {
	transform: rotate(var(--cssfx-hover-rotate-cw-angle));
}

/* 8. Hover Rotate CCW */
.cssfx-hover-rotate-ccw {
	--cssfx-hover-rotate-ccw-angle: -5deg;
	--cssfx-hover-rotate-ccw-duration: 0.3s;
	transition: transform var(--cssfx-hover-rotate-ccw-duration) ease;
}
.cssfx-hover-rotate-ccw:hover {
	transform: rotate(var(--cssfx-hover-rotate-ccw-angle));
}

/* 9. Hover Wobble */
.cssfx-hover-wobble {
	--cssfx-hover-wobble-duration: 0.6s;
}
.cssfx-hover-wobble:hover {
	animation: cssfx-wobble var(--cssfx-hover-wobble-duration) ease-in-out;
}
@keyframes cssfx-wobble {
	0%, 100% { transform: translateX(0) rotate(0); }
	15% { transform: translateX(-6px) rotate(-3deg); }
	30% { transform: translateX(5px) rotate(2deg); }
	45% { transform: translateX(-3px) rotate(-2deg); }
	60% { transform: translateX(2px) rotate(1deg); }
	75% { transform: translateX(-1px) rotate(-1deg); }
}

/* 10. Hover Float */
.cssfx-hover-float {
	--cssfx-hover-float-height: 8px;
	--cssfx-hover-float-duration: 1.5s;
}
.cssfx-hover-float:hover {
	animation: cssfx-float var(--cssfx-hover-float-duration) ease-in-out infinite;
}
@keyframes cssfx-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--cssfx-hover-float-height) * -1)); }
}

/* 11. Hover Pulse */
.cssfx-hover-pulse {
	--cssfx-hover-pulse-scale: 1.05;
	--cssfx-hover-pulse-duration: 1s;
}
.cssfx-hover-pulse:hover {
	animation: cssfx-pulse var(--cssfx-hover-pulse-duration) ease-in-out infinite;
}
@keyframes cssfx-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(var(--cssfx-hover-pulse-scale)); }
}

/* 12. Hover Glow */
.cssfx-hover-glow {
	--cssfx-hover-glow-color: #d4af37;
	--cssfx-hover-glow-radius: 15px;
	--cssfx-hover-glow-duration: 0.3s;
	transition: box-shadow var(--cssfx-hover-glow-duration) ease;
}
.cssfx-hover-glow:hover {
	box-shadow: 0 0 var(--cssfx-hover-glow-radius) var(--cssfx-hover-glow-color);
}

/* 13. Hover Shine */
.cssfx-hover-shine {
	--cssfx-hover-shine-color: rgba(255, 255, 255, 0.3);
	--cssfx-hover-shine-duration: 0.6s;
	position: relative;
	overflow: hidden;
}
.cssfx-hover-shine::after {
	content: '';
	position: absolute;
	top: -50%; left: -60%;
	width: 30%; height: 200%;
	background: linear-gradient(to right, transparent, var(--cssfx-hover-shine-color), transparent);
	transform: rotate(30deg);
	transition: none;
	opacity: 0;
	pointer-events: none;
}
.cssfx-hover-shine:hover::after {
	left: 150%;
	transition: left var(--cssfx-hover-shine-duration) ease-in-out;
	opacity: 1;
}

/* 14. Hover Border Expand */
.cssfx-hover-border-expand {
	--cssfx-hover-border-color: #d4af37;
	--cssfx-hover-border-width: 2px;
	--cssfx-hover-border-duration: 0.3s;
	position: relative;
}
.cssfx-hover-border-expand::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--cssfx-hover-border-width) solid transparent;
	transition: border-color var(--cssfx-hover-border-duration) ease;
	pointer-events: none;
	border-radius: inherit;
	z-index: 10;
}
.cssfx-hover-border-expand:hover::before {
	border-color: var(--cssfx-hover-border-color);
}

/* 15. Hover Blur */
.cssfx-hover-blur {
	--cssfx-hover-blur-radius: 4px;
	--cssfx-hover-blur-duration: 0.3s;
	transition: filter var(--cssfx-hover-blur-duration) ease;
}
.cssfx-hover-blur:hover {
	filter: blur(var(--cssfx-hover-blur-radius));
}


/* ==========================================================================
   CATEGORY: TEXT EFFECTS (13 Effects)
   ========================================================================== */

/* 16. Gradient Text */
.cssfx-gradient-text {
	--cssfx-grad-c1: #00c2ff;
	--cssfx-grad-c2: #d4af37;
	--cssfx-grad-angle: 90deg;
}
.cssfx-gradient-text, 
.cssfx-gradient-text h1, 
.cssfx-gradient-text h2, 
.cssfx-gradient-text h3, 
.cssfx-gradient-text h4, 
.cssfx-gradient-text h5, 
.cssfx-gradient-text h6, 
.cssfx-gradient-text p, 
.cssfx-gradient-text span, 
.cssfx-gradient-text a {
	background: linear-gradient(var(--cssfx-grad-angle), var(--cssfx-grad-c1), var(--cssfx-grad-c2));
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* 17. Rainbow Text */
.cssfx-rainbow-text {
	--cssfx-rainbow-duration: 6s;
}
.cssfx-rainbow-text,
.cssfx-rainbow-text h1,
.cssfx-rainbow-text h2,
.cssfx-rainbow-text h3,
.cssfx-rainbow-text h4,
.cssfx-rainbow-text p,
.cssfx-rainbow-text span,
.cssfx-rainbow-text a {
	background: linear-gradient(to right, #ff1b6b, #00c2ff, #d4af37, #00c875, #ff1b6b);
	background-size: 200% auto;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: cssfx-rainbow var(--cssfx-rainbow-duration) linear infinite;
}
@keyframes cssfx-rainbow {
	to { background-position: 200% center; }
}

/* 18. Text Glow */
.cssfx-glow-text {
	--cssfx-glow-text-color: #00c2ff;
	--cssfx-glow-text-radius: 8px;
}
.cssfx-glow-text,
.cssfx-glow-text h1,
.cssfx-glow-text h2,
.cssfx-glow-text h3,
.cssfx-glow-text p,
.cssfx-glow-text span {
	text-shadow: 0 0 var(--cssfx-glow-text-radius) var(--cssfx-glow-text-color);
}

/* 19. Underline from Left */
.cssfx-underline-left {
	--cssfx-underline-color: #d4af37;
	--cssfx-underline-height: 2px;
	--cssfx-underline-duration: 0.3s;
	position: relative;
}
.cssfx-underline-left a,
.cssfx-underline-left span,
.cssfx-underline-left h1,
.cssfx-underline-left h2,
.cssfx-underline-left h3 {
	position: relative;
	display: inline-block;
}
.cssfx-underline-left a::after,
.cssfx-underline-left span::after,
.cssfx-underline-left h1::after,
.cssfx-underline-left h2::after,
.cssfx-underline-left h3::after {
	content: '';
	position: absolute;
	bottom: -2px; left: 0;
	width: 0;
	height: var(--cssfx-underline-height);
	background-color: var(--cssfx-underline-color);
	transition: width var(--cssfx-underline-duration) ease;
}
.cssfx-underline-left:hover a::after,
.cssfx-underline-left:hover span::after,
.cssfx-underline-left:hover h1::after,
.cssfx-underline-left:hover h2::after,
.cssfx-underline-left:hover h3::after {
	width: 100%;
}

/* 20. Underline from Center */
.cssfx-underline-center {
	--cssfx-underline-color: #d4af37;
	--cssfx-underline-height: 2px;
	--cssfx-underline-duration: 0.3s;
}
.cssfx-underline-center a,
.cssfx-underline-center span,
.cssfx-underline-center h1,
.cssfx-underline-center h2,
.cssfx-underline-center h3 {
	position: relative;
	display: inline-block;
}
.cssfx-underline-center a::after,
.cssfx-underline-center span::after,
.cssfx-underline-center h1::after,
.cssfx-underline-center h2::after,
.cssfx-underline-center h3::after {
	content: '';
	position: absolute;
	bottom: -2px; left: 50%;
	width: 0;
	height: var(--cssfx-underline-height);
	background-color: var(--cssfx-underline-color);
	transition: all var(--cssfx-underline-duration) ease;
	transform: translateX(-50%);
}
.cssfx-underline-center:hover a::after,
.cssfx-underline-center:hover span::after,
.cssfx-underline-center:hover h1::after,
.cssfx-underline-center:hover h2::after,
.cssfx-underline-center:hover h3::after {
	width: 100%;
}

/* 21. Underline from Right */
.cssfx-underline-right {
	--cssfx-underline-color: #d4af37;
	--cssfx-underline-height: 2px;
	--cssfx-underline-duration: 0.3s;
}
.cssfx-underline-right a,
.cssfx-underline-right span,
.cssfx-underline-right h1,
.cssfx-underline-right h2,
.cssfx-underline-right h3 {
	position: relative;
	display: inline-block;
}
.cssfx-underline-right a::after,
.cssfx-underline-right span::after,
.cssfx-underline-right h1::after,
.cssfx-underline-right h2::after,
.cssfx-underline-right h3::after {
	content: '';
	position: absolute;
	bottom: -2px; right: 0;
	width: 0;
	height: var(--cssfx-underline-height);
	background-color: var(--cssfx-underline-color);
	transition: width var(--cssfx-underline-duration) ease;
}
.cssfx-underline-right:hover a::after,
.cssfx-underline-right:hover span::after,
.cssfx-underline-right:hover h1::after,
.cssfx-underline-right:hover h2::after,
.cssfx-underline-right:hover h3::after {
	width: 100%;
}

/* 22. Overline Expand */
.cssfx-overline-expand {
	--cssfx-overline-color: #d4af37;
	--cssfx-overline-height: 2px;
	--cssfx-overline-duration: 0.3s;
}
.cssfx-overline-expand a,
.cssfx-overline-expand span,
.cssfx-overline-expand h1,
.cssfx-overline-expand h2 {
	position: relative;
	display: inline-block;
}
.cssfx-overline-expand a::before,
.cssfx-overline-expand span::before,
.cssfx-overline-expand h1::before,
.cssfx-overline-expand h2::before {
	content: '';
	position: absolute;
	top: -2px; left: 50%;
	width: 0;
	height: var(--cssfx-overline-height);
	background-color: var(--cssfx-overline-color);
	transition: all var(--cssfx-overline-duration) ease;
	transform: translateX(-50%);
}
.cssfx-overline-expand:hover a::before,
.cssfx-overline-expand:hover span::before,
.cssfx-overline-expand:hover h1::before,
.cssfx-overline-expand:hover h2::before {
	width: 100%;
}

/* 23. Strike Through */
.cssfx-strike-through {
	--cssfx-strike-color: #d4af37;
	--cssfx-strike-height: 2px;
	--cssfx-strike-duration: 0.3s;
}
.cssfx-strike-through a,
.cssfx-strike-through span,
.cssfx-strike-through h1,
.cssfx-strike-through h2 {
	position: relative;
	display: inline-block;
}
.cssfx-strike-through a::after,
.cssfx-strike-through span::after,
.cssfx-strike-through h1::after,
.cssfx-strike-through h2::after {
	content: '';
	position: absolute;
	top: 50%; left: 0;
	width: 0;
	height: var(--cssfx-strike-height);
	background-color: var(--cssfx-strike-color);
	transition: width var(--cssfx-strike-duration) ease;
	transform: translateY(-50%);
}
.cssfx-strike-through:hover a::after,
.cssfx-strike-through:hover span::after,
.cssfx-strike-through:hover h1::after,
.cssfx-strike-through:hover h2::after {
	width: 100%;
}

/* 24. Text Reveal Slide */
.cssfx-text-reveal {
	--cssfx-reveal-color: #0f2d59;
	--cssfx-reveal-duration: 0.6s;
	position: relative;
	overflow: hidden;
}
.cssfx-text-reveal::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cssfx-reveal-color);
	transform: translateX(-101%);
	z-index: 2;
}
.cssfx-text-reveal:hover::before {
	animation: cssfx-reveal-anim var(--cssfx-reveal-duration) cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes cssfx-reveal-anim {
	0% { transform: translateX(-101%); }
	50% { transform: translateX(0); }
	100% { transform: translateX(101%); }
}

/* 25. Text Blur Reveal */
.cssfx-text-blur-reveal {
	--cssfx-text-blur-radius: 6px;
	--cssfx-text-blur-duration: 0.4s;
}
.cssfx-text-blur-reveal h1,
.cssfx-text-blur-reveal h2,
.cssfx-text-blur-reveal p,
.cssfx-text-blur-reveal span,
.cssfx-text-blur-reveal a {
	filter: blur(var(--cssfx-text-blur-radius));
	transition: filter var(--cssfx-text-blur-duration) ease;
}
.cssfx-text-blur-reveal:hover h1,
.cssfx-text-blur-reveal:hover h2,
.cssfx-text-blur-reveal:hover p,
.cssfx-text-blur-reveal:hover span,
.cssfx-text-blur-reveal:hover a {
	filter: blur(0);
}

/* 26. Text Shadow Drop */
.cssfx-text-shadow-drop {
	--cssfx-text-shadow-color: rgba(0, 0, 0, 0.15);
	--cssfx-text-shadow-offset: 4px;
	--cssfx-text-shadow-duration: 0.3s;
}
.cssfx-text-shadow-drop h1,
.cssfx-text-shadow-drop h2,
.cssfx-text-shadow-drop p,
.cssfx-text-shadow-drop span {
	transition: text-shadow var(--cssfx-text-shadow-duration) ease;
}
.cssfx-text-shadow-drop:hover h1,
.cssfx-text-shadow-drop:hover h2,
.cssfx-text-shadow-drop:hover p,
.cssfx-text-shadow-drop:hover span {
	text-shadow: var(--cssfx-text-shadow-offset) var(--cssfx-text-shadow-offset) 0 var(--cssfx-text-shadow-color);
}

/* 27. Text Spacing */
.cssfx-text-spacing {
	--cssfx-text-letter-spacing: 4px;
	--cssfx-text-letter-duration: 0.3s;
}
.cssfx-text-spacing h1,
.cssfx-text-spacing h2,
.cssfx-text-spacing p,
.cssfx-text-spacing span {
	transition: letter-spacing var(--cssfx-text-letter-duration) ease;
}
.cssfx-text-spacing:hover h1,
.cssfx-text-spacing:hover h2,
.cssfx-text-spacing:hover p,
.cssfx-text-spacing:hover span {
	letter-spacing: var(--cssfx-text-letter-spacing);
}

/* 28. Text Pop */
.cssfx-text-pop {
	--cssfx-text-pop-scale: 1.1;
	--cssfx-text-pop-duration: 0.2s;
}
.cssfx-text-pop h1,
.cssfx-text-pop h2,
.cssfx-text-pop p,
.cssfx-text-pop span {
	display: inline-block;
	transition: transform var(--cssfx-text-pop-duration) ease;
}
.cssfx-text-pop:hover h1,
.cssfx-text-pop:hover h2,
.cssfx-text-pop:hover p,
.cssfx-text-pop:hover span {
	transform: scale(var(--cssfx-text-pop-scale));
}


/* ==========================================================================
   CATEGORY: BUTTON EFFECTS (12 Effects)
   ========================================================================== */

/* 29. Button Glow */
.cssfx-glow-button a,
.cssfx-glow-button button {
	--cssfx-btn-glow-color: #d4af37;
	--cssfx-btn-glow-radius: 20px;
	--cssfx-btn-glow-duration: 0.3s;
	transition: box-shadow var(--cssfx-btn-glow-duration) ease, transform var(--cssfx-btn-glow-duration) ease !important;
}
.cssfx-glow-button:hover a,
.cssfx-glow-button:hover button {
	box-shadow: 0 0 var(--cssfx-btn-glow-radius) var(--cssfx-btn-glow-color) !important;
	transform: translateY(-2px) !important;
}

/* 30. Button Shine */
.cssfx-shine-button a,
.cssfx-shine-button button {
	--cssfx-btn-shine-color: rgba(255, 255, 255, 0.4);
	--cssfx-btn-shine-duration: 0.5s;
	position: relative;
	overflow: hidden;
}
.cssfx-shine-button a::after,
.cssfx-shine-button button::after {
	content: '';
	position: absolute;
	top: 0; left: -150%;
	width: 50%; height: 100%;
	background: linear-gradient(90deg, transparent, var(--cssfx-btn-shine-color), transparent);
	transform: skewX(-20deg);
}
.cssfx-shine-button:hover a::after,
.cssfx-shine-button:hover button::after {
	left: 150%;
	transition: left var(--cssfx-btn-shine-duration) ease-in-out;
}

/* 31. Slide BG from Left */
.cssfx-button-slide-bg a,
.cssfx-button-slide-bg button {
	--cssfx-btn-slide-color: #0f2d59;
	--cssfx-btn-slide-duration: 0.3s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-button-slide-bg a::before,
.cssfx-button-slide-bg button::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cssfx-btn-slide-color);
	transform: translateX(-100%);
	transition: transform var(--cssfx-btn-slide-duration) ease;
	z-index: -1;
}
.cssfx-button-slide-bg:hover a::before,
.cssfx-button-slide-bg:hover button::before {
	transform: translateX(0);
}

/* 32. Slide BG from Bottom */
.cssfx-button-slide-bg-up a,
.cssfx-button-slide-bg-up button {
	--cssfx-btn-slide-color: #0f2d59;
	--cssfx-btn-slide-duration: 0.3s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-button-slide-bg-up a::before,
.cssfx-button-slide-bg-up button::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cssfx-btn-slide-color);
	transform: translateY(100%);
	transition: transform var(--cssfx-btn-slide-duration) ease;
	z-index: -1;
}
.cssfx-button-slide-bg-up:hover a::before,
.cssfx-button-slide-bg-up:hover button::before {
	transform: translateY(0);
}

/* 33. Button Grow Hover */
.cssfx-button-scale-hover a,
.cssfx-button-scale-hover button {
	--cssfx-btn-scale: 1.05;
	--cssfx-btn-scale-duration: 0.3s;
	transition: transform var(--cssfx-btn-scale-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.cssfx-button-scale-hover:hover a,
.cssfx-button-scale-hover:hover button {
	transform: scale(var(--cssfx-btn-scale)) !important;
}

/* 34. Button Border Draw */
.cssfx-button-border-draw a,
.cssfx-button-border-draw button {
	--cssfx-btn-border-color: #d4af37;
	--cssfx-btn-border-width: 2px;
	--cssfx-btn-border-duration: 0.4s;
	position: relative;
}
.cssfx-button-border-draw a::before,
.cssfx-button-border-draw button::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--cssfx-btn-border-width) solid transparent;
	border-radius: inherit;
	pointer-events: none;
	transition: border-color var(--cssfx-btn-border-duration) ease;
}
.cssfx-button-border-draw:hover a::before,
.cssfx-button-border-draw:hover button::before {
	border-color: var(--cssfx-btn-border-color);
}

/* 35. Button Center Ripple */
.cssfx-button-ripple a,
.cssfx-button-ripple button {
	--cssfx-btn-ripple-color: rgba(255, 255, 255, 0.3);
	--cssfx-btn-ripple-duration: 0.6s;
	position: relative;
	overflow: hidden;
}
.cssfx-button-ripple a::before,
.cssfx-button-ripple button::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	background: var(--cssfx-btn-ripple-color);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	pointer-events: none;
}
.cssfx-button-ripple:hover a::before,
.cssfx-button-ripple:hover button::before {
	animation: cssfx-btn-rip var(--cssfx-btn-ripple-duration) ease-out;
}
@keyframes cssfx-btn-rip {
	0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(30); opacity: 0; }
}

/* 36. Button Bounce Wobble */
.cssfx-button-bounce a,
.cssfx-button-bounce button {
	--cssfx-btn-bounce-duration: 0.6s;
}
.cssfx-button-bounce:hover a,
.cssfx-button-bounce:hover button {
	animation: cssfx-btn-bounce var(--cssfx-btn-bounce-duration) ease;
}
@keyframes cssfx-btn-bounce {
	0%, 100% { transform: scale(1); }
	20% { transform: scale(0.9, 1.1); }
	50% { transform: scale(1.15, 0.85); }
	80% { transform: scale(0.95, 1.05); }
}

/* 37. Button Magnetic Hover */
.cssfx-button-magnetic a,
.cssfx-button-magnetic button {
	--cssfx-btn-mag-dist: -4px;
	--cssfx-btn-mag-duration: 0.3s;
	transition: transform var(--cssfx-btn-mag-duration) cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.cssfx-button-magnetic:hover a,
.cssfx-button-magnetic:hover button {
	transform: translateY(var(--cssfx-btn-mag-dist)) scale(1.03) !important;
}

/* 38. Button Neon Pulse */
.cssfx-button-neon-pulse a,
.cssfx-button-neon-pulse button {
	--cssfx-btn-neon-color: #00c2ff;
	--cssfx-btn-neon-duration: 1.5s;
}
.cssfx-button-neon-pulse:hover a,
.cssfx-button-neon-pulse:hover button {
	animation: cssfx-btn-neon var(--cssfx-btn-neon-duration) ease infinite;
}
@keyframes cssfx-btn-neon {
	0%, 100% { box-shadow: 0 0 5px var(--cssfx-btn-neon-color); }
	50% { box-shadow: 0 0 20px var(--cssfx-btn-neon-color); }
}

/* 39. Button 3D Press */
.cssfx-button-3d-press a,
.cssfx-button-3d-press button {
	--cssfx-btn-3d-color: #0a1b35;
	--cssfx-btn-3d-height: 6px;
	--cssfx-btn-3d-duration: 0.15s;
	transform: translateY(0);
	box-shadow: 0 var(--cssfx-btn-3d-height) 0 var(--cssfx-btn-3d-color) !important;
	transition: all var(--cssfx-btn-3d-duration) ease !important;
}
.cssfx-button-3d-press:hover a,
.cssfx-button-3d-press:hover button {
	transform: translateY(2px);
	box-shadow: 0 calc(var(--cssfx-btn-3d-height) - 2px) 0 var(--cssfx-btn-3d-color) !important;
}
.cssfx-button-3d-press:active a,
.cssfx-button-3d-press:active button {
	transform: translateY(var(--cssfx-btn-3d-height));
	box-shadow: 0 0 0 var(--cssfx-btn-3d-color) !important;
}

/* 40. Button Ghost Slide */
.cssfx-button-ghost-slide a,
.cssfx-button-ghost-slide button {
	--cssfx-btn-ghost-color: #d4af37;
	--cssfx-btn-ghost-duration: 0.3s;
	background-color: transparent !important;
	border: 1px solid var(--cssfx-btn-ghost-color) !important;
	color: var(--cssfx-btn-ghost-color) !important;
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: color var(--cssfx-btn-ghost-duration) ease !important;
}
.cssfx-button-ghost-slide a::before,
.cssfx-button-ghost-slide button::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--cssfx-btn-ghost-color);
	transform: translateX(-100%);
	transition: transform var(--cssfx-btn-ghost-duration) ease;
	z-index: -1;
}
.cssfx-button-ghost-slide:hover a,
.cssfx-button-ghost-slide:hover button {
	color: #fff !important;
}
.cssfx-button-ghost-slide:hover a::before,
.cssfx-button-ghost-slide:hover button::before {
	transform: translateX(0);
}


/* ==========================================================================
   CATEGORY: IMAGE EFFECTS (12 Effects)
   ========================================================================== */

/* 41. Image Zoom In */
.cssfx-image-zoom-in img {
	--cssfx-img-zoom-scale: 1.1;
	--cssfx-img-zoom-duration: 0.4s;
	transition: transform var(--cssfx-img-zoom-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.cssfx-image-zoom-in:hover img {
	transform: scale(var(--cssfx-img-zoom-scale)) !important;
}

/* 42. Image Zoom Out */
.cssfx-image-zoom-out img {
	--cssfx-img-zoom-scale: 0.9;
	--cssfx-img-zoom-duration: 0.4s;
	transition: transform var(--cssfx-img-zoom-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.cssfx-image-zoom-out:hover img {
	transform: scale(var(--cssfx-img-zoom-scale)) !important;
}

/* 43. Image Slide Hover */
.cssfx-image-slide img {
	--cssfx-img-slide-offset: 15px;
	--cssfx-img-slide-duration: 0.4s;
	transition: transform var(--cssfx-img-slide-duration) ease !important;
}
.cssfx-image-slide:hover img {
	transform: translateX(var(--cssfx-img-slide-offset)) !important;
}

/* 44. Image Rotate Hover */
.cssfx-image-rotate img {
	--cssfx-img-rotate-angle: 3deg;
	--cssfx-img-rotate-duration: 0.4s;
	transition: transform var(--cssfx-img-rotate-duration) ease !important;
}
.cssfx-image-rotate:hover img {
	transform: rotate(var(--cssfx-img-rotate-angle)) scale(1.05) !important;
}

/* 45. Greyscale to Color */
.cssfx-image-greyscale-color img {
	--cssfx-img-grey-dur: 0.4s;
	filter: grayscale(100%);
	transition: filter var(--cssfx-img-grey-dur) ease !important;
}
.cssfx-image-greyscale-color:hover img {
	filter: grayscale(0);
}

/* 46. Color to Greyscale */
.cssfx-image-color-greyscale img {
	--cssfx-img-grey-dur: 0.4s;
	filter: grayscale(0);
	transition: filter var(--cssfx-img-grey-dur) ease !important;
}
.cssfx-image-color-greyscale:hover img {
	filter: grayscale(100%);
}

/* 47. Image Sepia Filter */
.cssfx-image-sepia img {
	--cssfx-img-sepia-val: 0.8;
	--cssfx-img-sepia-dur: 0.4s;
	transition: filter var(--cssfx-img-sepia-dur) ease !important;
}
.cssfx-image-sepia:hover img {
	filter: sepia(var(--cssfx-img-sepia-val));
}

/* 48. Blur to Clear */
.cssfx-image-blur-clear img {
	--cssfx-img-blur-val: 5px;
	--cssfx-img-blur-dur: 0.4s;
	filter: blur(var(--cssfx-img-blur-val));
	transition: filter var(--cssfx-img-blur-dur) ease !important;
}
.cssfx-image-blur-clear:hover img {
	filter: blur(0);
}

/* 49. Clear to Blur */
.cssfx-image-clear-blur img {
	--cssfx-img-blur-val: 5px;
	--cssfx-img-blur-dur: 0.4s;
	filter: blur(0);
	transition: filter var(--cssfx-img-blur-dur) ease !important;
}
.cssfx-image-clear-blur:hover img {
	filter: blur(var(--cssfx-img-blur-val));
}

/* 50. Image Diagonal Shine */
.cssfx-image-shine {
	--cssfx-img-shine-color: rgba(255, 255, 255, 0.3);
	--cssfx-img-shine-duration: 0.6s;
	position: relative;
	overflow: hidden;
}
.cssfx-image-shine::after {
	content: '';
	position: absolute;
	top: -50%; left: -60%;
	width: 20%; height: 200%;
	background: linear-gradient(to right, transparent, var(--cssfx-img-shine-color), transparent);
	transform: rotate(30deg);
	opacity: 0;
	pointer-events: none;
}
.cssfx-image-shine:hover::after {
	left: 150%;
	transition: left var(--cssfx-img-shine-duration) ease-in-out;
	opacity: 1;
}

/* 51. Image Float Bobbing */
.cssfx-image-float img {
	--cssfx-img-float-height: 8px;
	--cssfx-img-float-duration: 2s;
	animation: cssfx-img-float var(--cssfx-img-float-duration) ease-in-out infinite;
}
@keyframes cssfx-img-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--cssfx-img-float-height) * -1)); }
}

/* 52. Image Vignette Overlay */
.cssfx-image-vignette {
	--cssfx-img-vig-color: rgba(0, 0, 0, 0.5);
	--cssfx-img-vig-dur: 0.4s;
	position: relative;
}
.cssfx-image-vignette::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 40px var(--cssfx-img-vig-color);
	pointer-events: none;
	transition: box-shadow var(--cssfx-img-vig-dur) ease;
	border-radius: inherit;
}
.cssfx-image-vignette:hover::after {
	box-shadow: inset 0 0 100px var(--cssfx-img-vig-color);
}


/* ==========================================================================
   CATEGORY: CARD EFFECTS (12 Effects)
   ========================================================================== */

/* 53. Glass Card (Frosted) */
.cssfx-glass-card {
	--cssfx-glass-blur: 12px;
	--cssfx-glass-opacity: 0.05;
	--cssfx-glass-border-opacity: 0.1;
	background: rgba(255, 255, 255, var(--cssfx-glass-opacity)) !important;
	backdrop-filter: blur(var(--cssfx-glass-blur)) !important;
	-webkit-backdrop-filter: blur(var(--cssfx-glass-blur)) !important;
	border: 1px solid rgba(255, 255, 255, var(--cssfx-glass-border-opacity)) !important;
}

/* 54. Dark Glass Card */
.cssfx-dark-glass-card {
	--cssfx-dark-glass-blur: 12px;
	--cssfx-dark-glass-opacity: 0.15;
	background: rgba(10, 10, 15, var(--cssfx-dark-glass-opacity)) !important;
	backdrop-filter: blur(var(--cssfx-dark-glass-blur)) !important;
	-webkit-backdrop-filter: blur(var(--cssfx-dark-glass-blur)) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 55. Modern Shadow Card */
.cssfx-modern-card {
	--cssfx-modern-shadow: rgba(0, 0, 0, 0.08);
	--cssfx-modern-hover-shadow: rgba(0, 0, 0, 0.15);
	--cssfx-modern-duration: 0.3s;
	box-shadow: 0 4px 20px var(--cssfx-modern-shadow) !important;
	transition: box-shadow var(--cssfx-modern-duration) ease, transform var(--cssfx-modern-duration) ease !important;
}
.cssfx-modern-card:hover {
	box-shadow: 0 10px 30px var(--cssfx-modern-hover-shadow) !important;
	transform: translateY(-4px) !important;
}

/* 56. SaaS Accent Card */
.cssfx-saas-card {
	--cssfx-saas-border: #00c2ff;
	--cssfx-saas-width: 1px;
	--cssfx-saas-duration: 0.3s;
	border: var(--cssfx-saas-width) solid transparent !important;
	transition: border-color var(--cssfx-saas-duration) ease, box-shadow var(--cssfx-saas-duration) ease !important;
}
.cssfx-saas-card:hover {
	border-color: var(--cssfx-saas-border) !important;
	box-shadow: 0 0 15px rgba(0, 194, 255, 0.15) !important;
}

/* 57. Premium Highlight Card */
.cssfx-premium-card {
	--cssfx-premium-border: #d4af37;
	--cssfx-premium-shadow: rgba(212, 175, 55, 0.15);
	--cssfx-premium-duration: 0.3s;
	border: 1px solid rgba(212, 175, 55, 0.1) !important;
	transition: all var(--cssfx-premium-duration) ease !important;
}
.cssfx-premium-card:hover {
	border-color: var(--cssfx-premium-border) !important;
	box-shadow: 0 0 20px var(--cssfx-premium-shadow) !important;
	transform: translateY(-2px) !important;
}

/* 58. Border Glow Card */
.cssfx-border-glow-card {
	--cssfx-border-glow-col: #00c2ff;
	--cssfx-border-glow-dur: 0.4s;
	position: relative;
	z-index: 1;
}
.cssfx-border-glow-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--cssfx-border-glow-col), transparent);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.3;
	transition: opacity var(--cssfx-border-glow-dur) ease;
}
.cssfx-border-glow-card:hover::before {
	opacity: 1;
}

/* 59. Neon Highlight Card */
.cssfx-neon-card {
	--cssfx-neon-card-color: #ff1b6b;
	--cssfx-neon-card-duration: 0.3s;
	transition: box-shadow var(--cssfx-neon-card-duration) ease, border-color var(--cssfx-neon-card-duration) ease !important;
	border: 1px solid transparent !important;
}
.cssfx-neon-card:hover {
	border-color: var(--cssfx-neon-card-color) !important;
	box-shadow: 0 0 20px var(--cssfx-neon-card-color) !important;
}

/* 60. Bobbing Floating Card */
.cssfx-floating-card {
	--cssfx-card-float-height: 10px;
	--cssfx-card-float-duration: 2s;
	transition: box-shadow 0.3s ease !important;
}
.cssfx-floating-card:hover {
	animation: cssfx-card-float var(--cssfx-card-float-duration) ease-in-out infinite;
	box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
@keyframes cssfx-card-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--cssfx-card-float-height) * -1)); }
}

/* 61. Split Screen Divider Card */
.cssfx-split-card {
	--cssfx-split-card-color: #0f2d59;
	--cssfx-split-card-duration: 0.4s;
	position: relative;
	z-index: 1;
}
.cssfx-split-card::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 4px;
	background-color: var(--cssfx-split-card-color);
	transition: width var(--cssfx-split-card-duration) ease;
	z-index: -1;
	border-radius: inherit;
}
.cssfx-split-card:hover::before {
	width: 100%;
	opacity: 0.05;
}

/* 62. Inner Shadow Card */
.cssfx-inner-shadow-card {
	--cssfx-card-inner-shadow: rgba(0,0,0,0.1);
	--cssfx-card-inner-dur: 0.3s;
	transition: box-shadow var(--cssfx-card-inner-dur) ease !important;
}
.cssfx-inner-shadow-card:hover {
	box-shadow: inset 0 0 15px var(--cssfx-card-inner-shadow) !important;
}

/* 63. Isometric 3D Tilt Card */
.cssfx-isometric-card {
	--cssfx-card-iso-angle: 5deg;
	--cssfx-card-iso-duration: 0.3s;
	transition: transform var(--cssfx-card-iso-duration) ease !important;
	transform-style: preserve-3d;
}
.cssfx-isometric-card:hover {
	transform: perspective(600px) rotateX(var(--cssfx-card-iso-angle)) rotateY(calc(var(--cssfx-card-iso-angle) * -1)) !important;
}

/* 64. Minimalist Hairline Card */
.cssfx-minimalist-card {
	--cssfx-card-min-border: #e2e8f0;
	--cssfx-card-min-duration: 0.2s;
	border: 1px solid transparent !important;
	transition: border-color var(--cssfx-card-min-duration) ease !important;
}
.cssfx-minimalist-card:hover {
	border-color: var(--cssfx-card-min-border) !important;
}


/* ==========================================================================
   CATEGORY: BACKGROUND EFFECTS (12 Effects)
   ========================================================================== */

/* 65. Animated Gradient BG */
.cssfx-animated-gradient {
	--cssfx-grad-c1: #07162c;
	--cssfx-grad-c2: #0d223f;
	--cssfx-grad-c3: #00c2ff;
	--cssfx-grad-duration: 15s;
	background: linear-gradient(-45deg, var(--cssfx-grad-c1), var(--cssfx-grad-c2), var(--cssfx-grad-c3), var(--cssfx-grad-c1)) !important;
	background-size: 400% 400% !important;
	animation: cssfx-grad-bg var(--cssfx-grad-duration) ease infinite !important;
}
@keyframes cssfx-grad-bg {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* 66. Mesh Gradient BG */
.cssfx-mesh-background {
	--cssfx-mesh-c1: rgba(15, 45, 89, 0.2);
	--cssfx-mesh-c2: rgba(212, 175, 55, 0.2);
	position: relative;
	z-index: 1;
}
.cssfx-mesh-background::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: 
		radial-gradient(at 0% 0%, var(--cssfx-mesh-c1) 0%, transparent 60%),
		radial-gradient(at 100% 100%, var(--cssfx-mesh-c2) 0%, transparent 60%) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 67. Aurora Shifting BG */
.cssfx-aurora-background {
	--cssfx-aurora-c1: #00c2ff;
	--cssfx-aurora-c2: #ff1b6b;
	--cssfx-aurora-duration: 20s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-aurora-background::before {
	content: '';
	position: absolute;
	inset: -50%;
	background: radial-gradient(circle at 30% 30%, var(--cssfx-aurora-c1) 0%, transparent 50%),
	            radial-gradient(circle at 70% 70%, var(--cssfx-aurora-c2) 0%, transparent 50%);
	filter: blur(60px);
	z-index: -1;
	opacity: 0.45;
	pointer-events: none;
	animation: cssfx-aurora var(--cssfx-aurora-duration) ease infinite alternate;
}
@keyframes cssfx-aurora {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); }
	100% { transform: translate(10%, 10%) scale(1.1) rotate(15deg); }
}

/* 68. SVG Noise Film Grain */
.cssfx-svg-noise {
	--cssfx-noise-opacity: 0.05;
	position: relative;
	z-index: 1;
}
.cssfx-svg-noise::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
	opacity: var(--cssfx-noise-opacity);
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 69. Clean Developer Grid */
.cssfx-grid-pattern {
	--cssfx-grid-line-color: rgba(0, 0, 0, 0.04);
	--cssfx-grid-spacing: 30px;
	position: relative;
	z-index: 1;
}
.cssfx-grid-pattern::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(var(--cssfx-grid-line-color) 1px, transparent 1px),
		linear-gradient(90deg, var(--cssfx-grid-line-color) 1px, transparent 1px) !important;
	background-size: var(--cssfx-grid-spacing) var(--cssfx-grid-spacing) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 70. Tech Dot Matrix BG */
.cssfx-dot-matrix {
	--cssfx-dot-matrix-color: rgba(0, 0, 0, 0.06);
	--cssfx-dot-matrix-spacing: 20px;
	position: relative;
	z-index: 1;
}
.cssfx-dot-matrix::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--cssfx-dot-matrix-color) 1.5px, transparent 1.5px) !important;
	background-size: var(--cssfx-dot-matrix-spacing) var(--cssfx-dot-matrix-spacing) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 71. Diagonal Stripe Lines */
.cssfx-diagonal-lines {
	--cssfx-diag-stripe-color: rgba(0, 0, 0, 0.03);
	--cssfx-diag-stripe-width: 28px;
	position: relative;
	z-index: 1;
}
.cssfx-diagonal-lines::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, var(--cssfx-diag-stripe-color), var(--cssfx-diag-stripe-color) 10px, transparent 10px, transparent var(--cssfx-diag-stripe-width)) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 72. Radial Spotlight BG */
.cssfx-radial-spotlight {
	--cssfx-spotlight-color: rgba(0, 194, 255, 0.15);
	--cssfx-spotlight-radius: 50%;
	position: relative;
	z-index: 1;
}
.cssfx-radial-spotlight::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at center, var(--cssfx-spotlight-color) 0%, transparent var(--cssfx-spotlight-radius)) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
}

/* 73. Particle Space Orbit */
.cssfx-particle-space {
	--cssfx-space-color1: rgba(0, 194, 255, 0.1);
	--cssfx-space-color2: rgba(255, 27, 107, 0.08);
	--cssfx-space-duration: 30s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-particle-space::before {
	content: '';
	position: absolute;
	inset: -30%;
	background: 
		radial-gradient(ellipse at 40% 40%, var(--cssfx-space-color1) 0%, transparent 60%),
		radial-gradient(circle at 60% 60%, var(--cssfx-space-color2) 0%, transparent 60%);
	z-index: -1;
	pointer-events: none;
	animation: cssfx-orbit var(--cssfx-space-duration) linear infinite;
}
@keyframes cssfx-orbit {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* 74. Moving Wave Gradient */
.cssfx-wave-gradient {
	--cssfx-wave-color1: #0f2d59;
	--cssfx-wave-color2: #d4af37;
	--cssfx-wave-duration: 10s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-wave-gradient::before {
	content: '';
	position: absolute;
	inset: -50%;
	background: linear-gradient(135deg, var(--cssfx-wave-color1), var(--cssfx-wave-color2), var(--cssfx-wave-color1));
	background-size: 300% 300% !important;
	z-index: -1;
	pointer-events: none;
	opacity: 0.15;
	animation: cssfx-wave-bg var(--cssfx-wave-duration) ease infinite alternate;
}
@keyframes cssfx-wave-bg {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}

/* 75. Neon Cyberpunk Grid */
.cssfx-cyberpunk-grid {
	--cssfx-cyber-line-color: rgba(255, 27, 107, 0.15);
	--cssfx-cyber-line-duration: 12s;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.cssfx-cyberpunk-grid::before {
	content: '';
	position: absolute;
	inset: 0;
	background: 
		linear-gradient(var(--cssfx-cyber-line-color) 2px, transparent 2px),
		linear-gradient(90deg, var(--cssfx-cyber-line-color) 2px, transparent 2px) !important;
	background-size: 40px 40px !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	animation: cssfx-grid-pulse var(--cssfx-cyber-line-duration) ease-in-out infinite alternate;
}
@keyframes cssfx-grid-pulse {
	0% { opacity: 0.3; transform: scale(1); }
	100% { opacity: 0.9; transform: scale(1.05); }
}

/* 76. Diagonal BG Split */
.cssfx-split-diagonal {
	--cssfx-split-diag-c1: #0f2d59;
	--cssfx-split-diag-c2: #d4af37;
	position: relative;
	z-index: 1;
}
.cssfx-split-diagonal::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--cssfx-split-diag-c1) 50%, var(--cssfx-split-diag-c2) 50%) !important;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0.2; /* Soft background blend */
}