/*
 * JAPI Custom Cursor engine
 * Runtime styles only. Dynamic values are applied by JavaScript as CSS properties.
 */
.jc-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    pointer-events: none !important;
    contain: layout style paint;
}

.jc-root.jc-mode-contained {
    position: absolute;
}

.jc-root,
.jc-root * {
    pointer-events: none !important;
    user-select: none !important;
}

.jc-main,
.jc-follower,
.jc-trail-node,
.jc-orbit-node,
.jc-ripple,
.jc-burst {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: center center;
    will-change: transform, opacity;
}

.jc-main,
.jc-follower {
    display: block;
    overflow: visible;
    backface-visibility: hidden;
}

.jc-main.is-hidden,
.jc-follower.is-hidden {
    opacity: 0 !important;
}

.jc-shape-dot,
.jc-shape-ring {
    border-radius: 999px;
}

.jc-shape-square {
    border-radius: 16%;
}

.jc-shape-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.jc-shape-crosshair {
    background: transparent !important;
    border: 0 !important;
}

.jc-shape-crosshair::before,
.jc-shape-crosshair::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    border-radius: 99px;
}

.jc-shape-crosshair::before {
    width: 100%;
    height: max(1px, 5%);
}

.jc-shape-crosshair::after {
    width: max(1px, 5%);
    height: 100%;
}

.jc-shape-arrow {
    background: transparent !important;
    border: 0 !important;
}

.jc-shape-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jc-shape-image {
    background: transparent !important;
}

.jc-shape-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.jc-label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    background: rgba(14, 17, 24, .88);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
    font: 800 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.jc-follower.has-label .jc-label {
    display: inline-flex;
}

.jc-trail-node,
.jc-orbit-node {
    border-radius: 999px;
}

.jc-ripple {
    border: 2px solid currentColor;
    border-radius: 999px;
    opacity: .85;
    animation: jc-ripple var(--jc-duration, 520ms) cubic-bezier(.12, .78, .22, 1) forwards;
}

@keyframes jc-ripple {
    0% {
        opacity: .85;
        transform: translate(-50%, -50%) scale(.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.jc-burst {
    width: var(--jc-burst-size, 5px);
    height: var(--jc-burst-size, 5px);
    border-radius: 999px;
    opacity: .95;
    animation: jc-burst var(--jc-duration, 520ms) cubic-bezier(.12, .72, .25, 1) forwards;
}

@keyframes jc-burst {
    0% {
        opacity: .95;
        transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate3d(var(--jc-dx), var(--jc-dy), 0) scale(.25);
    }
}

html.jc-hide-native,
html.jc-hide-native * {
    cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .jc-ripple,
    .jc-burst {
        animation-duration: 220ms !important;
    }
}

/* v1.0.5: additional geometric and decorative cursor shapes */
.jc-shape-triangle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.jc-shape-pentagon {
    clip-path: polygon(50% 0%, 97% 35%, 79% 100%, 21% 100%, 3% 35%);
}

.jc-shape-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.jc-shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.jc-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
}

.jc-shape-heart {
    clip-path: polygon(50% 96%, 8% 56%, 4% 35%, 12% 17%, 28% 8%, 42% 14%, 50% 28%, 58% 14%, 72% 8%, 88% 17%, 96% 35%, 92% 56%);
}

.jc-shape-spark {
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.jc-shape-bolt {
    clip-path: polygon(56% 0%, 18% 54%, 43% 54%, 34% 100%, 84% 39%, 58% 39%);
}

.jc-shape-shield {
    clip-path: polygon(50% 0%, 92% 14%, 88% 58%, 72% 82%, 50% 100%, 28% 82%, 12% 58%, 8% 14%);
}

.jc-shape-chevron {
    clip-path: polygon(0% 0%, 42% 0%, 100% 50%, 42% 100%, 0% 100%, 58% 50%);
}

.jc-shape-flower {
    clip-path: polygon(50% 0%, 62% 26%, 85% 15%, 74% 38%, 100% 50%, 74% 62%, 85% 85%, 62% 74%, 50% 100%, 38% 74%, 15% 85%, 26% 62%, 0% 50%, 26% 38%, 15% 15%, 38% 26%);
}

/* v1.0.10: curated SVG library rendered as a recolorable CSS mask. */
.jc-shape-library {
    border: 0 !important;
    border-radius: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}