/* =========================================================================
   FULLDOT — Atmosphere · Custom Cursor styles
   ========================================================================= */

/* Hide native cursor only when our custom is active (desktop fine pointer) */
html.has-fd-cursor,
html.has-fd-cursor *,
html.has-fd-cursor a,
html.has-fd-cursor button {
  cursor: none !important;
}
/* Still keep text-cursor inside inputs/textareas */
html.has-fd-cursor input,
html.has-fd-cursor textarea,
html.has-fd-cursor [contenteditable="true"] {
  cursor: text !important;
}

/* ── Cursor primitives ──────────────────────────────────────────────── */
.fd-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}

/* DOT — sharp center anchor (8px) */
.fd-cursor--dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--copper-glow, #C89B6C);
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0.9;
}

/* RING — eased follower (32px default → expands per state) */
.fd-cursor--ring {
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid rgba(200, 155, 108, 0.55);
  border-radius: 50%;
  background: transparent;
  transition:
    width 320ms cubic-bezier(0.2, 0.9, 0.2, 1.1),
    height 320ms cubic-bezier(0.2, 0.9, 0.2, 1.1),
    margin 320ms cubic-bezier(0.2, 0.9, 0.2, 1.1),
    border-color 320ms ease,
    background-color 320ms ease,
    backdrop-filter 320ms ease;
  display: grid;
  place-items: center;
}
.fd-cursor__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper, #F5F1E8);
  opacity: 0;
  transition: opacity 220ms ease;
}

/* STATE: over link/button — ring grows + fills */
.fd-cursor--ring.is-link {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-color: rgba(200, 155, 108, 0.85);
  background: rgba(200, 155, 108, 0.10);
}

/* STATE: over image/card — ring becomes "VIEW" pill */
.fd-cursor--ring.is-view {
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
  border-color: rgba(245, 241, 232, 0.18);
  background: rgba(10, 31, 61, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fd-cursor--ring.is-view .fd-cursor__label { opacity: 1; }

/* STATE: over editable text */
.fd-cursor--ring.is-text {
  width: 2px; height: 22px;
  margin: -11px 0 0 -1px;
  border: none;
  background: var(--copper-glow, #C89B6C);
  border-radius: 1px;
}

/* STATE: pointer down (press feedback) */
.fd-cursor--ring.is-down {
  transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0.86);
}

/* STATE: outside window */
.fd-cursor.is-hidden { opacity: 0; transition: opacity 220ms ease; }

/* GLOW — soft warm radial that trails far behind, additive ambience */
.fd-cursor--glow {
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  background: radial-gradient(circle at center,
    rgba(218, 179, 130, 0.18) 0%,
    rgba(232, 159, 113, 0.08) 30%,
    transparent 65%);
  mix-blend-mode: screen;
  filter: blur(20px);
  opacity: 0.7;
  pointer-events: none;
}

/* Hide cursor entirely on ink/dark sections so it doesn't fight legibility */
.section--ink .fd-cursor--glow {
  background: radial-gradient(circle at center,
    rgba(111, 178, 164, 0.16) 0%,
    rgba(200, 155, 108, 0.08) 30%,
    transparent 65%);
}

/* Suppress legacy hero-cursor companion when our system is active */
html.has-fd-cursor .hero-cursor { display: none !important; }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  html.has-fd-cursor, html.has-fd-cursor * { cursor: auto !important; }
  .fd-cursor { display: none; }
}
@media (hover: none), (pointer: coarse) {
  html.has-fd-cursor, html.has-fd-cursor * { cursor: auto !important; }
  .fd-cursor { display: none; }
}