/* ==========================================================================
   CUSTOM CURSOR — Desktop only
   BlushTheme v1.0.0
   ========================================================================== */

/* Hide on touch devices */
@media (pointer: coarse) {
	.custom-cursor {
		display: none !important;
	}
}

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	margin-top: -6px;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	pointer-events: none;
	z-index: 100000;
	will-change: transform;
	transition:
		width var(--duration-fast) var(--ease-out),
		height var(--duration-fast) var(--ease-out),
		margin var(--duration-fast) var(--ease-out),
		border-width var(--duration-fast) var(--ease-out),
		border-radius var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		opacity var(--duration-fast) var(--ease-out);
	mix-blend-mode: difference;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

/* Expanded state on clickable elements */
.custom-cursor.is-clickable {
	width: 48px;
	height: 48px;
	margin-left: -24px;
	margin-top: -24px;
	border-width: 1.5px;
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Image hover state */
.custom-cursor.is-image {
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	border-width: 1px;
	background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.custom-cursor__text {
	font-family: var(--font-body);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-out);
	white-space: nowrap;
}

.custom-cursor.is-image .custom-cursor__text {
	opacity: 1;
}

/* Link state — Phosphor arrow-up-right icon inside */
.custom-cursor__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-out);
	color: var(--color-accent);
}

.custom-cursor__icon svg {
	width: 18px;
	height: 18px;
}

.custom-cursor.is-link {
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.custom-cursor.is-link .custom-cursor__icon {
	opacity: 1;
}

.custom-cursor.is-link .custom-cursor__text {
	display: none;
}

/* Horizontal scroll state — circle with flanking chevrons */
.custom-cursor__chevron {
	position: absolute;
	color: var(--color-accent);
	opacity: 0;
	transition:
		opacity var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
	display: flex;
	align-items: center;
	pointer-events: none;
}

.custom-cursor__chevron--left {
	right: calc(100% + 6px);
	transform: translateX(4px);
}

.custom-cursor__chevron--right {
	left: calc(100% + 6px);
	transform: translateX(-4px);
}

.custom-cursor.is-horizontal-scroll {
	width: 32px;
	height: 32px;
	margin-left: -16px;
	margin-top: -16px;
	border-width: 1px;
	background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
	mix-blend-mode: normal;
}

.custom-cursor.is-horizontal-scroll .custom-cursor__chevron {
	opacity: 1;
	transform: translateX(0);
}

.custom-cursor.is-horizontal-scroll .custom-cursor__text {
	opacity: 0;
}

/* Hide default cursor on desktop when custom cursor is active */
body.has-custom-cursor,
body.has-custom-cursor * {
	cursor: none !important;
}

body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [role="button"] {
	cursor: none !important;
}

/* ==========================================================================
   Per-Theme Cursor Variants
   ========================================================================== */

/* Rosé — rose accent, slightly larger presence.
   Disable mix-blend-mode: light bg + difference turns pink → teal. */
[data-theme="rose"] .custom-cursor {
	width: 14px;
	height: 14px;
	margin-left: -7px;
	margin-top: -7px;
	mix-blend-mode: normal;
}

[data-theme="rose"] .custom-cursor.is-clickable {
	width: 52px;
	height: 52px;
	margin-left: -26px;
	margin-top: -26px;
}

[data-theme="rose"] .custom-cursor.is-image {
	width: 68px;
	height: 68px;
	margin-left: -34px;
	margin-top: -34px;
}

[data-theme="rose"] .custom-cursor.is-link {
	width: 72px;
	height: 72px;
	margin-left: -36px;
	margin-top: -36px;
}

/* Mono — black SQUARE, not circle. Bold, Swiss-design choice.
   Disable mix-blend-mode (inverts to invisible on white bg).
   Use solid black border for visibility on white. */
[data-theme="mono"] .custom-cursor {
	border-radius: 0;
	border-color: #000000;
	mix-blend-mode: normal;
}

[data-theme="mono"] .custom-cursor.is-clickable {
	background-color: rgba(0, 0, 0, 0.06);
	border-color: #000000;
}

[data-theme="mono"] .custom-cursor.is-image {
	background-color: rgba(0, 0, 0, 0.04);
	border-color: #000000;
}

[data-theme="mono"] .custom-cursor__text {
	color: #000000;
}

[data-theme="mono"] .custom-cursor__chevron {
	color: #000000;
}

/* Noir — deep red glow radiates from the cursor */
[data-theme="noir"] .custom-cursor {
	mix-blend-mode: normal;
}

[data-theme="noir"] .custom-cursor.is-visible {
	box-shadow:
		0 0 8px rgba(139, 0, 0, 0.35),
		0 0 20px rgba(139, 0, 0, 0.15);
}

[data-theme="noir"] .custom-cursor.is-clickable {
	box-shadow:
		0 0 12px rgba(139, 0, 0, 0.5),
		0 0 30px rgba(139, 0, 0, 0.2);
}

[data-theme="noir"] .custom-cursor.is-image {
	box-shadow:
		0 0 14px rgba(139, 0, 0, 0.5),
		0 0 35px rgba(139, 0, 0, 0.2);
}

/* Exotic — teal fill with copper (accent) border */
[data-theme="exotic"] .custom-cursor.is-clickable {
	background-color: rgba(42, 157, 143, 0.12);
}

[data-theme="exotic"] .custom-cursor.is-image {
	background-color: rgba(42, 157, 143, 0.1);
}

[data-theme="exotic"] .custom-cursor.is-horizontal-scroll {
	background-color: rgba(42, 157, 143, 0.08);
}

[data-theme="exotic"] .custom-cursor.is-link {
	background-color: rgba(42, 157, 143, 0.1);
}