body {
    cursor: none;
}

*,
*::before,
*::after {
    cursor: none;
}

.liquid-cursor-canvas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0.72;
}

a,
button {
    cursor: none;
}

body.cursor-link-hover .liquid-cursor-canvas {
    display: none;
}

.cursor-arrow {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 30px;
    pointer-events: none;
    z-index: 10000;
    display: none;
    background: rgba(186, 191, 148, 0.86);
    clip-path: polygon(0 0, 0 88%, 27% 66%, 45% 100%, 61% 91%, 43% 58%, 78% 58%);
    filter: drop-shadow(1px 2px 1px rgba(62, 52, 45, 0.2));
    transform: translate3d(-100px, -100px, 0);
}

body.cursor-link-hover .cursor-arrow {
    display: block;
}

.liquid-cursor,
.liquid-cursor-glow {
    top: 0;
    left: 0;
    transform: var(--cursor-position, translate3d(-100px, -100px, 0));
}

.liquid-cursor {
    width: 28px;
    height: 36px;
    margin: -28px 0 0 -8px;
    transform-origin: 8px 28px;
    transition: transform 110ms ease-out;
    filter: drop-shadow(2px 4px 2px rgba(62, 52, 45, 0.18));
}

.liquid-cursor::before {
    content: "";
    position: absolute;
    inset: 6px 0 0;
    background: rgba(186, 191, 148, 0.78);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: inset -3px -4px 5px rgba(62, 52, 45, 0.14),
        inset 3px 3px 4px rgba(243, 228, 201, 0.3);
}

.liquid-cursor-highlight {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 9px;
    width: 6px;
    height: 11px;
    border-radius: 50%;
    background: rgba(243, 228, 201, 0.45);
    transform: rotate(-38deg);
    filter: blur(0.4px);
    transition: opacity 180ms ease;
}

.liquid-cursor-glow {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    opacity: 0.5;
    filter: blur(8px);
    background: rgba(186, 191, 148, 0.42);
    border-radius: 50% 50% 50% 0;
    transform-origin: 17px 17px;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-cursor-ripple {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(186, 191, 148, 0.7);
    border-radius: 50%;
    opacity: 0;
}

.liquid-cursor.is-hovering {
    top: 0;
    left: 0;
    width: 28px;
    height: 36px;
    transform: var(--cursor-position) rotate(-10deg) scale(1.25);
}

.liquid-cursor.is-hovering .liquid-cursor-highlight {
    opacity: 0.45;
}

.liquid-cursor.is-pressed {
    top: 0;
    left: 0;
    width: 28px;
    height: 36px;
    transform: var(--cursor-position) rotate(-45deg) scale(0.78, 1.18);
}

.liquid-cursor.is-pressed .liquid-cursor-highlight {
    opacity: 0;
}

.liquid-cursor-glow.is-pressed .liquid-cursor-ripple {
    animation: cursor-ripple 500ms ease-out;
}

@keyframes cursor-ripple {
    from {
        opacity: 0.8;
        transform: scale(0.5);
    }
    to {
        opacity: 0;
        transform: scale(1.8);
    }
}

@media (pointer: coarse) {
    *,
    *::before,
    *::after {
        cursor: auto;
    }

    body,
    a,
    button {
        cursor: auto;
    }

    .liquid-cursor,
    .liquid-cursor-glow,
    .liquid-cursor-canvas,
    .cursor-arrow {
        display: none;
    }
}
