/* ============================================================
   CUSTOM CURSOR
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], summary, input, textarea, select { cursor: none; }

  .cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    mix-blend-mode: difference;
  }
  .cursor-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  }
  .cursor-blob {
    position: fixed;
    top: 0; left: 0;
    width: 38px; height: 38px;
    border: 1px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate3d(-50%, -50%, 0);
    transition: width .35s var(--ease), height .35s var(--ease), border-radius .35s var(--ease), background .35s var(--ease);
    mix-blend-mode: difference;
  }
  .cursor-label {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%, calc(-50% + 32px), 0);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    padding: .35rem .55rem;
    opacity: 0;
    transition: opacity .25s var(--ease);
    white-space: nowrap;
  }
  .cursor.is-hover .cursor-dot { width: 0; height: 0; }
  .cursor-blob.is-hover { width: 70px; height: 70px; background: rgba(255,255,255,.06); }
  .cursor-label.is-hover { opacity: 1; }

  .cursor-blob.is-press { width: 28px; height: 28px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-blob, .cursor-label { display: none !important; }
}