/**
 * Pond Apex — Custom Cursor Effects
 *
 * Base styles for the follower cursor div.
 * Per-row sizing, colors, and borders are generated by the PHP renderer.
 *
 * @since 1.9.0
 */

/* --- Base cursor --- */
.pa-ce-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	pointer-events: none;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pa-ce-cursor--visible {
	opacity: 1;
}

/* --- Dot type --- */
.pa-ce-cursor--dot {
	border-radius: 50%;
}

/* --- Text type --- */
.pa-ce-cursor--text {
	border-radius: 999px;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1;
}

.pa-ce-text {
	display: block;
}

/* --- Icon type --- */
.pa-ce-cursor--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	line-height: 1;
}

.pa-ce-cursor--icon i {
	display: block;
}

/* --- Invert type --- */
.pa-ce-cursor--invert {
	border-radius: 50%;
	background: #fff;
	mix-blend-mode: difference;
	/* Override base: position:fixed, z-index, transform, and opacity (non-1)
	   all create isolated stacking contexts that break mix-blend-mode.
	   Must use position:absolute on body with no z-index, no transform,
	   and visibility instead of opacity. JS uses pageX/pageY for coords. */
	position: absolute;
	z-index: auto;
	will-change: top, left;
	/* opacity:0 creates a stacking context — use visibility instead. */
	opacity: 1;
	visibility: hidden;
	transition: none;
}

.pa-ce-cursor--invert.pa-ce-cursor--visible {
	visibility: visible;
}

/* --- Image type --- */
.pa-ce-cursor--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* --- Hover color override via CSS custom property --- */
.pa-ce-cursor--dot.pa-ce-cursor--hover {
	background-color: var(--pa-ce-hover-color) !important;
	border-color: var(--pa-ce-hover-color) !important;
}

.pa-ce-cursor--text.pa-ce-cursor--hover {
	background-color: var(--pa-ce-hover-color) !important;
}

.pa-ce-cursor--icon.pa-ce-cursor--hover {
	background-color: var(--pa-ce-hover-color) !important;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.pa-ce-cursor {
		transition: none;
	}
}

/* --- Print --- */
@media print {
	.pa-ce-cursor {
		display: none !important;
	}
}