/**
 * Custom Cursor Styles
 * Three different cursor style options
 */

/* Hide default cursor when custom cursor is enabled */
body.custom-cursor-enabled {
	cursor: none;
}

body.custom-cursor-enabled * {
	cursor: none !important;
}

body.custom-cursor-enabled a,
body.custom-cursor-enabled button,
body.custom-cursor-enabled input[type="submit"],
body.custom-cursor-enabled input[type="button"],
body.custom-cursor-enabled .clickable {
	cursor: none !important;
}

/* Custom Cursor Container */
.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999999;
	mix-blend-mode: difference;
	transition: transform 0.1s ease-out, opacity 0.2s ease;
	will-change: transform;
}

.custom-cursor.hidden {
	opacity: 0;
}

/* Style 1: Circle with White Border & Navy Blue Dot */
.custom-cursor.style1 .cursor-outer {
	width: 40px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
	pointer-events: none;
}

.custom-cursor.style1 .cursor-inner {
	width: 8px;
	height: 8px;
	background-color: #1e3a8a;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
	pointer-events: none;
}

.custom-cursor.style1.hover .cursor-outer {
	width: 60px;
	height: 60px;
	border-color: rgba(255, 255, 255, 1);
}

.custom-cursor.style1.hover .cursor-inner {
	width: 12px;
	height: 12px;
	background-color: #3b82f6;
}

.custom-cursor.style1.click .cursor-outer {
	width: 35px;
	height: 35px;
}

.custom-cursor.style1.click .cursor-inner {
	width: 6px;
	height: 6px;
}

/* Style 2: Gradient Circle */
.custom-cursor.style2 .cursor-outer {
	width: 45px;
	height: 45px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
	pointer-events: none;
	backdrop-filter: blur(2px);
}

.custom-cursor.style2 .cursor-inner {
	width: 10px;
	height: 10px;
	background: linear-gradient(135deg, #6366f1, #a855f7);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.2s ease, height 0.2s ease;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.custom-cursor.style2.hover .cursor-outer {
	width: 65px;
	height: 65px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5));
}

.custom-cursor.style2.hover .cursor-inner {
	width: 14px;
	height: 14px;
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
}

.custom-cursor.style2.click .cursor-outer {
	width: 40px;
	height: 40px;
}

.custom-cursor.style2.click .cursor-inner {
	width: 8px;
	height: 8px;
}

/* Style 3: Animated Ring */
.custom-cursor.style3 .cursor-outer {
	width: 50px;
	height: 50px;
	border: 3px solid transparent;
	border-top-color: rgba(255, 255, 255, 0.9);
	border-right-color: rgba(255, 255, 255, 0.6);
	border-bottom-color: rgba(255, 255, 255, 0.3);
	border-left-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: width 0.3s ease, height 0.3s ease;
	pointer-events: none;
	animation: rotateCursor 1.5s linear infinite;
}

.custom-cursor.style3 .cursor-inner {
	width: 6px;
	height: 6px;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.2s ease, height 0.2s ease;
	pointer-events: none;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.custom-cursor.style3.hover .cursor-outer {
	width: 70px;
	height: 70px;
	animation-duration: 1s;
}

.custom-cursor.style3.hover .cursor-inner {
	width: 10px;
	height: 10px;
	box-shadow: 0 0 25px rgba(255, 255, 255, 1);
}

.custom-cursor.style3.click .cursor-outer {
	width: 45px;
	height: 45px;
}

.custom-cursor.style3.click .cursor-inner {
	width: 4px;
	height: 4px;
}

@keyframes rotateCursor {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Style 4: Black Low Opacity with Black Dot */
.custom-cursor.style4 .cursor-outer {
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
	pointer-events: none;
}

.custom-cursor.style4 .cursor-inner {
	width: 6px;
	height: 6px;
	background-color: #000000;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: width 0.2s ease, height 0.2s ease;
	pointer-events: none;
}

.custom-cursor.style4.hover .cursor-outer {
	width: 60px;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.25);
}

.custom-cursor.style4.hover .cursor-inner {
	width: 10px;
	height: 10px;
}

.custom-cursor.style4.click .cursor-outer {
	width: 35px;
	height: 35px;
	background-color: rgba(0, 0, 0, 0.3);
}

.custom-cursor.style4.click .cursor-inner {
	width: 4px;
	height: 4px;
}

/* Smooth Scrolling Styles */
html.smooth-scrolling {
	scroll-behavior: smooth;
}

/* For browsers that support smooth scrolling natively */
@media (prefers-reduced-motion: no-preference) {
	html.smooth-scrolling {
		scroll-behavior: smooth;
	}
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	html.smooth-scrolling {
		scroll-behavior: auto;
	}
	
	.custom-cursor {
		transition: none !important;
	}
	
	.custom-cursor .cursor-outer,
	.custom-cursor .cursor-inner {
		transition: none !important;
		animation: none !important;
	}
}