/* Store Cursor FX — front-end styles */
:root {
    --scf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --scf-accent: #9c5a32;
    --scf-accent-soft: rgba(156, 90, 50, 0.18);
    --scf-accent-glow: rgba(156, 90, 50, 0.12);
}

/* Hide the native cursor only once the JS confirms a fine pointer */
body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor select,
body.has-cursor label {
    cursor: none;
}

.scf-cursor {
    display: none;
}

body.has-cursor .scf-cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10050;
    pointer-events: none;
    opacity: 0;
}

body.has-cursor .scf-cursor.scf-active {
    opacity: 1;
}

.scf-cursor__dot,
.scf-cursor__ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    will-change: transform;
}

.scf-cursor__dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: #fff;
    mix-blend-mode: difference;
}

.scf-cursor__ring {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    mix-blend-mode: difference;
    transition:
        width 0.25s var(--scf-ease),
        height 0.25s var(--scf-ease),
        margin 0.25s var(--scf-ease),
        background-color 0.25s var(--scf-ease);
}

.scf-cursor.is-hover .scf-cursor__ring {
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    background-color: var(--scf-accent-soft);
}

/* Soft glow that follows the pointer */
.scf-spotlight {
    display: none;
}

body.has-cursor .scf-spotlight {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--scf-accent-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}