/* Custom cursor */
html.custom-cursor,
html.custom-cursor * {
    cursor: none !important;
}

html.custom-cursor input,
html.custom-cursor textarea {
    cursor: text !important;
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    will-change: transform;
}

/* Size, radius and position of the dot are animated on springs in cursor.js */
.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    transition: opacity .25s ease, background-color .2s ease;
}

.cursor-ring {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 1.5px solid transparent;
    transition: opacity .25s ease, width .3s cubic-bezier(.34, 1.56, .64, 1), height .3s cubic-bezier(.34, 1.56, .64, 1), margin .3s cubic-bezier(.34, 1.56, .64, 1), border-color .25s ease, background-color .25s ease;
}

/* Elastic outline in the default state; stretches toward the dot */
.cursor-blob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    overflow: visible;
    transition: opacity .25s ease;
}

.cursor-blob path {
    fill: none;
    stroke: var(--text);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.cursor-hover .cursor-blob,
.cursor-text .cursor-blob,
.cursor-scroll .cursor-blob,
.cursor-autoscroll .cursor-blob {
    opacity: 0;
}

.custom-cursor.cursor-visible .cursor-dot,
.custom-cursor.cursor-visible .cursor-ring {
    opacity: 1;
}

.cursor-hover .cursor-ring {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}


/* Over the logo the cursor steps back instead of turning into a caret */
.custom-cursor.cursor-visible.cursor-faded .cursor-dot,
.custom-cursor.cursor-visible.cursor-faded .cursor-ring {
    opacity: .25;
}

.cursor-down .cursor-ring {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
}

/* Selecting text: keep the caret, thin and see-through so the selection stays visible */
/* Scroll arrow: head grows out of the shaft tip */
.cursor-arrow {
    position: fixed;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform-origin: 10px 1.5px;
    transition: opacity .25s ease;
    will-change: transform;
}

.cursor-arrow path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: 50% 0;
    transform: scale(.2);
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}

.custom-cursor.cursor-visible.cursor-scroll .cursor-arrow {
    opacity: 1;
}

.cursor-scroll .cursor-arrow path {
    transform: scale(1);
}

.cursor-text.cursor-down .cursor-dot {
    background: color-mix(in srgb, var(--accent) 45%, transparent);
}