#cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bg-50);
    border: 1px solid var(--border);
    scale: 1;
    pointer-events: none; /* don’t block clicks */
    transform: translate(-50%, -50%);
    transition:
        background-color 250ms ease-in 120ms,
        padding 250ms ease-in 120ms,
        scale 250ms ease-in 120ms;
    z-index: 9999;
    overflow: hidden;
    animation: flying-around 10s infinite;
}

#cursor.on_slider, 
#cursor.points, #cursor.video_active, #cursor.cases_active, #cursor.on_gallery, #cursor.xclose_active {
    animation-play-state: paused;
    backdrop-filter: blur(1rem);
}

#cursor.points {
    scale: 0;
}

#cursor.video_active {
    padding: 2rem;
    cursor: none;
}

#cursor.cases_active, #cursor.on_slider,
#cursor.on_gallery  {
    padding: 2rem;
    cursor: none;
}

.backdrop,
.alert-modal {
    cursor: none;
}

#cursor.xclose_active {
    
    padding: 1.75rem;
    cursor: none;
}

picture.ongallery, .ongallery, .cursor-drag, .card a::after, .card a:not(.btn-plain) {
    cursor: none;
}

#cursor.video_active .play,
#cursor.video_active.playing .pause {
    opacity: 1;
    color: var(--text);
}

#cursor.cases_active .go_to,
#cursor.xclose_active .xclose, 
#cursor.on_slider .drag,
#cursor.on_gallery .open-gallery {
    opacity: 1;
    color: var(--text);
}

#cursor .go_to,
#cursor .play,
#cursor .pause,
#cursor .xclose,
#cursor .drag,
#cursor .open-gallery {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 40%;
    cursor: none;
}

#cursor .drag {
    align-items: center;
    font-weight: bold;
}

#cursor .play {
    transform: translate(-40%, -50%);
}

#go_to {
    width: 4.25rem;
    height: 4.25rem;
    aspect-ratio: 1/1;
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    opacity: 0;
    z-index: 9999;
    background-color: var(--bg-50);
}

#go_to.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.video-block {
    cursor: none;
}

#cursor .pause {
    visibility: hidden;
}

#cursor.playing .play {
    visibility: hidden;
}

#cursor.playing .pause {
    visibility: visible;
}

@media screen and (max-width: 1024px) {
    .use_case figure,
    .use_case picture,
    .video-block,
    .backdrop,
    picture.ongallery, .ongallery, .cursor-drag, .card a::after, .card a:not(.btn-plain)
     {
        cursor: pointer;
    }
}

@media screen and (max-width: 768px) {
    #cursor {
        display: none;
    }
}


@keyframes flying-around {
    0%   { transform: translate(calc(-50% + 0px),  calc(-50% + 0px)); }
    20%  { transform: translate(calc(-50% + 3px),  calc(-50% - 4px)); }
    35%  { transform: translate(calc(-50% - 3px),  calc(-50% + 2px)); }
    50%  { transform: translate(calc(-50% + 4px),  calc(-50% + 3px)); }
    65%  { transform: translate(calc(-50% - 2px),  calc(-50% - 5px)); }
    80%  { transform: translate(calc(-50% + 2px),  calc(-50% + 4px)); }
    100% { transform: translate(calc(-50% + 0px),  calc(-50% + 0px)); }
}