/* Use the generated wand directly, with its click point at the cross tip. */
@media (any-hover: hover) and (any-pointer: fine) {
  html,
  body,
  body * {
    cursor: url('assets/web/cursors/wand-cursor-64.png') 6 5,
            url('assets/web/cursors/wand-cursor-48.png') 5 4,
            auto !important;
  }
}

.wand-sparks {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.wand-spark {
  position: absolute;
  width: var(--spark-size);
  height: var(--spark-size);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 .6px rgba(45,40,55,.55));
  animation: wand-spark-burst 650ms cubic-bezier(.15,.6,.3,1) both;
}
.wand-spark__shape {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.9) 9%, rgba(255,255,255,.35) 23%, rgba(255,255,255,.08) 40%, transparent 62%);
  pointer-events: none;
}
.wand-spark__shape::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 52% 48%, 100% 50%, 52% 52%, 50% 100%, 48% 52%, 0 50%, 48% 48%);
}
.wand-spark__shape::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 2px rgba(255,255,255,.7);
}
@keyframes wand-spark-burst {
  0% {opacity:0;transform:translate(-50%,-50%) scale(.15);}
  15% {opacity:1;transform:translate(-50%,-50%) scale(1);}
  35% {opacity:1;}
  65% {opacity:.65;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.8);}
  100% {opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.15);}
}
@media (prefers-reduced-motion: reduce) {
  .wand-sparks {display:none;}
}