/* Hide the native cursor everywhere. pointer-events is still active on the
   page — we just visually suppress the OS cursor. */
*, *::before, *::after {
  cursor: none !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 0;
  z-index: 99999;
  /* Critical: lets all clicks/hovers pass through to the real page elements */
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Small filled hexagon dot — clips a square div into a hex shape */
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #ffffff60;
  margin-left: -3px;
  margin-top: -3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/*
  Hexagon ring — drawn as an SVG outline via background-image data URI.
  Using SVG instead of CSS border so the outline follows the hex shape.
  The viewBox uses a 100×100 coordinate space; background-size:contain
  scales it to whatever width/height the element has.
*/
.cursor-ring {
  width: 36px;
  height: 36px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 92,26 92,74 50,98 8,74 8,26' fill='none' stroke='%23ffffff60' stroke-width='6'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-left: -18px;
  margin-top: -18px;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    margin 0.2s ease,
    opacity 0.3s ease;
}

/* Hover state: ring grows and gains a subtle hex fill */
.cursor-ring.is-hovering {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  /* Same stroke, adds a light fill inside the hex */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 92,26 92,74 50,98 8,74 8,26' fill='%23ffffff14' stroke='%23ffffff60' stroke-width='6'/%3E%3C/svg%3E");
}