/**
 * Animacja hover ikon SVG w menu - rysowanie obrysu (jak na motivon.pl)
 * 
 * Dla ikon outline z własnym obramowaniem dodaj klasę "svg-outline-animate" do elementu SVG
 * Przykład: <svg class="svg-outline-animate">...</svg>
 * Wtedy animacja będzie działać na oryginalnym obramowaniu ikony, bez tworzenia dodatkowej linii
 * Animacja uruchamia się po najechaniu kursorem (hover) na element menu
 */

:root {
  --svg-animation-stroke-width: 1; /* Grubość linii animacji SVG - możesz zmienić tutaj (np. 0.5, 1, 1.5, 2, 2.5) */
}

/* Klasa click-animate jest używana w JS do identyfikacji animowanych ikon (nazwa zachowana dla kompatybilności, działa też na hover) */
ul.ul-main li svg.click-animate path,
ul.ul-submenu li svg.click-animate path {
  /* Animacja rysowania obrysu - CSS kontroluje tylko animację */
  -webkit-animation: svg-draw 2s ease-out forwards;
  -moz-animation: svg-draw 2s ease-out forwards;
  -ms-animation: svg-draw 2s ease-out forwards;
  -o-animation: svg-draw 2s ease-out forwards;
  animation: svg-draw 2s ease-out forwards;
}

/* Dla path bez atrybutu fill, które dziedziczą fill="none" z SVG - zapewnij widoczność podczas animacji */
/* ALE NIE dla ikon outline - one mają własną animację i nie powinny mieć fill */
ul.ul-main li svg.click-animate:not(.svg-outline-animate) path:not([fill]),
ul.ul-submenu li svg.click-animate:not(.svg-outline-animate) path:not([fill]) {
  fill: transparent !important;
}

/* Animacja pojawiania się SVG */
@-webkit-keyframes svg-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes svg-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animacja rysowania obrysu SVG */
@-webkit-keyframes svg-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svg-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Animacja dla ikon outline z klasą svg-outline-animate */
ul.ul-main li svg.svg-outline-animate.click-animate-outline,
ul.ul-submenu li svg.svg-outline-animate.click-animate-outline {
  fill: none;
  /* Opacity pozostaje bez zmian - ikona zawsze w pełni widoczna */
}

/* Dla ikon outline - path SAM JEST outline'em (jego kształt to linia)
 * Dokładnie jak w przykładzie - fill: none (zgodne z oryginalnym SVG), stroke rysuje SAM kształt path
 * Każdy path ma swoją własną animację z ustawionymi wartościami stroke-dasharray/offset
 * Kolor stroke jest ustawiany przez JavaScript z CSS hover, więc nie używamy currentColor */
ul.ul-main li svg.svg-outline-animate.click-animate-outline path:not([fill="none"]),
ul.ul-submenu li svg.svg-outline-animate.click-animate-outline path:not([fill="none"]) {
  fill: none !important; /* Zgodne z oryginalnym SVG - fill="none" */
  stroke-width: 1 !important; /* Jak w przykładzie */
  /* stroke jest ustawiany przez JavaScript z !important, więc nie ustawiamy tutaj */
  -webkit-animation: svg-draw-outline 2s forwards;
  -moz-animation: svg-draw-outline 2s forwards;
  -ms-animation: svg-draw-outline 2s forwards;
  -o-animation: svg-draw-outline 2s forwards;
  animation: svg-draw-outline 2s forwards;
}

@-webkit-keyframes svg-draw-outline {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svg-draw-outline {
  to {
    stroke-dashoffset: 0;
  }
}