/* ============================================================
   cursor.css — Glass Marble Cursor
   ============================================================ */

#marble {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 34% 28%,
    rgba(255, 255, 255, 0.96)  0%,
    rgba(255, 255, 255, 0.60) 28%,
    rgba(210, 220, 235, 0.32) 58%,
    rgba(190, 200, 220, 0.12) 100%
  );
  box-shadow:
    inset -2px -2px 4px rgba(255, 255, 255, 0.92),
    inset  1px  1px 2px rgba(0, 0, 0, 0.07),
    0 5px 18px rgba(0, 0, 0, 0.20),
    0 1px  4px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(2px);
  transition:
    width  0.22s var(--ease-out),
    height 0.22s var(--ease-out);
}

#marble::after {
  content: '';
  position: absolute;
  top: 16%;
  left: 20%;
  width: 28%;
  height: 16%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transform: rotate(-35deg);
}

#marble-ring {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(15, 15, 14, 0.10);
  transform: translate(-50%, -50%);
  transition:
    width        0.50s var(--ease-out),
    height       0.50s var(--ease-out),
    border-color 0.30s;
}

/* Hover state */
body.hov #marble {
  width: 32px;
  height: 32px;
}

body.hov #marble-ring {
  width: 62px;
  height: 62px;
  border-color: rgba(15, 15, 14, 0.18);
}

/* Bento ink hover state */
body.bento-hover #marble-ring {
  width: 72px;
  height: 72px;
  border-color: rgba(184, 255, 57, 0.55);
  box-shadow: 0 0 18px rgba(184, 255, 57, 0.22), 0 0 36px rgba(184, 255, 57, 0.10);
}

/* Press state */
body.press #marble {
  width: 20px;
  height: 20px;
  box-shadow:
    inset -1px -1px 3px rgba(255, 255, 255, 0.90),
    inset  2px  2px 5px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.15);
}