/* Hamburger menu */

.hamburger {

  position: fixed;

  top: 20px;

  right: 30px;

  z-index: 1001;

  width: 30px;

  height: 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  cursor: pointer;

}



.hamburger span {

  height: 3px;

  background-color: white;

  border-radius: 2px;

  transition: 0.3s ease;

}



/* Animácia na krížik */

.hamburger.open span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}

.hamburger.open span:nth-child(2) {

  opacity: 0;

}

.hamburger.open span:nth-child(3) {

  transform: rotate(-45deg) translate(6px, -6px);

}



/* Overlay celé obrazovky */

#menu-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-color: rgba(15, 15, 15, 0.95);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s ease;

}



/* Zobrazený stav */

#menu-overlay.show {

  display: flex;

  opacity: 1;

  pointer-events: all;

}



/* Menu zoznam */

#menu-overlay ul {

  list-style: none;

  padding: 0;

  text-align: center;

  margin: 0;

}



/* Menu položky s animáciou */

#menu-overlay ul li {

  margin: 1.5rem 0;

  opacity: 0;

  transform: translateY(10px);

  animation: slideIn 0.4s ease forwards;

  animation-delay: calc(var(--i) * 0.1s);

}



#menu-overlay ul li:nth-child(1) { --i: 1; }

#menu-overlay ul li:nth-child(2) { --i: 2; }

#menu-overlay ul li:nth-child(3) { --i: 3; }

#menu-overlay ul li:nth-child(4) { --i: 4; }

#menu-overlay ul li:nth-child(5) { --i: 5; }



#menu-overlay ul li a {

  color: white;

  font-size: 2rem;

  font-weight: 600;

  text-decoration: none;

  transition: color 0.3s ease;

}



#menu-overlay ul li a:hover {

  color: #FFD700;

}



/* Animácia vstupu položiek */

@keyframes slideIn {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}