/* ----------------------------------------------------------------------------------------
* Project : Karara Kitchens & Wardrobes
* File    : Cursor follower
* ----------------------------------------------------------------------------------------
* A dot pinned to the pointer and a ring that trails it. Positions come from
* js/magiccursor.js as translate3d on the children; every state change below is
* a compositor-only property (transform / opacity / background) so hovering
* never triggers layout.
* -------------------------------------------------------------------------------------- */

.kk-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	will-change: opacity;
}

.kk-cursor.is-visible {
	opacity: 1;
}

/* --- trailing ring --- */

.kk-cursor__ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 1.5px solid var(--main-color);
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	transition:
		width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		margin 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.35s ease,
		border-color 0.35s ease,
		opacity 0.25s ease;
}

/* --- pointer dot --- */

.kk-cursor__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--main-color);
	will-change: transform;
	transition:
		width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease;
}

/* --- over something clickable: ring opens up, dot steps aside --- */

.kk-cursor.is-hover .kk-cursor__ring {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	background-color: rgba(252, 137, 2, 0.14);
	border-color: var(--main-color);
}

.kk-cursor.is-hover .kk-cursor__dot,
.kk-cursor.is-labelled .kk-cursor__dot {
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
}

/* --- mouse down --- */

.kk-cursor.is-pressed .kk-cursor__ring {
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	background-color: rgba(252, 137, 2, 0.28);
}

.kk-cursor.is-pressed .kk-cursor__dot {
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
}

/* --- labelled state, for [data-cursor-text] --- */

.kk-cursor__label {
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--white-color);
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.kk-cursor.is-labelled .kk-cursor__ring {
	width: 88px;
	height: 88px;
	margin: -44px 0 0 -44px;
	background-color: var(--main-color);
	border-color: var(--main-color);
}

.kk-cursor.is-labelled .kk-cursor__label {
	opacity: 1;
	transform: scale(1);
}

/* --- opt out --- */

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.kk-cursor {
		display: none !important;
	}
}