/* =====================
   Option 4: Ambient Glow Cursor
   ===================== */

/* Hide native cursor across the entire site */
*, *::before, *::after {
    cursor: none !important;
}

/* The Core Dot */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    will-change: transform;
}

/* The Glow Element */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--accent-gold-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    filter: blur(25px);
    transition: width 0.4s var(--ease-silk),
                height 0.4s var(--ease-silk),
                background 0.4s ease,
                opacity 0.3s ease;
    will-change: transform;
    opacity: 0.8;
}

/* Hover state — expand and brighten */
.cursor-glow.hovered {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(196, 164, 108, 0.25) 0%, transparent 75%);
    opacity: 1;
}

.cursor-dot.hovered {
    width: 14px;
    height: 14px;
    background-color: #fff;
    mix-blend-mode: difference;
}

/* Click state — slight pulse */
.cursor-glow.clicked {
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.1s ease;
}

.cursor-dot.clicked {
    transform: translate(-50%, -50%) scale(0.7);
}

/* Dark mode adjustment — slightly more intense glow */
[data-theme="dark"] .cursor-glow {
    background: radial-gradient(circle, rgba(212, 182, 134, 0.2) 0%, transparent 70%);
}

[data-theme="dark"] .cursor-glow.hovered {
    background: radial-gradient(circle, rgba(212, 182, 134, 0.35) 0%, transparent 75%);
}

/* Hide on mobile (touch) */
@media (hover: none) and (pointer: coarse) {
    .cursor-glow, .cursor-dot { display: none; }
    *, *::before, *::after { cursor: auto !important; }
}