/* ------------------------------------------------------------------------------
 * Project:       Kirby Castle
 * Owner:         Joshua H. Kirby
 * Copyright:     Copyright (c) 2026 Joshua H. Kirby. All rights reserved.
 * Last Modified: 2026-07-14
 * ------------------------------------------------------------------------------ */

/* App-wide custom cursor: a black-fill, gold-outline arrow/pointer shape
 * (an inline SVG, built in scripts/custom_cursor.js -- not a div, so the
 * outline stays crisp and fill/stroke can be styled from here), plus a
 * pulse ring on click. Loaded after tokens/colors.css so it can reference
 * --primary. The activation class is added by the script itself, not
 * assumed here -- if JS never runs, the native cursor stays put instead
 * of the page silently having no visible cursor at all. */

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

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;

  fill: #050505;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;

  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 0.15s ease;
  will-change: transform;
}

/* One of these is spawned per click, at the click point, and removed once
 * its own animation finishes (see the 'animationend' listener in the
 * script) -- an expanding, fading gold ring. */
.custom-cursor-pulse {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid var(--gold);

  pointer-events: none;
  z-index: 9998;
  animation: custom-cursor-pulse 0.5s ease-out forwards;
}

@keyframes custom-cursor-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-cursor-pulse {
    animation: none;
    display: none;
  }
}