/* === DESIGN SYSTEM — CUSTOM CURSOR === */
/* Add `data-scheme="dark"` on any section with a dark background to flip the cursor color. */
/* Add `data-cursor="hide"` on a section to hide the custom cursor entirely (e.g. mobile menus). */

html, body { cursor: none; }
a, button, [role="button"], input, textarea, select, label[for] { cursor: none; }

.cursor-dot,
.cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cursor-dot-color, #E88B7A); /* coral default on light surfaces */
  transition: width 200ms ease, height 200ms ease, background 220ms ease;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--cursor-ring-color, rgba(14, 22, 18, 0.30));
  background: transparent;
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              height 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 320ms ease,
              border-color 320ms ease;
}

/* Hover: ring grows + tints, dot shrinks */
body.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  background: rgba(46, 230, 168, 0.10);
  border-color: var(--frog-vif, #2EE6A8);
}
body.cursor-hover .cursor-dot {
  width: 0; height: 0;
}

/* Dark surface: switch to mint dot + light ring */
body.cursor-dark .cursor-dot { background: var(--frog-vif, #2EE6A8); }
body.cursor-dark .cursor-ring { border-color: rgba(250, 250, 247, 0.30); }

/* Hide on touch / small screens */
@media (max-width: 900px), (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
  html, body, a, button, [role="button"], input, textarea, select, label[for] { cursor: auto; }
}