<style>
  *, *::before, *::after { cursor: none !important; }

  #ayce-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999999;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    will-change: left, top;
    transition: opacity .2s;
  }

  .ayce-scatter {
    position: relative;
    width: 54px;
    height: 54px;
  }

  .ayce-s {
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    clip-path: ellipse(50% 50% at 50% 44%);
  }

  .ayce-s::after {
    content: '';
    position: absolute;
    top: 14%; left: 18%;
    width: 28%; height: 22%;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
    transform: rotate(-20deg);
  }

  .ayce-s::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px),
      radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 8px 8px, 5px 5px;
    background-position: 0 0, 4px 4px;
    opacity: .6;
  }

  .ayce-yellow {
    background: #fff8d6;
    box-shadow: inset 0 -3px 6px rgba(220,170,0,.18), inset 2px 3px 6px rgba(255,255,255,.7);
    border-bottom: 2px solid rgba(220,170,0,.2);
    top: 0; left: 14px;
    animation: driftY 4s ease-in-out infinite;
  }

  .ayce-green {
    background: #d8f5d4;
    box-shadow: inset 0 -3px 6px rgba(60,160,50,.15), inset 2px 3px 6px rgba(255,255,255,.7);
    border-bottom: 2px solid rgba(60,160,50,.18);
    top: 28px; left: 0;
    animation: driftG 3.5s ease-in-out infinite .5s;
  }

  .ayce-pink {
    background: #ffe0ea;
    box-shadow: inset 0 -3px 6px rgba(220,80,110,.15), inset 2px 3px 6px rgba(255,255,255,.7);
    border-bottom: 2px solid rgba(220,80,110,.18);
    top: 20px; left: 30px;
    animation: driftP 4.2s ease-in-out infinite 1s;
  }

  @keyframes driftY {
    0%,100% { transform: translate(0, 0) scale(1) rotate(-2deg); }
    33%      { transform: translate(5px, -7px) scale(1.06) rotate(2deg); }
    66%      { transform: translate(-3px, -3px) scale(.97) rotate(-1deg); }
  }

  @keyframes driftG {
    0%,100% { transform: translate(0, 0) scale(1) rotate(2deg); }
    33%      { transform: translate(-5px, -5px) scale(.95) rotate(-2deg); }
    66%      { transform: translate(4px, -7px) scale(1.04) rotate(1deg); }
  }

  @keyframes driftP {
    0%,100% { transform: translate(0, 0) scale(1) rotate(1deg); }
    33%      { transform: translate(3px, -6px) scale(1.03) rotate(-2deg); }
    66%      { transform: translate(-5px, 3px) scale(.96) rotate(2deg); }
  }

  #ayce-cursor.hov .ayce-yellow {
    animation: none;
    transform: translate(-4px, -9px) scale(1.1) rotate(3deg);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  #ayce-cursor.hov .ayce-green {
    animation: none;
    transform: translate(-8px, 5px) scale(1.07) rotate(-3deg);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  #ayce-cursor.hov .ayce-pink {
    animation: none;
    transform: translate(7px, 4px) scale(1.07) rotate(2deg);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }

  #ayce-cursor.click .ayce-yellow {
    animation: none;
    transform: translate(0, 3px) scaleY(.82) rotate(-1deg);
    transition: transform .1s ease;
  }
  #ayce-cursor.click .ayce-green {
    animation: none;
    transform: translate(2px, 2px) scaleY(.85) rotate(1deg);
    transition: transform .1s ease;
  }
  #ayce-cursor.click .ayce-pink {
    animation: none;
    transform: translate(-2px, 2px) scaleY(.85) rotate(-1deg);
    transition: transform .1s ease;
  }

  @media (pointer: coarse) {
    * { cursor: auto !important; }
    #ayce-cursor { display: none !important; }
  }
</style>

<div id="ayce-cursor" aria-hidden="true">
  <div class="ayce-scatter">
    <div class="ayce-s ayce-yellow"></div>
    <div class="ayce-s ayce-green"></div>
    <div class="ayce-s ayce-pink"></div>
  </div>
</div>

<script>
(function () {
  var cur = document.getElementById('ayce-cursor');

  document.addEventListener('mousemove', function (e) {
    cur.style.left = e.clientX + 'px';
    cur.style.top  = e.clientY + 'px';
  });

  document.addEventListener('mousedown', function () { cur.classList.add('click'); });
  document.addEventListener('mouseup',   function () { cur.classList.remove('click'); });

  var sel = 'a, button, [role="button"], input, textarea, select, label';
  document.addEventListener('mouseover', function (e) {
    if (e.target.closest(sel)) cur.classList.add('hov');
  });
  document.addEventListener('mouseout', function (e) {
    if (e.target.closest(sel)) cur.classList.remove('hov');
  });

  document.addEventListener('mouseleave', function () { cur.style.opacity = '0'; });
  document.addEventListener('mouseenter', function () { cur.style.opacity = '1'; });
})();
</script>