/* ====================== MENU FINALE ====================== */





.site-header {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  display: flex;


  justify-content: space-between;


  align-items: center;


  padding: 1.2rem 1.8rem;


  z-index: 9999;


  background: transparent;


  mix-blend-mode: difference;


  transition: opacity 0.4s ease, transform 0.4s ease;


}





.site-header.hide-header {


  opacity: 0;


  pointer-events: none;


  transform: translateY(-20px);


}





.logo-img {


  height: 100px;


  width: auto;


  transition: height 0.3s ease;


}





@media (max-width: 768px) {


  .logo-img {


    height: 50px;


  }


}





@media (max-width: 480px) {


  .logo-img {


    height: 40px;


  }


}





/* BURGER TOGGLE */


#menu-toggle {


  display: flex;


  flex-direction: column;


  gap: 6px;


  background: none;


  border: none;


  cursor: pointer;


  z-index: 10000;


  transform: scale(1.4);


}





.burger {


  width: 28px;


  height: 2px;


  background: white;


  transition: all 0.3s ease;


}





#menu-toggle.open .burger:nth-child(1) {


  transform: translateY(8px) rotate(45deg);


}


#menu-toggle.open .burger:nth-child(2) {


  opacity: 0;


}


#menu-toggle.open .burger:nth-child(3) {


  transform: translateY(-8px) rotate(-45deg);


}





/* MENU OVERLAY */


#menu-overlay {


  position: fixed;


  top: 0;


  left: 0;


  width: 100vw;


  height: 100vh;


  background: rgba(24, 34, 29, 0.95);


  backdrop-filter: blur(8px);


  display: flex;


  flex-direction: column;


  justify-content: center;


  align-items: center;


  padding: 2rem;


  gap: 2.5rem;


  transform: translateY(-100%);


  transition: transform 0.5s ease;


  z-index: 9998;


}





#menu-overlay.open {


  transform: translateY(0);


}





.menu-links {


  list-style: none;


  padding: 0;


  margin: 0;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  text-align: center;


  gap: 2rem;


}





.menu-links a {


  position: relative;


  display: inline-block;


  color: white;


  font-size: 1.6rem;


  font-weight: 500;


  text-transform: uppercase;


  letter-spacing: 0.08em;


  line-height: 1.2;


  transition: all 0.3s ease;


  padding-bottom: 4px;


}





.menu-links li {


  opacity: 0;


  transform: translateY(10px);


  animation: none;


}





/* Quando il menu è aperto */


#menu-overlay.open .menu-links li {


  animation: fadeInUp 0.6s ease forwards;


}





/* Sequenza animata progressiva */


#menu-overlay.open .menu-links li:nth-child(1) {


  animation-delay: 0.1s;


}


#menu-overlay.open .menu-links li:nth-child(2) {


  animation-delay: 0.2s;


}


#menu-overlay.open .menu-links li:nth-child(3) {


  animation-delay: 0.3s;


}


#menu-overlay.open .menu-links li:nth-child(4) {


  animation-delay: 0.4s;


}


#menu-overlay.open .menu-links li:nth-child(5) {


  animation-delay: 0.5s;


}


#menu-overlay.open .menu-links li:nth-child(6) {


  animation-delay: 0.6s;


}


#menu-overlay.open .menu-links li:nth-child(7) {


  animation-delay: 0.7s;


}


#menu-overlay.open .menu-links li:nth-child(8) {


  animation-delay: 0.8s;


}





/* Animazione fade + salita */


@keyframes fadeInUp {


  0% {


    opacity: 0;


    transform: translateY(20px);


  }


  100% {


    opacity: 1;


    transform: translateY(0);


  }


}





/* Sottolineatura animata */


.menu-links a::after {


  content: "";


  position: absolute;


  left: 0;


  bottom: 0;


  width: 0%;


  height: 2px;


  background-color: var(--color-accent);


  transition: width 0.3s ease;


}





/* Hover elegante */


.menu-links a:hover {


  color: #afbdad;


  text-shadow: 0 0 4px rgba(175, 189, 173, 0.2);


  transform: translateY(-1px);


}





.menu-links a:hover::after {


  width: 100%;


}





/* SOCIAL ICONS */


.menu-icons {


  display: flex;


  flex-direction: row;


  justify-content: center;


  gap: 18px;


  margin-top: 2rem;


}





.menu-icons img {


  width: 32px;


  height: 32px;


  object-fit: contain;


  opacity: 0.9;


  transition: all 0.3s ease;


  filter: brightness(0.9);


}





.menu-icons img:hover {


  transform: scale(1.1);


  filter: drop-shadow(0 0 6px rgba(175, 189, 173, 0.35));


  opacity: 1;


}





/* FADE IN ANIMAZIONE */


@keyframes fadeIn {


  0% {


    opacity: 0;


    transform: translateY(20px);


  }


  100% {


    opacity: 1;


    transform: translateY(0);


  }


}


@media screen and (min-width: 1025px) {


  .menu-links a {


    font-size: 2rem;


    font-weight: 600;


    letter-spacing: 0.08em;


  }





  .menu-links {


    gap: 1.2rem;


  }





  .menu-links a:hover {


    opacity: 1;


    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);


    transform: scale(1.03);


    transition: all 0.2s ease;


  }


}


@media screen and (max-width: 768px) {


  .menu-links {


    gap: 1.2rem;


  }


}





@media screen and (max-width: 480px) {


  .menu-links {


    gap: 1rem;


  }


}