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

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: normal;
}

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor__dot {
  width: var(--cursor-dot-size);
  height: var(--cursor-dot-size);
  border-radius: var(--radius-full);
  background: var(--cursor-color);
  z-index: 2;
}

.cursor__ring {
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border-radius: var(--radius-full);
  border: 1px solid var(--cursor-color);
  z-index: 1;
  transition:
    width var(--duration-base) var(--ease-premium),
    height var(--duration-base) var(--ease-premium),
    background-color var(--duration-base) var(--ease-premium),
    border-radius var(--duration-base) var(--ease-premium),
    opacity var(--duration-base) var(--ease-premium);
}

.cursor--interactive .cursor__ring {
  width: var(--cursor-ring-size-hover);
  height: var(--cursor-ring-size-hover);
  opacity: 0.85;
}

.cursor--interactive .cursor__dot {
  width: calc(var(--cursor-dot-size) * 0.6);
  height: calc(var(--cursor-dot-size) * 0.6);
}

.cursor--image .cursor__ring {
  width: var(--cursor-ring-size-image);
  height: var(--cursor-ring-size-image);
  mix-blend-mode: difference;
  opacity: 0.7;
}

.cursor--button .cursor__ring {
  width: var(--cursor-ring-size-button);
  height: var(--cursor-ring-size-button);
  background: rgba(216, 155, 60, 0.12);
  border-color: var(--c-accent);
}

.cursor--landscape .cursor__ring {
  width: 3.5rem;
  height: 2rem;
  border-radius: var(--radius-full);
}

@media (pointer: coarse), (max-width: 768px) {
  .cursor {
    display: none !important;
  }

  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor__ring {
    transition: none;
  }
}