/* The image stays registered to the real pointer; only its light breathes. */
:root {
  --alastor-cursor-ready: 1;
  --alastor-cursor-size: 48px;
  --alastor-cursor-hotspot-x: 3.5px;
  --alastor-cursor-hotspot-y: 3px;
}

.alastor-cursor-art,
.alastor-cursor-particles {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.alastor-cursor-art {
  z-index: 1001;
  width: var(--alastor-cursor-size);
  height: var(--alastor-cursor-size);
  transform: translate3d(-100px, -100px, 0);
}

.alastor-cursor-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 1;
  transform: translate(calc(-1 * var(--alastor-cursor-hotspot-x)), calc(-1 * var(--alastor-cursor-hotspot-y)));
}

.alastor-cursor-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0c3 0, #ef859166 17%, #be28432b 43%, transparent 72%);
  transform: translate(-50%, -50%);
  opacity: .38;
  animation: alastor-cursor-breathe 3.4s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.alastor-cursor-particles {
  z-index: 1000;
  contain: strict;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.alastor-cursor-active body,
  html.alastor-cursor-active body * { cursor: none !important; }
  html.alastor-cursor-active .alastor-cursor-art,
  html.alastor-cursor-active .alastor-cursor-particles { visibility: visible; }
  html.alastor-cursor-active .alastor-cursor-light { animation-play-state: running; }
  html.alastor-cursor-active .alastor-cursor-art[data-mode='link'] .alastor-cursor-light {
    width: 17px;
    height: 17px;
  }
}

@keyframes alastor-cursor-breathe {
  from { opacity: .3; }
  to { opacity: .64; }
}

@media print, (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  .alastor-cursor-art,
  .alastor-cursor-particles { display: none !important; }
  html.alastor-cursor-active body,
  html.alastor-cursor-active body * { cursor: revert !important; }
}