/* ==========================================================================
   CUSTOM CURSOR
   The arrow is the real system cursor, just redrawn in the site's colours
   (cream arrow + ink outline, gold over anything clickable) — so it's
   instantly recognisable as "my pointer" and never lags. The ring is a
   soft companion that trails it (js/modules/cursor.js).
   Mouse/trackpad only: touch screens keep their native behaviour.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("/assets/cursor/arrow.svg") 5 3, url("/assets/cursor/arrow.png") 5 3, auto;
  }
  a, button, [role="tab"], label, summary, select, [data-cursor],
  input[type="checkbox"], input[type="radio"], .map-list__item {
    cursor: url("/assets/cursor/arrow-hover.svg") 5 3, url("/assets/cursor/arrow-hover.png") 5 3, pointer;
  }
  input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: text; }
}

.cursor-ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  pointer-events: none;
  width: 0; height: 0;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cursor-ring.is-visible { opacity: 1; }
/* the ring is drawn around the arrow's tip */
.cursor-ring::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,154,61,0.75);
  background: rgba(200,154,61,0);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), opacity 0.3s;
}
.cursor-ring.is-hover::before {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  background: rgba(231,199,132,0.16);
  border-color: rgba(200,154,61,0.9);
}
.cursor-ring.is-down::before { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(231,199,132,0.35); }
.cursor-ring.on-dark::before { border-color: rgba(247,241,228,0.7); }
.cursor-ring.on-dark.is-hover::before { background: rgba(247,241,228,0.12); }
.cursor-ring__label {
  position: absolute;
  left: 22px; top: 24px;
  white-space: nowrap;
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-cream);
  opacity: 0;
  transform: scale(0.6) translateY(-4px);
  transform-origin: left top;
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}
.cursor-ring.has-label .cursor-ring__label { opacity: 1; transform: none; }
.cursor-ring.on-dark .cursor-ring__label { background: var(--c-gold-soft); color: #2E2308; }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* ==========================================================================
   SCROLL PROGRESS hairline (top of the viewport)
   ========================================================================== */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 600; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-sage), var(--c-gold)); transform-origin: left; transform: scaleX(0); }