/* ==========================================================================
   © 2026 Omar Khaled. All rights reserved.

   Built by Omar Khaled — Full-Stack Developer
   Website:   https://omar-khaled.life
   Email:     support@omar-khaled.life
   WhatsApp:  +1 872 321 0134
   Telegram:  @codedbyomar
   LinkedIn:  https://www.linkedin.com/in/omar-khaled-36126b404/
   Instagram: https://www.instagram.com/codedbyomar/
   GitHub:    https://github.com/omar-khaled-dev
   ========================================================================== */

/* ==========================================================================
   SeeBox — Custom cursor
   Desktop only (mouse/trackpad). Disabled entirely on touch devices.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor img,
  body.has-custom-cursor [data-product-card],
  body.has-custom-cursor [data-more-products],
  body.has-custom-cursor .color-swatch {
    cursor: none;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--color-pistachio);
    transition: opacity 200ms ease;
  }

  .cursor-ring {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--color-pistachio);
    opacity: 0.6;
    transition:
      width 250ms var(--ease-lid),
      height 250ms var(--ease-lid),
      opacity 250ms var(--ease-lid),
      border-color 250ms var(--ease-lid),
      background 250ms var(--ease-lid);
  }

  /* Hover state — ring grows and fills slightly when over interactive elements */
  .cursor-ring.is-hovering {
    width: 52px;
    height: 52px;
    opacity: 1;
    background: rgba(168, 184, 150, 0.12);
  }

  /* Pressed state — quick squeeze on click for tactile feedback */
  .cursor-ring.is-pressed {
    width: 26px;
    height: 26px;
  }

  /* Fade out when cursor leaves the window */
  .cursor-dot.is-hidden,
  .cursor-ring.is-hidden {
    opacity: 0;
  }
}

/* Touch devices: never inject the custom cursor elements visibly */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}