/* Custom cursor: yellow dot + diamond outline (desktop only) */
:root {
  --cursor-yellow: #ffd100;
  --cursor-ring-size: 34px;
  --cursor-dot-size: 8px;
  /* Raise above Colorbox overlay (z-index: 9999) */
  --cursor-z: 100000;
}

@media (any-pointer: fine) {
  html.custom-cursor-enabled, html.custom-cursor-enabled * { cursor: none !important; }

  #cursor-dot, #cursor-ring {
    position: fixed;
    top: 0; left: 0;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    z-index: var(--cursor-z);
    will-change: transform, width, height, opacity;
  }
  #cursor-dot {
    width: var(--cursor-dot-size);
    height: var(--cursor-dot-size);
    background: var(--cursor-yellow);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease;
    opacity: 0; /* hidden until first mouse move */
  }
  #cursor-ring {
    width: var(--cursor-ring-size);
    height: var(--cursor-ring-size);
    border: none; /* diamond via pseudo */
    border-radius: 50%;
    background: transparent;
    opacity: 0; /* hidden until first mouse move */
    mix-blend-mode: difference;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), width 220ms, height 220ms, opacity 150ms;
    position: fixed;
  }
  #cursor-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #fff; /* auto-contrast */
    border-radius: 0;
    transform: rotate(45deg);
    box-sizing: border-box;
  }
  #cursor-ghost {
    position: fixed;
    top: 0; left: 0;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    z-index: calc(var(--cursor-z) - 1);
    width: calc(var(--cursor-ring-size) * 0.9);
    height: calc(var(--cursor-ring-size) * 0.9);
    border: none;
    border-radius: 50%;
    opacity: 0; /* hidden until first mouse move */
    mix-blend-mode: difference;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 200ms;
  }

  /* Interactions */
  html.custom-cursor-enabled .cursor-down #cursor-dot { transform: translate3d(-50%, -50%, 0) scale(0.75); }
  html.custom-cursor-enabled .cursor-down #cursor-ring { transform: translate3d(-50%, -50%, 0) scale(0.9); }
  html.custom-cursor-enabled .cursor-hover #cursor-ring {
    width: calc(var(--cursor-ring-size) * 1.25);
    height: calc(var(--cursor-ring-size) * 1.25);
    opacity: 1;
  }
  html.custom-cursor-enabled .cursor-hover #cursor-dot { background: var(--cursor-yellow); }

  /* Show cursor only after first movement */
  body.cursor-active #cursor-dot { opacity: 1; }
  body.cursor-active #cursor-ring { opacity: 0.9; }
  body.cursor-active #cursor-ghost { opacity: 0.35; }

  /* Inputs/textareas keep native caret */
  input, textarea, select, [contenteditable="true"] { cursor: auto !important; }
  .cursor-hide #cursor-dot, .cursor-hide #cursor-ring, .cursor-hide #cursor-ghost { display: none !important; }

  /* Click ripple */
  .cursor-ripple {
    position: fixed; top: 0; left: 0;
    width: 10px; height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.2);
    animation: cursorRipple 550ms ease-out forwards;
    z-index: var(--cursor-z);
  }
  @keyframes cursorRipple { to { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  #cursor-ring, #cursor-dot, #cursor-ghost { transition: none; }
}