/* ============================================================
   CUSTOM CURSOR — Premium Gold Glow + Magnetic Ring
   Desktop only, hidden on mobile/touch devices
   ============================================================ */

/* Hide default cursor on desktop */
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor,
  html.custom-cursor * {
    cursor: none !important;
  }
}

/* ── Cursor Dot — precise pointer ────────────────────────── */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              opacity 0.15s ease;
  will-change: transform, left, top;
}

/* ── Cursor Ring — springy follower ──────────────────────── */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(229, 192, 106, 0.5);
  background: transparent;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              background 0.3s ease,
              opacity 0.2s ease,
              border-width 0.2s ease;
  will-change: transform, left, top;
  /* Subtle inner glow */
  box-shadow: 0 0 12px rgba(229, 192, 106, 0.08) inset,
              0 0 20px rgba(229, 192, 106, 0.04);
}

/* ── Cursor Glow — ambient warm aura ─────────────────────── */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(229, 192, 106, 0.04) 0%,
    rgba(212, 168, 67, 0.02) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  will-change: transform, left, top;
  opacity: 0.8;
  mix-blend-mode: screen;
}

/* ── Ring Label — shows text inside ring on hover ────────── */
.cursor-ring-label {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(229, 192, 106, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform, left, top;
  white-space: nowrap;
}
.cursor-ring-label.visible {
  opacity: 1;
}

/* ── Trail Dots — smooth trailing ribbon ─────────────────── */
.cursor-trail {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99995;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* ══════════════════════════════════════════════════════════
   HOVER STATES
   ══════════════════════════════════════════════════════════ */

/* Links & Buttons — ring expands with gold fill */
.cursor-hover-link .cursor-dot {
  width: 4px; height: 4px;
  background: rgba(229, 192, 106, 1);
}
.cursor-hover-link .cursor-ring {
  width: 60px; height: 60px;
  border-color: rgba(229, 192, 106, 0.6);
  background: rgba(229, 192, 106, 0.06);
  box-shadow: 0 0 24px rgba(229, 192, 106, 0.12) inset,
              0 0 30px rgba(229, 192, 106, 0.06);
}

/* Text inputs — cursor becomes a blinking line */
.cursor-hover-text .cursor-dot {
  width: 2px; height: 18px;
  border-radius: 1px;
  background: rgba(229, 192, 106, 0.8);
  animation: cursor-blink 1s step-end infinite;
}
.cursor-hover-text .cursor-ring {
  width: 24px; height: 24px;
  border-color: rgba(229, 192, 106, 0.15);
  opacity: 0.4;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* Cards — ring grows subtly with warm tint */
.cursor-hover-card .cursor-ring {
  width: 50px; height: 50px;
  border-color: rgba(229, 192, 106, 0.3);
  background: rgba(229, 192, 106, 0.02);
}

/* Images / Gallery — crosshair feel */
.cursor-hover-media .cursor-dot {
  width: 12px; height: 12px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}
.cursor-hover-media .cursor-ring {
  width: 48px; height: 48px;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Click State — tactile press ─────────────────────────── */
.cursor-clicking .cursor-dot {
  width: 3px; height: 3px;
  background: #fff;
}
.cursor-clicking .cursor-ring {
  width: 28px; height: 28px;
  border-color: rgba(229, 192, 106, 0.8);
  border-width: 2.5px;
  background: rgba(229, 192, 106, 0.08);
  box-shadow: 0 0 16px rgba(229, 192, 106, 0.2);
}

/* ── Sparkle Particle ────────────────────────────────────── */
.cursor-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99995;
  transform: translate(-50%, -50%);
  animation: cursor-sparkle-out 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cursor-sparkle-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(180deg);
  }
}

/* ── Hidden on mobile / touch ────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring,
  .cursor-glow,
  .cursor-trail,
  .cursor-sparkle,
  .cursor-ring-label {
    display: none !important;
  }
}