.coastal-cursor-layer,
.coastal-cursor-layer * {
  pointer-events: none !important;
  user-select: none;
}

.coastal-cursor-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  display: none;
}

.coastal-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 11.5px;
  height: 12px;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.coastal-cursor.is-visible {
  opacity: .88;
}

.coastal-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6));
}

.coastal-cursor-skull {
  position: absolute;
  width: var(--skull-size, 11px);
  aspect-ratio: 32 / 36;
  animation: coastal-skull-glimmer var(--skull-duration, 800ms) ease-out forwards;
  will-change: transform, opacity;
}

.coastal-cursor-skull svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes coastal-skull-glimmer {
  0% {
    opacity: .82;
    filter: brightness(1.3) drop-shadow(0 0 2px #e9b15c);
    transform: translate3d(-50%, -50%, 0) rotate(var(--skull-angle, 0deg)) scale(.95);
  }
  28% {
    opacity: .98;
    filter: brightness(1.75) drop-shadow(0 0 3px #ffdc85);
  }
  55% {
    opacity: .56;
    filter: brightness(1.1) drop-shadow(0 0 1px #e9b15c);
  }
  100% {
    opacity: 0;
    filter: brightness(1.4) drop-shadow(0 0 2px #ffdc85);
    transform: translate3d(calc(-50% + var(--skull-drift-x, 0px)), calc(-50% + var(--skull-drift-y, -7px)), 0) rotate(var(--skull-end-angle, 45deg)) scale(.25);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .coastal-cursor-layer {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coastal-cursor-layer {
    display: none !important;
  }
  .coastal-cursor-skull {
    animation: none;
  }
}