/* Custom cursor — desktop pointer devices only */

@media (pointer: fine) {
	body.has-custom-cursor,
	body.has-custom-cursor * {
		cursor: none !important;
	}

	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		pointer-events: none;
		opacity: 0;
		/* Solid disc blends with whatever is behind it: reads as ink on light
		   backgrounds and inverts to colour over imagery / dark sections. */
		mix-blend-mode: difference;
		transition: opacity var(--duration-fast) var(--ease-base);
	}

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

	.cursor-inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: #fff; /* white + difference blend = reacts to content */
		overflow: visible;
		transition:
			width var(--duration-base) var(--ease-base),
			height var(--duration-base) var(--ease-base),
			transform var(--duration-fast) var(--ease-base);
	}

	/* Text links & buttons — shrink to a precise solid dot */
	.cursor--link .cursor-inner {
		width: 0.75rem;
		height: 0.75rem;
	}

	/* Icon buttons & socials — solid disc that wraps the icon */
	.cursor--icon .cursor-inner {
		width: 3.25rem;
		height: 3.25rem;
	}

	/* Cards — frosted "View Project" pill (dmcg-style) */
	.cursor--card {
		mix-blend-mode: normal;
	}

	.cursor--card .cursor-inner {
		width: auto;
		height: auto;
		gap: 0.5rem;
		padding: 0.7rem 1.25rem;
		border-radius: 999px;
		white-space: nowrap;
		background: rgb(255 255 255 / 0.74);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	}

	/* Press feedback — layered on top of the active variant */
	.cursor.is-pressed .cursor-inner {
		transform: scale(0.82);
	}

	/* Card pill: soften the whole-pill squash so the arrow slide reads clearly */
	.cursor--card.is-pressed .cursor-inner {
		transform: scale(0.97);
	}

	.cursor--card.is-pressed .cursor-arrow {
		transform: translateX(0.375rem);
	}

	.cursor-arrow {
		display: block;
		width: 1.375rem;
		height: 1.375rem;
		flex-shrink: 0;
		color: var(--ink); /* sits inside the white disc; blend keeps it legible */
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		opacity: 0;
		transform: scale(0.85);
		transition:
			opacity var(--duration-base) var(--ease-base),
			transform var(--duration-base) var(--ease-base);
	}

	.cursor-arrow path {
		fill: none;
		stroke: currentColor;
	}

	.cursor-label {
		position: absolute;
		display: block;
		margin: 0;
		padding: 0;
		font-family: var(--font-display, "General Sans", system-ui, sans-serif);
		font-size: var(--text-sm);
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.02em;
		text-align: center;
		color: var(--ink);
		opacity: 0;
		transform: scale(0.85);
		transition:
			opacity var(--duration-base) var(--ease-base),
			transform var(--duration-base) var(--ease-base);
	}

	.cursor--card .cursor-arrow {
		width: 1.25rem;
		height: 1.25rem;
		opacity: 1;
		transform: none;
	}

	.cursor--card .cursor-label {
		position: static;
		font-size: var(--text-md);
		opacity: 1;
		transform: none;
		line-height: 1;
	}
}

@media (pointer: fine) and (prefers-reduced-motion: reduce) {
	.cursor-inner,
	.cursor-arrow,
	.cursor-label {
		transition: none;
	}
}