@charset "utf-8";

#navbar { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; padding: 20px 0px; background: transparent; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; }

#navbar.scrolled { backdrop-filter: blur(12px); background: rgba(6, 5, 15, 0.88); border-bottom: 1px solid var(--border); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; z-index: 1001; position: relative; }

.nav-logo img { height: 36px; width: auto; display: block; }

.nav-logo span { font-family: Syne, sans-serif; font-weight: 700; font-size: 1.1rem; color: rgb(255, 255, 255); letter-spacing: -0.01em; }

#hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 0px; position: relative; z-index: 1001; flex-shrink: 0; }

#hamburger span { display: block; width: 24px; height: 2px; background: rgb(196, 181, 253); border-radius: 2px; transition: transform 0.3s, opacity 0.3s, width 0.3s; transform-origin: center center; }

#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

#hamburger.open span:nth-child(2) { opacity: 0; width: 0px; }

#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#nav-overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgb(6, 5, 15); z-index: 999; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 90px 0 40px; }

#nav-overlay.open { opacity: 1; pointer-events: all; }

#overlay-close { position: absolute; top: 24px; right: 24px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; line-height: 1; }

#overlay-close:hover { color: rgb(255, 255, 255); }

#nav-overlay nav { display: flex; flex-direction: column; align-items: center; gap: 0px; min-height: min-content; margin: auto 0; }

.overlay-link { font-family: Syne, sans-serif; font-size: clamp(1.7rem, 5.5vw, 2.3rem); font-weight: 700; color: rgb(255, 255, 255); text-decoration: none; display: block; margin: 10px 0px; letter-spacing: -0.01em; transition: color 0.2s, transform 0.2s; text-align: center; }

.overlay-link:hover { color: var(--accent-purple); transform: translateX(4px); }

#nav-overlay.open .overlay-link { animation: 0.4s ease 0s 1 normal forwards running linkFadeIn; opacity: 0; }

#nav-overlay.open .overlay-link:nth-child(1) { animation-delay: 0.05s; }

#nav-overlay.open .overlay-link:nth-child(2) { animation-delay: 0.1s; }

#nav-overlay.open .overlay-link:nth-child(3) { animation-delay: 0.15s; }

#nav-overlay.open .overlay-link:nth-child(4) { animation-delay: 0.2s; }

#nav-overlay.open .overlay-link:nth-child(5) { animation-delay: 0.25s; }

#nav-overlay.open .overlay-link:nth-child(6) { animation-delay: 0.3s; }

@keyframes linkFadeIn { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}