/* ============================================================ CUSTOM CURSOR Applied only when cursor.js detects pointer: fine (mouse). html.has-custom-cursor is added to before any paint, so the native cursor disappears without a flash. ============================================================ */ html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; } .cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background: var(--az-orange); border-radius: var(--radius-full); pointer-events: none; z-index: 99999; /* GSAP owns transform (xPercent/yPercent + x/y) — don't set it here */ will-change: transform; /* CSS transitions handle size/colour changes between states */ transition: width 0.15s ease, height 0.15s ease, background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease; } /* Hover state — cursor expands into a ring over interactive elements */ .cursor--hover { width: 36px; height: 36px; background: transparent; border: 1.5px solid var(--az-orange); box-shadow: 0 0 14px rgba(244, 131, 46, 0.2); }