/*==================================================
    HIIRAGI HITSUGI Official Website
    cursor.css / Version 4.10.0
==================================================*/

html.custom-cursor-active,
html.custom-cursor-active body,
html.custom-cursor-active a,
html.custom-cursor-active button,
html.custom-cursor-active input,
html.custom-cursor-active textarea,
html.custom-cursor-active select {
    cursor: none;
}

#cursor-light,
#cursor-ring,
#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#cursor-light {
    --cursor-scale: 1;
    width: 320px;
    height: 320px;
    z-index: 9000;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 207, 255, .22) 0%,
        rgba(0, 207, 255, .12) 20%,
        rgba(0, 207, 255, .065) 39%,
        rgba(0, 207, 255, .025) 56%,
        transparent 74%
    );
    transition: opacity .35s ease;
}

#cursor-ring {
    --cursor-scale: 1;
    width: 34px;
    height: 34px;
    z-index: 9100;
    border: 2px solid rgba(0, 207, 255, .9);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(0, 207, 255, .45);
    mix-blend-mode: screen;
    transition:
        width .25s ease,
        height .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        opacity .25s ease,
        scale .14s ease;
}

#cursor-dot {
    --cursor-scale: 1;
    width: 8px;
    height: 8px;
    z-index: 9200;
    border-radius: 50%;
    background: #66f1ff;
    box-shadow: 0 0 15px rgba(0, 207, 255, .9);
    mix-blend-mode: screen;
    transition: opacity .25s ease, scale .16s ease;
}

.cursor-hover #cursor-ring {
    width: 70px;
    height: 70px;
    border-color: #66f1ff;
    background: rgba(0, 207, 255, .08);
    box-shadow: 0 0 35px rgba(0, 207, 255, .6);
}

.cursor-hover #cursor-dot { --cursor-scale: 1.4; }
.cursor-click #cursor-ring { --cursor-scale: .82; }
.cursor-click #cursor-dot { --cursor-scale: .6; }

.cursor-hidden #cursor-light,
.cursor-hidden #cursor-ring,
.cursor-hidden #cursor-dot {
    opacity: 0;
}

@media (pointer: coarse), (hover: none) {
    html,
    body { cursor: auto; }
    a,
    button { cursor: pointer; }
    #cursor-light,
    #cursor-ring,
    #cursor-dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #cursor-light,
    #cursor-ring,
    #cursor-dot { transition: none; }
}