/* =============================================================================
   ZYCONIX BIOLOGICS — CUSTOM CURSOR STYLING (cursor.css)
   Aesthetic Style: Clean Minimalism + High-End Agency Feel
   Inspiration: lusion.co (magnetic trail cursor)
   ============================================================================= */

@media (pointer: fine) {
  /* Replace default cursor for links, buttons, and elements */
  html, 
  body, 
  a, 
  button, 
  select, 
  .btn, 
  .trust-card, 
  .editorial-card, 
  [role="button"] {
    cursor: none !important;
  }

  /* Retain default pointer for normal inputs/textareas to maintain selection/editing usability */
  input, 
  textarea {
    cursor: text !important;
  }

  /* Custom inner dot */
  .custom-cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--cursor-size, 8px);
    height: var(--cursor-size, 8px);
    border-radius: 50%;
    background-color: var(--color-brand-terracotta);
    z-index: 10000;
    pointer-events: none; /* Crucial: lets clicks pass through */
    transform: translate3d(-50%, -50%, 0);
    transition: 
      width 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
      height 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
      background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Custom trailing ring */
  .custom-cursor-ring {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ring-size, 34px);
    height: var(--ring-size, 34px);
    border-radius: 50%;
    border: 1.5px solid var(--color-brand-teal);
    background-color: rgba(23, 63, 58, 0.03);
    z-index: 9999;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition: 
      width 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
      height 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
      background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
      border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Hover interactive state changes */
  .custom-cursor--hover {
    --cursor-size: 6px;
    background-color: var(--color-brand-terracotta);
  }

  .custom-cursor-ring--hover {
    --ring-size: 58px;
    border-color: var(--color-brand-terracotta);
    background-color: rgba(212, 107, 71, 0.06);
  }
}

/* Touch screens / mobile - hide custom cursor and use default system cursor */
@media (pointer: coarse) {
  .custom-cursor,
  .custom-cursor-ring {
    display: none !important;
  }
}