/*
 * Spectra Blinds Premium Insect Cursor
 * Brand colour: #0B8FC3
 */

@media (pointer: fine) and (hover: hover) {
    html.spectra-cursor-active,
    html.spectra-cursor-active body,
    html.spectra-cursor-active a,
    html.spectra-cursor-active button,
    html.spectra-cursor-active input,
    html.spectra-cursor-active textarea,
    html.spectra-cursor-active select,
    html.spectra-cursor-active [role="button"] {
        cursor: none !important;
    }

    .spectra-cursor {
        position: fixed;
        left: 0;
        top: 0;
        width: 52px;
        height: 52px;
        z-index: 2147483647;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-100px,-100px,0);
        transition: width .18s ease, height .18s ease, opacity .2s ease;
        will-change: transform;
    }

    .spectra-cursor-inner {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 5px 10px rgba(11,143,195,.28));
    }

    .spectra-cursor svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    .spectra-cursor.hover {
        width: 68px;
        height: 68px;
    }

    .spectra-cursor.hover .spectra-wing {
        animation: spectra-wing .32s ease-in-out infinite alternate;
        transform-origin: center;
    }

    .spectra-cursor.clicking {
        width: 44px;
        height: 44px;
    }

    .spectra-click-insect {
        position: fixed;
        width: 25px;
        height: 25px;
        pointer-events: none;
        z-index: 2147483646;
        opacity: 0;
        transform: translate(-50%,-50%) scale(.2);
        will-change: transform, opacity;
        animation: spectra-fly .9s cubic-bezier(.16,.8,.3,1) forwards;
    }

    .spectra-click-insect svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    .spectra-click-ring {
        position: fixed;
        width: 15px;
        height: 15px;
        border: 2px solid #0B8FC3;
        border-radius: 50%;
        pointer-events: none;
        z-index: 2147483645;
        transform: translate(-50%,-50%) scale(.2);
        opacity: .8;
        animation: spectra-ring .6s ease-out forwards;
    }

    .spectra-trail {
        position: fixed;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #0B8FC3;
        pointer-events: none;
        z-index: 2147483644;
        transform: translate(-50%,-50%);
        opacity: .22;
        animation: spectra-trail .45s ease-out forwards;
    }

    @keyframes spectra-wing {
        from { transform: scaleY(1) rotate(0deg); }
        to   { transform: scaleY(.7) rotate(-5deg); }
    }

    @keyframes spectra-fly {
        0% {
            opacity: 0;
            transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.2);
        }
        15% {
            opacity: 1;
            transform: translate(-50%,-50%) translate(var(--x1),var(--y1)) rotate(var(--r1)) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(-50%,-50%) translate(var(--x2),var(--y2)) rotate(var(--r2)) scale(.35);
        }
    }

    @keyframes spectra-ring {
        0% { opacity: .8; transform: translate(-50%,-50%) scale(.2); }
        70% { opacity: .35; transform: translate(-50%,-50%) scale(5); }
        100% { opacity: 0; transform: translate(-50%,-50%) scale(6.5); }
    }

    @keyframes spectra-trail {
        0% { opacity: .28; transform: translate(-50%,-50%) scale(1); }
        100% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .spectra-cursor,
        .spectra-click-insect,
        .spectra-click-ring,
        .spectra-trail {
            animation: none !important;
            transition: none !important;
        }
    }
}