#cursor-lens {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-cursor);
    background: radial-gradient(circle,
        rgba(245, 165, 0, 0.6) 0%,
        rgba(245, 165, 0, 0.3) 3%,
        rgba(245, 165, 0, 0.15) 10%,
        rgba(245, 165, 0, 0.08) 25%,
        rgba(245, 165, 0, 0.03) 45%,
        transparent 65%
    );
    border: none;
    box-shadow: 0 0 60px rgba(245, 165, 0, 0.1);
    backdrop-filter: url(#distort-filter) blur(2px);
    -webkit-backdrop-filter: url(#distort-filter) blur(2px);
    -webkit-mask-image: radial-gradient(circle,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 25%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.05) 70%,
        transparent 85%
    );
    mask-image: radial-gradient(circle,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 25%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.05) 70%,
        transparent 85%
    );
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    will-change: left, top;
}

#cursor-lens::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow:
        0 0 8px 2px rgba(245, 165, 0, 0.8),
        0 0 20px 4px rgba(245, 165, 0, 0.3);
    transform: translate(-50%, -50%);
}

/* ── Ambient light (follows cursor) ── */
#ambient-light {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(
        600px circle at var(--light-x) var(--light-y),
        rgba(245, 165, 0, 0.04) 0%,
        rgba(220, 255, 249, 0.015) 30%,
        transparent 70%
    );
    mix-blend-mode: screen;
    transition: none;
}