/* ============================================
   NAV — Header & Navigation Overlay
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 50;
  pointer-events: none;
  transition: all 0.4s ease;
  border-bottom: 3px solid transparent;
  mix-blend-mode: difference;
}

/* Automatic Color Inversion based on Background */
.logo, .menu-btn {
  filter: invert(1);
}

.header.scrolled {
  padding: 1vw 4vw;
  pointer-events: auto;
}

.logo, .menu-btn {
  pointer-events: auto;
  cursor: pointer;
}

.logo {
  height: 12vw;
  max-height: 160px;
  transition: all 0.4s ease;
}

.header.scrolled .logo {
  height: 5vw;
  max-height: 70px;
}

.menu-btn {
  height: 10vw;
  max-height: 120px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header.scrolled .menu-btn {
  height: 5vw;
  max-height: 60px;
  margin-top: 0.5vw;
}

.menu-btn:hover {
  transform: scale(1.1);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--yellow);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transform: translateY(-100%);
}

.nav-overlay.open {
  pointer-events: auto;
}

.close-btn {
  position: absolute;
  top: 3vw;
  right: 4vw;
  height: 10vw;
  max-height: 120px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.close-btn:hover {
  transform: scale(1.1) rotate(90deg);
}

.nav-links {
  list-style: none;
  text-align: center;
}

.nav-links li {
  margin: 2vw 0;
  opacity: 0;
  transform: translateY(30px);
}

.nav-links a {
  font-size: 6vw;
  color: var(--black);
  text-decoration: none;
  letter-spacing: 3px;
  transition: all 0.3s ease;
  display: inline-block;
}

.nav-links a:hover {
  transform: scale(1.1) skewX(-4deg);
  text-shadow: 3px 3px 0px var(--white);
}

.nav-overlay.open .nav-links li:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.open .nav-links li:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.open .nav-links li:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.open .nav-links li:nth-child(4) { transition-delay: 0.4s; }

.nav-easter-egg {
  font-family: 'Inter', sans-serif;
  font-size: 1vw;
  font-weight: 500;
  color: var(--black);
  opacity: 0;
  transform: translateY(15px);
  margin-top: 3vw;
  letter-spacing: 1px;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .nav-links a { font-size: 8vw; }
  .nav-links li { margin: 3vw 0; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .logo { height: 18vw; max-height: 100px; }
  .menu-btn { height: 14vw; max-height: 80px; }
  .close-btn { height: 14vw; max-height: 80px; }
  .nav-links a { font-size: 12vw; letter-spacing: 2px; }
  .nav-links li { margin: 4vw 0; }
  
  .header.scrolled { padding: 3vw 5vw; }
  .header.scrolled .logo { height: 10vw; max-height: 50px; }
  .header.scrolled .menu-btn { height: 8vw; max-height: 40px; margin-top: 1vw; }
  .nav-easter-egg { font-size: 3vw; margin-top: 6vw; }
}