/* =========================================================
   Premium Custom Cursor System — 925 Sterling Silver identity
   Desktop-only (JS gates activation on hover:hover + pointer:fine).
   Native cursor is hidden ONLY via the .pc-active class, which JS
   adds after the custom cursor has confirmed it initialized —
   see /js/cursor.js. If that class is absent, the browser's own
   cursor is untouched, so a JS error can never leave the page
   without a visible pointer.
   Only transform / opacity / filter are ever animated here.
   ========================================================= */

html.pc-active,
html.pc-active * {
  cursor: none !important;
}

#pcCursor,
.pc-ripple,
.pc-particle {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483000;
}

#pcCursor {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);
}

/* Interactive hover — subtle scale-up + brighter glow, same normal.png */
#pcCursor.is-hover {
  filter: drop-shadow(0 0 5px rgba(238, 241, 243, 0.85)) drop-shadow(0 0 11px rgba(168, 175, 184, 0.55));
}

/* Disabled — dim + desaturate, no hover glow applies (state takes priority over auto-hover) */
#pcCursor.is-disabled {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Catalog / product-card browsing — brass/gold tint via filter only, no new art */
#pcCursor.is-catalog {
  filter: sepia(0.55) hue-rotate(-22deg) saturate(2.4) brightness(1.08);
}

/* Loading — busy.png spins via a pseudo-element so the parent's JS-owned
   transform (position/scale) never conflicts with the CSS rotate animation. */
#pcCursor.is-loading {
  background-image: none !important;
}
#pcCursor.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/cursor/busy.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: pc-spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #pcCursor.is-loading::before { animation: none; }
}
@keyframes pc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Zoom in/out — precision.png + a tiny plain-CSS +/- badge, no image assets */
#pcCursor.is-zoom-in::after,
#pcCursor.is-zoom-out::after {
  content: '+';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper, #f4f5f7);
  border: 1px solid rgba(20, 22, 26, 0.55);
  color: var(--ink, #16181b);
  font: 700 11px/14px var(--font-body, sans-serif);
  text-align: center;
}
#pcCursor.is-zoom-out::after { content: '\2212'; }

/* External link — precision-free, normal.png + a tiny plain-CSS arrow badge */
#pcCursor.is-external::after {
  content: '\2197';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper, #f4f5f7);
  border: 1px solid rgba(20, 22, 26, 0.55);
  color: var(--ink, #16181b);
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}

/* Ripple ring — click feedback, separate small pooled elements, never baked into the PNGs */
.pc-ripple {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid var(--brass, #a8afb8);
  opacity: 0;
  transform: translate3d(-200px, -200px, 0) scale(0.4);
  will-change: transform, opacity;
}
.pc-ripple.is-active {
  animation: pc-ripple-anim 420ms ease-out forwards;
}
@keyframes pc-ripple-anim {
  0%   { opacity: 0.85; transform: translate3d(var(--rx, -200px), var(--ry, -200px), 0) scale(0.4); }
  100% { opacity: 0;    transform: translate3d(var(--rx, -200px), var(--ry, -200px), 0) scale(2.4); }
}

/* Fast-movement micro particles — small reused pool, fade only, never a trail */
.pc-particle {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--brass, #a8afb8);
  opacity: 0;
  transform: translate3d(-200px, -200px, 0) scale(1);
  will-change: transform, opacity;
}
.pc-particle.is-active {
  animation: pc-particle-anim 260ms ease-out forwards;
}
@keyframes pc-particle-anim {
  0%   { opacity: 0.7; transform: translate3d(var(--px, -200px), var(--py, -200px), 0) scale(1); }
  100% { opacity: 0;   transform: translate3d(var(--px, -200px), var(--py, -200px), 0) scale(0.25); }
}