/* ============================================================
   PHASE 5: THE REAL-TIME ENGINE — CSS
   Append this to the bottom of your existing style.css
   ============================================================ */

/* --- Ghost Cursor Layer --- */
#cursor-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; /* Above content, below scanlines */
    overflow: hidden;
}

.ghost-cursor {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: transform 0.08s linear; /* Smooth interpolation between position updates */
    opacity: 1;
    will-change: transform;
    z-index: 9999;
}

.ghost-cursor svg {
    display: block;
}

/* --- Online Pulse Indicator --- */
.online-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 4px;
    vertical-align: middle;
    animation: online-breathe 2s ease-in-out infinite;
    box-shadow: 0 0 4px var(--green), 0 0 8px var(--green);
}

@keyframes online-breathe {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 4px var(--green); }
    50% { opacity: 1; box-shadow: 0 0 6px var(--green), 0 0 12px var(--green); }
}