/**
 * Styling per scribble circle nel menu
 */

/* Rendi il link position relative per contenere l'SVG absolute */
#header-outer nav > ul.sf-menu > li > a {
    position: relative;
    display: inline-block;
}

/* SVG scribble nel menu */
.nectar-scribble.menu-scribble {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 140% !important;
    height: 170% !important;
    pointer-events: none;
    opacity: 0; /* Nascosto di default */
    z-index: -1; /* Dietro al testo */
}

/* Path dell'SVG - inizialmente non disegnato */
.nectar-scribble.menu-scribble path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0s; /* Nessuna transizione di default */
}

/* HOVER: mostra e anima il cerchio con delay */
#header-outer nav > ul.sf-menu > li > a:hover .nectar-scribble.menu-scribble {
    opacity: 1;
    animation: fadeInScribble 0.2s ease 0.15s forwards; /* Delay di 0.15s */
}

#header-outer nav > ul.sf-menu > li > a:hover .nectar-scribble.menu-scribble path {
    animation: drawScribble var(--scribble-speed, 1.3s) ease 0.15s forwards; /* Delay di 0.15s */
}

/* CURRENT MENU ITEM: mostra sempre il cerchio */
#header-outer nav > ul.sf-menu > li.current-menu-item > a .nectar-scribble.menu-scribble {
    opacity: 1;
}

#header-outer nav > ul.sf-menu > li.current-menu-item > a .nectar-scribble.menu-scribble path {
    stroke-dashoffset: 0; /* Già disegnato */
}

/* Animazione fade in */
@keyframes fadeInScribble {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animazione del disegno del path */
@keyframes drawScribble {
    to {
        stroke-dashoffset: 0;
    }
}

/* Responsive: riduci dimensioni su mobile */
@media only screen and (max-width: 999px) {
    .nectar-scribble.menu-scribble {
        width: 130%;
    }
}

/* Animazione al caricamento per current-menu-item */
.nectar-scribble.menu-scribble.animate-on-load path {
    animation: drawScribble 1.3s ease 0s forwards;
}