/* ============================================================
   custom-cursor.css

   Lavender circle + arrow cursor shown on hover inside any
   element with the class "custom-cursor-zone".

   Structure:
     #custom-cursor        — outer wrapper, handles translate()
                             (position only, never scaled)
     #custom-cursor-inner  — inner circle, handles scale/opacity
                             and colour changes on press

   Keeping translate and scale on separate elements prevents
   the press feedback from shifting the cursor position.

   Accessibility notes (WCAG 2.1 / EAA):
     - cursor: none only applies inside .custom-cursor-zone.
       Outside the zone the default cursor is always restored.
     - prefers-reduced-motion: scale animation is disabled,
       cursor still appears without motion (SC 2.3.3 AAA).
     - Purely decorative — aria-hidden="true" on the element
       keeps it invisible to screen readers.
     - No functionality is gated behind hover (SC 2.1.1).
============================================================ */

/* ----------------------------------------------------------
   CSS custom properties — override to re-theme.
---------------------------------------------------------- */
:root {
  --cc-size:     80px;     /* diameter of the circle        */
  --cc-bg:       #c4b5fd; /* lavender fill                  */
  --cc-bg-press: #a78bfa; /* slightly richer on mousedown   */
  --cc-arrow:    #fff;    /* arrow colour                   */
  --cc-duration: 0.12s;   /* smoothing/lag transition speed */
}

/* ----------------------------------------------------------
   #custom-cursor — outer wrapper
   Only responsible for position via translate().
   Never scaled — so press feedback never shifts the position.
---------------------------------------------------------- */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width:  var(--cc-size);
  height: var(--cc-size);

  /* Centre the circle on the pointer tip */
  transform: translate(
    calc(var(--x, -200px) - var(--cc-size) / 2),
    calc(var(--y, -200px) - var(--cc-size) / 2)
  );
  transition: transform var(--cc-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);

  z-index: 9999;
  pointer-events: none; /* never blocks clicks */
}

/* ----------------------------------------------------------
   #custom-cursor-inner — inner circle
   Handles all visual states: visibility, scale, colour.
   Isolated from translate so scale never moves the cursor.
---------------------------------------------------------- */
#custom-cursor-inner {
  width:  100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cc-bg);

  display: flex;
  align-items: center;
  justify-content: center;

  /* Animate only visual properties, not position */
  transition:
    opacity    0.15s ease,
    scale      0.15s ease,
    background 0.1s  ease;

  opacity: 0;
  scale: 0.6;
}

#custom-cursor-inner svg {
  width:  calc(var(--cc-size) * 0.38);
  height: calc(var(--cc-size) * 0.38);
  color: var(--cc-arrow);
  flex-shrink: 0;
}

/* Shown when pointer is inside a .custom-cursor-zone */
#custom-cursor.is-visible #custom-cursor-inner {
  opacity: 1;
  scale: 1;
}

/* Pressed / mousedown feedback — scale down from centre,
   position stays locked on the outer wrapper */
#custom-cursor.is-pressed #custom-cursor-inner {
  background: var(--cc-bg-press);
  scale: 0.82;
}

/* ----------------------------------------------------------
   Zone — hides the native cursor inside the element.
   !important overrides Elementor and other builder styles.
---------------------------------------------------------- */
.custom-cursor-zone,
.custom-cursor-zone *,
.custom-cursor-zone a,
.custom-cursor-zone button,
.custom-cursor-zone [role="button"] {
  cursor: none !important;
}

/* ----------------------------------------------------------
   Reduced-motion override (WCAG SC 2.3.3 / EAA)
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #custom-cursor {
    transition: transform 0s;
  }

  #custom-cursor-inner {
    transition:
      opacity    0.1s ease,
      background 0.1s ease;
    scale: 1 !important;
  }
}