/* -------------------------- */
/* Podstawowy Styl Linku */
/* -------------------------- */
.stylish-link {
  /* Usuń domyślne podkreślenie */
  text-decoration: none; 
  
  /* Kolor tekstu */
  color: #66edff; /* Jasny, przyjemny dla oka niebieski */
  font-weight: 500; /* Pogrubienie czcionki */
  
  /* Dodaj subtelne przejście dla płynnych animacji */
  transition: 
    color 0.3s ease-in-out, 
    transform 0.3s ease-in-out; 
    
  /* Ustawienie kontekstu dla pseudo-elementu (podkreślenia) */
  position: relative;
  
  /* Wyrównanie i odstępy */
  display: inline-block;
  padding: 2px 0;

}

/* -------------------------- */
/* Efekt Najechania (Hover) */
/* -------------------------- */
.stylish-link:hover {
  /* Lekkie przyciemnienie koloru tekstu */
  color: #fffb10;
  font-weight: 600; /* Pogrubienie czcionki */
  cursor: pointer; /* Zapewnia, że kursor zmienia się na rękę */
  
  /* Opcjonalnie: bardzo delikatne powiększenie (dodaje dynamiki) */
  transform: translateY(-1px);
}

/* -------------------------- */
/* Stylowe Podkreślenie (Pseudo-element) */
/* -------------------------- */
/* Utwórz niewidoczny pasek pod linkiem */
.stylish-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Grubość podkreślenia */
  background-color: #b8af00; /* Kolor podkreślenia (ten sam co tekst) */
  
  /* Ustaw podkreślenie na początku jako niewidoczne lub zerowej szerokości */
  transform: scaleX(0); /* Początkowa szerokość 0 */
  transform-origin: bottom right; /* Rozwijanie od prawej */
  
  /* Dodaj przejście dla animacji paska */
  transition: transform 0.3s ease-in-out;
}

/* -------------------------- */
/* Animacja Podkreślenia podczas Najazdu */
/* -------------------------- */
.stylish-link:hover::after {
  /* Rozwiń podkreślenie na pełną szerokość */
  transform: scaleX(1); 
  transform-origin: bottom left; /* Rozwijanie do lewej */
}

.stylish-link-pink {
  text-decoration: none; 
  
  color: #fda9b0; /* Jasny, przyjemny dla oka niebieski */
  font-weight: 500; /* Pogrubienie czcionki */
  
  transition: 
    color 0.3s ease-in-out, 
    transform 0.3s ease-in-out; 
    
  position: relative;
  
  display: inline-block;
  padding: 2px 0;
}

.stylish-link-pink:hover {
  color: #ffd737;
  font-weight: 600; /* Pogrubienie czcionki */

  transform: translateY(-1px);
}

.stylish-link-pink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Grubość podkreślenia */
  background-color: #bfb500; /* Kolor podkreślenia (ten sam co tekst) */
  
  transform: scaleX(0); /* Początkowa szerokość 0 */
  transform-origin: bottom right; /* Rozwijanie od prawej */
  
  transition: transform 0.3s ease-in-out;
}

.stylish-link-pink:hover::after {
  transform: scaleX(1); 
  transform-origin: bottom left; /* Rozwijanie do lewej */
}