/* ==========================================================================
   SURABHI PORTFOLIO — CUSTOM CURSOR
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

.cursor {

	position:fixed;

	top:0;
	left:0;

	width:0;
	height:0;

	pointer-events:none;

	z-index:var(--z-cursor);

	opacity:0;

	visibility:hidden;

	transition:
		opacity .3s ease,
		visibility .3s ease;

}


/* Cursor becomes active after JavaScript initializes */

body.cursor-enabled .cursor {

	opacity:1;

	visibility:visible;

}


/* ==========================================================================
   CURSOR DOT
   ========================================================================== */

.cursor-dot {

	position:absolute;

	top:0;
	left:0;

	width:8px;
	height:8px;

	border-radius:50%;

	background:var(--color-primary);

	transform:
		translate(-50%, -50%);

	will-change:transform;

}


/* ==========================================================================
   CURSOR OUTLINE
   ========================================================================== */

.cursor-outline {

	position:absolute;

	top:0;
	left:0;

	width:42px;
	height:42px;

	border:1px solid var(--color-primary);

	border-radius:50%;

	transform:
		translate(-50%, -50%);

	will-change:
		transform,
		width,
		height,
		border-color,
		background;

}


/* ==========================================================================
   CURSOR TEXT
   ========================================================================== */

.cursor-text {

	position:absolute;

	top:0;
	left:0;

	display:flex;

	align-items:center;
	justify-content:center;

	width:90px;
	height:90px;

	border-radius:50%;

	background:var(--color-primary);

	color:var(--color-white);

	font-size:10px;

	font-weight:var(--fw-semibold);

	letter-spacing:.08em;

	text-transform:uppercase;

	text-align:center;

	opacity:0;

	transform:
		translate(-50%, -50%)
		scale(.75);

	pointer-events:none;

	will-change:
		transform,
		opacity;

}


/* ==========================================================================
   INTERACTIVE STATE
   ========================================================================== */

body.cursor-hover .cursor-outline {

	width:58px;
	height:58px;

	border-color:var(--color-primary);

}


/* ==========================================================================
   CURSOR TEXT STATE
   ========================================================================== */

body.cursor-text-active .cursor-outline {

	width:0;
	height:0;

	border-color:transparent;

}


body.cursor-text-active .cursor-text {

	opacity:1;

	/* transform:
		translate(-50%, -50%)
		scale(1); */

}


/* ==========================================================================
   CURSOR HIDDEN STATE
   ========================================================================== */

body.cursor-hidden .cursor {

	opacity:0;

	visibility:hidden;

}


/* ==========================================================================
   CURSOR OVER DARK BACKGROUNDS
   ========================================================================== */

body.cursor-light .cursor-dot {

	background:var(--color-white);

}


body.cursor-light .cursor-outline {

	border-color:var(--color-white);

}


body.cursor-light .cursor-text {

	background:var(--color-white);

	color:var(--color-primary);

}


/* ==========================================================================
   DISABLE CURSOR ON TOUCH DEVICES
   ========================================================================== */

@media (hover:none), (pointer:coarse) {

	.cursor {

		display:none;

	}

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce) {

	.cursor,
	.cursor-dot,
	.cursor-outline,
	.cursor-text {

		transition:none;

	}

}