/* ============================================================
   Shared custom cursor — clean gold dot + trailing ring.
   Loaded on every page (index + about/contact/blog).
   Only active on devices with a fine pointer (desktop).
   ============================================================ */
:root {
  --cursor-gold: #C6A35C;
  --cursor-gold-bright: #E4C77E;
}

@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  /* keep the native text caret where typing happens */
  input, textarea, select, [contenteditable="true"] { cursor: auto; }

  .cursor-dot,
  .cursor-ring {
    position: fixed; left: 0; top: 0;
    pointer-events: none; z-index: 100000;
    border-radius: 50%;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
  }

  /* solid dot — snaps to the pointer */
  .cursor-dot {
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    background: var(--cursor-gold);
    transition: width .2s ease, height .2s ease, margin .2s ease, background-color .2s ease, opacity .2s ease;
  }

  /* outline ring — trails smoothly behind */
  .cursor-ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1.5px solid var(--cursor-gold);
    opacity: .55; z-index: 99999;
    transition: width .28s cubic-bezier(.25,.46,.45,.94),
                height .28s cubic-bezier(.25,.46,.45,.94),
                margin .28s cubic-bezier(.25,.46,.45,.94),
                opacity .28s ease, border-color .2s ease, background-color .2s ease;
  }

  /* over interactive elements — ring opens up, faint gold fill */
  body.cursor-hover .cursor-ring {
    width: 48px; height: 48px; margin: -24px 0 0 -24px;
    border-color: var(--cursor-gold-bright); opacity: .95;
    background: rgba(198, 163, 92, .08);
  }
  body.cursor-hover .cursor-dot {
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: var(--cursor-gold-bright);
  }

  /* press feedback */
  body.cursor-down .cursor-ring {
    width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 1;
  }

  /* cursor left the window */
  body.cursor-hidden .cursor-dot,
  body.cursor-hidden .cursor-ring { opacity: 0; }
}

/* Touch / coarse pointers — no custom cursor at all */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}