/* ── Site-wide custom cursor + smoke trail ─────────────────────────
   Two independent parts:

   1. Cursor shape — a ring + dot drawn with an inline SVG data URI.
      `cursor` is an INHERITED property, so setting it on <html> reaches
      every descendant without specificity fights. Elements that already
      declare their own cursor (links via the UA stylesheet, the gallery's
      `zoom-in`, lightbox `zoom-out`, inline styles) keep theirs.

   2. Smoke layer — the <canvas> that public/shared/js/cursor.js creates
      and draws the pointer trail into.

   Opt out on any page:  <body data-cursor="off">
   ─────────────────────────────────────────────────────────────── */

/* Palette match: sky #38bdf8, gold #e8c547. */

/* ── 1. Cursor shape (mouse-like devices only) ───────────────────── */
@media (hover: hover) and (pointer: fine) {
	html.erp-cursor-on {
		cursor:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%2338bdf8' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='14' r='2.5' fill='%23e8c547'/%3E%3C/svg%3E")
				14 14,
			auto;
	}

	/* Clickable things get an expanded, brighter ring so the affordance
	   survives the shape change. */
	html.erp-cursor-on
		:is(a, button, [role="button"], label, summary, select) {
		cursor:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='%2338bdf8' fill-opacity='0.18'/%3E%3Ccircle cx='14' cy='14' r='10' fill='none' stroke='%23e8c547' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%2338bdf8'/%3E%3C/svg%3E")
				14 14,
			pointer;
	}

	/* Typing areas keep the I-beam. */
	html.erp-cursor-on :is(textarea, [contenteditable="true"]) {
		cursor: text;
	}

	html.erp-cursor-on
		input:not([type="button"]):not([type="submit"]):not([type="reset"]):not(
			[type="checkbox"]
		):not([type="radio"]):not([type="range"]) {
		cursor: text;
	}
}

/* ── 2. Smoke canvas layer ──────────────────────────────────────── */
.erp-cursor-canvas {
	position: fixed;
	top: 0;
	left: 0;
	/* Below the navbar (1000) and the readme lightbox (9999); above the
	   lightning (1), the snow (2) and the page content (3). */
	z-index: 999;
	pointer-events: none;
}

/* ── Opt-out ─────────────────────────────────────────────────────── */
html[data-cursor="off"].erp-cursor-on {
	cursor: auto;
}

/* Reduced motion: the trail is thinned out by cursor.js (fewer, fainter,
   shorter-lived puffs) but stays visible. The static cursor shape is
   unaffected — it does not animate. */