.moonshot-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: translate, opacity;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  scale: 1;
  transition: scale 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background-color 0.35s ease, opacity 0.3s ease;
}

.moonshot-cursor.is-hover {
  scale: calc(56 / 36);
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.08);
}

.moonshot-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: translate, opacity;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.3s ease;
}

@media (hover: none), (pointer: coarse) {
  .moonshot-cursor,
  .moonshot-dot {
    display: none;
  }
}