/* ProcurInt Custom Precision Cursor */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor .btn,
  body.has-custom-cursor .demo,
  body.has-custom-cursor .res-card,
  body.has-custom-cursor .pill,
  body.has-custom-cursor .filter-pill,
  body.has-custom-cursor summary,
  body.has-custom-cursor .navlinks a,
  body.has-custom-cursor .logo,
  body.has-custom-cursor label[for] {
    cursor: none !important;
  }

  body.has-custom-cursor input:not([type="submit"]):not([type="button"]),
  body.has-custom-cursor textarea,
  body.has-custom-cursor select {
    cursor: auto !important;
  }

  .p-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999999;
    opacity: 0;
    transition: opacity 0.22s ease;
  }

  .p-cursor.is-visible {
    opacity: 1;
  }

  .p-cursor.is-hidden {
    opacity: 0 !important;
  }

  /* Inner precise dot — follows mouse instantly with zero lag */
  .p-cursor__dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8590c;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(22, 25, 29, 0.15),
                0 2px 8px rgba(232, 89, 12, 0.6);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, width, height, background-color, box-shadow;
    transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.2s ease,
                box-shadow 0.2s ease;
  }

  /* Outer follower ring — elastic trailing halo */
  .p-cursor__ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 89, 12, 0.55);
    background: rgba(232, 89, 12, 0.04);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4),
                0 4px 16px rgba(232, 89, 12, 0.12);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, width, height, border-color, background-color, box-shadow;
    transition: width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
                height 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
                border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;
  }

  /* Hover state: over links, buttons, clickables */
  .p-cursor.is-hovering .p-cursor__ring {
    width: 54px;
    height: 54px;
    border-color: #e8590c;
    background: rgba(232, 89, 12, 0.16);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6),
                0 0 24px rgba(232, 89, 12, 0.38);
  }

  .p-cursor.is-hovering .p-cursor__dot {
    width: 10px;
    height: 10px;
    background: #e8590c;
    box-shadow: 0 0 0 1.5px #ffffff,
                0 0 16px rgba(232, 89, 12, 0.9);
  }

  /* Hover state: card / large container */
  .p-cursor.is-card-hover .p-cursor__ring {
    width: 66px;
    height: 66px;
    border-color: rgba(232, 89, 12, 0.8);
    background: rgba(232, 89, 12, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5),
                0 0 28px rgba(232, 89, 12, 0.25);
  }

  /* Click down (active/mousedown) */
  .p-cursor.is-clicking .p-cursor__ring {
    width: 26px;
    height: 26px;
    border-color: #e8590c;
    background: rgba(232, 89, 12, 0.32);
    box-shadow: 0 0 12px rgba(232, 89, 12, 0.5);
    transition: width 0.08s ease, height 0.08s ease, background-color 0.08s ease;
  }

  .p-cursor.is-clicking .p-cursor__dot {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 1px #fff;
  }

  /* Click ripple animation */
  .p-cursor__ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #e8590c;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    animation: pCursorRipple 0.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  }

  @keyframes pCursorRipple {
    0% {
      width: 12px;
      height: 12px;
      opacity: 0.95;
      border-color: #e8590c;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
    }
    100% {
      width: 72px;
      height: 72px;
      opacity: 0;
      border-color: rgba(232, 89, 12, 0.1);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0);
    }
  }
}