/* Custom Cursor Styles */
* {
    cursor: none !important; /* Force hide system cursor everywhere */
}

/* The inner dot */
/* The outer outline */
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px; 
    height: 24px;
    border: 1.5px solid #FF7A00; 
    border-radius: 50%;
    /* Initial transform is handled by JS, but set base here to verify */
    pointer-events: none;
    z-index: 20000; 
    /* Fast transitions for hover size only - NO position transition */
    transition: width 0.1s, height 0.1s, background-color 0.1s;
}

/* Central Dot (Integrated) */
.cursor-outline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: #FF7A00;
    border-radius: 50%;
}

/* Hover State */
body.hovering .cursor-outline {
    width: 40px; /* Slight expansion, not massive */
    height: 40px;
    background-color: rgba(255, 122, 0, 0.05); /* Very subtle fill */
    border-color: #FF7A00;
}