/**
 * Custom fluid cursor
 * Effetto a scia con cerchi deformabili.
 */

:root {
    --mscursor-color: #e52823;
    --mscursor-size: 26px;
}


/**
 * Il cursore viene utilizzato soltanto
 * sui dispositivi dotati di mouse.
 */
@media (hover: hover) and (pointer: fine) {

    /**
     * Nasconde il cursore standard.
     */
   /**
 * Freccia bianca sempre visibile.
 */
body.mscursor-enabled,
body.mscursor-enabled * {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2.5V23.5L8.5 18L12.4 26L16.2 24.1L12.3 16.5H20.5L3 2.5Z' fill='white' stroke='%23222222' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")
        3 3,
        auto !important;
}


/**
 * Manina bianca su link, pulsanti
 * ed elementi cliccabili.
 */
body.mscursor-enabled a,
body.mscursor-enabled button,
body.mscursor-enabled [role="button"],
body.mscursor-enabled input[type="submit"],
body.mscursor-enabled input[type="button"],
body.mscursor-enabled input[type="reset"],
body.mscursor-enabled label[for],
body.mscursor-enabled select,
body.mscursor-enabled .elementor-button,
body.mscursor-enabled .elementor-icon,
body.mscursor-enabled .menu-item > a,
body.mscursor-enabled .swiper-button-next,
body.mscursor-enabled .swiper-button-prev,
body.mscursor-enabled .swiper-pagination-bullet,
body.mscursor-enabled .woocommerce a.button,
body.mscursor-enabled .woocommerce button.button,
body.mscursor-enabled [data-cursor-hover],
body.mscursor-enabled .clickable {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M10.5 14V5.5C10.5 4.12 11.62 3 13 3C14.38 3 15.5 4.12 15.5 5.5V11.5V7.5C15.5 6.12 16.62 5 18 5C19.38 5 20.5 6.12 20.5 7.5V12V9C20.5 7.62 21.62 6.5 23 6.5C24.38 6.5 25.5 7.62 25.5 9V18C25.5 23.25 21.25 27.5 16 27.5H14.5C11.6 27.5 8.85 26.18 7.05 23.9L3.55 19.45C2.67 18.34 2.86 16.72 3.98 15.84C5.09 14.96 6.71 15.15 7.59 16.27L10.5 19.95V14Z' fill='white' stroke='%23222222' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")
        10 4,
        pointer !important;
}


    /**
     * Contenitore generale.
     */
    #ue-mscursor-cursor.mscursor-cursor {
        position: fixed;
        top: 0;
        left: 0;

        display: block;

        width: 0;
        height: 0;

        pointer-events: none;
        user-select: none;

        opacity: 0;
        visibility: hidden;

        border-radius: 0;

        z-index: 2147483647;

        transition:
            opacity 150ms ease,
            visibility 150ms ease;

        contain: layout style;
    }

    #ue-mscursor-cursor.mscursor-cursor.is-visible {
        opacity: 1;
        visibility: visible;
    }


    /**
     * Singolo elemento della scia.
     */
    #ue-mscursor-cursor .mscursor-circle {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: var(--mscursor-size);
        height: var(--mscursor-size);

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 20px;

        pointer-events: none;

        transform-origin: center center;

        transform:
            translate3d(0, 0, 0)
            scale(
                var(--mscursor-item-scale, 1)
            );

        will-change:
            left,
            top,
            transform,
            border-radius;

        backface-visibility: hidden;
    }


    /**
     * Primo cerchio: inizialmente trasparente.
     * Il bordo compare quando il mouse si ferma.
     */
    #ue-mscursor-cursor .mscursor-circle.new {
        background-color: transparent;
    }


    /**
     * Deformazione organica continua.
     */
    #ue-mscursor-cursor .mscursor-border-transform {
        animation:
            mscursor-border-transform
            3s
            linear
            infinite;
    }


    /**
     * Quando il mouse si ferma tutti i cerchi
     * si ingrandiscono.
     *
     * La variabile mantiene anche la scala
     * progressiva di ciascun elemento.
     */
    #ue-mscursor-cursor .mscursor-circle.mscursor-scale {
        transition:
            transform 500ms ease,
            background-color 500ms ease,
            border-color 500ms ease;

        transform:
            translate3d(0, 0, 0)
            scale(
                calc(
                    var(--mscursor-item-scale, 1) * 1.6
                )
            );
    }


    /**
     * Il primo elemento diventa il contorno esterno.
     */
    #ue-mscursor-cursor
    .mscursor-circle.mscursor-scale-outline {
        background-color: transparent !important;

        transform:
            translate3d(0, 0, 0)
            scale(
                calc(
                    var(--mscursor-item-scale, 1) * 1.9
                )
            );
    }


    /**
     * Ripristina un cursore utilizzabile nei campi
     * in cui bisogna scrivere o selezionare testo.
     */
    body.mscursor-enabled input:not(
    [type="submit"]
):not(
    [type="button"]
):not(
    [type="reset"]
):not(
    [type="checkbox"]
):not(
    [type="radio"]
),
body.mscursor-enabled textarea,
body.mscursor-enabled [contenteditable="true"],
body.mscursor-enabled [contenteditable="true"] * {
    cursor: text !important;
}

body.mscursor-enabled iframe,
body.mscursor-enabled .no-custom-cursor,
body.mscursor-enabled .no-custom-cursor * {
    cursor: auto !important;
}


    /**
     * Nasconde temporaneamente la scia sugli elementi
     * esclusi tramite la classe no-custom-cursor.
     */
    body:has(.no-custom-cursor:hover)
    #ue-mscursor-cursor {
        opacity: 0;
    }
}


/**
 * Forma organica irregolare.
 */
@keyframes mscursor-border-transform {

    0%,
    100% {
        border-radius:
            63% 37% 54% 46% /
            55% 48% 52% 45%;
    }

    14% {
        border-radius:
            40% 60% 54% 46% /
            49% 60% 40% 51%;
    }

    28% {
        border-radius:
            54% 46% 38% 62% /
            49% 70% 30% 51%;
    }

    42% {
        border-radius:
            61% 39% 55% 45% /
            61% 38% 62% 39%;
    }

    56% {
        border-radius:
            61% 39% 67% 33% /
            70% 50% 50% 30%;
    }

    70% {
        border-radius:
            50% 50% 34% 66% /
            56% 68% 32% 44%;
    }

    84% {
        border-radius:
            46% 54% 50% 50% /
            35% 61% 39% 65%;
    }
}


/**
 * Disattivazione su smartphone e tablet.
 */
@media (hover: none), (pointer: coarse) {

    #ue-mscursor-cursor {
        display: none !important;
    }

    body.mscursor-enabled,
    body.mscursor-enabled * {
        cursor: auto !important;
    }
}


/**
 * Rispetta le impostazioni di accessibilità
 * per la riduzione delle animazioni.
 */
@media (prefers-reduced-motion: reduce) {

    #ue-mscursor-cursor {
        display: none !important;
    }

    body.mscursor-enabled,
    body.mscursor-enabled * {
        cursor: auto !important;
    }
}