/* ── e3-cursor.css ── Vybly Custom Cursor System ── */

/* Touch / no-hover: bail out completely */
@media (hover: none) {
  #cursor-dot,
  #cursor-ring { display: none; }
  body { cursor: auto; }
}

@media (hover: hover) {

  body { cursor: none; }

  /* ── Layer 1: Dot ── */
  #cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D4FF3C;
    pointer-events: none;
    /* No transition — follows instantly via JS transform */
    will-change: transform;
  }

  #cursor-dot.pressing {
    transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* ── Layer 2: Ring ── */
  #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid oklch(93% 0.27 122 / 0.4);
    pointer-events: none;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      width      220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      height     220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      border-radius 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      border-color  180ms cubic-bezier(0.23, 1, 0.32, 1),
      background    180ms cubic-bezier(0.23, 1, 0.32, 1),
      opacity       180ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Ring label — "VIEW" text, hidden by default */
  #cursor-ring-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #D4FF3C;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
    user-select: none;
    white-space: nowrap;
  }

  /* ── Ring states ── */

  /* Card hover: expand + brighter stroke + VIEW label */
  #cursor-ring.state-card {
    width: 64px;
    height: 64px;
    border-color: oklch(93% 0.27 122 / 0.8);
    background: transparent;
    border-radius: 50%;
  }

  #cursor-ring.state-card #cursor-ring-label {
    opacity: 1;
  }

  /* Button hover: pill morphs to match button width with lime fill tint */
  #cursor-ring.state-button {
    width: 140px;
    height: 48px;
    border-radius: 100px;
    border-color: oklch(93% 0.27 122 / 0.5);
    background: oklch(93% 0.27 122 / 0.1);
  }

  /* Nav link hover: shrink to solid lime dot */
  #cursor-ring.state-nav {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border-color: #D4FF3C;
    background: #D4FF3C;
  }

  /* ── Layer 3: Location pin morph ── */
  /* When over .hero, the ring transitions to invisible
     and a pin SVG element takes over */
  #cursor-pin {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1);
    /* Anchor: tip of pin is at bottom-center, so offset by half-width left and full height up */
    /* Offset correction handled in JS */
  }

  #cursor-pin.visible {
    opacity: 1;
  }

  /* Hide dot and ring when pin is active */
  #cursor-dot.pin-active {
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #cursor-ring.pin-active {
    opacity: 0;
    transition:
      opacity     200ms cubic-bezier(0.23, 1, 0.32, 1),
      width       220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      height      220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      border-radius 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
      border-color  180ms cubic-bezier(0.23, 1, 0.32, 1),
      background    180ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* ── Reduced motion: kill transitions, keep cursor functional ── */
  @media (prefers-reduced-motion: reduce) {
    #cursor-ring,
    #cursor-ring-label,
    #cursor-pin,
    #cursor-dot {
      transition: none !important;
    }
  }

}