/* ============================================================
   LAYOUT — Cursor, Scroll Track, Navbar, Visitor Counter
   ============================================================ */

/* ---- Custom Cursor ---- */
#cursor-glow {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.18), transparent 70%);
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  transition: transform .05s, width .3s, height .3s, background .3s;
}
#cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  pointer-events: none;
  z-index: 1000001;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan), 0 0 28px var(--neon-cyan);
  transition: transform .03s;
}
body.cursor-hover #cursor-glow {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(0,240,255,0.25), transparent 70%);
}
body.cursor-hover #cursor-dot {
  background: var(--neon-pink);
  box-shadow: 0 0 8px var(--neon-pink), 0 0 16px var(--neon-pink);
}

/* ---- Scroll Track ---- */
#scroll-track {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60vh;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  z-index: 99999;
  pointer-events: none;
}
#scroll-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0,240,255,.5);
  transition: transform .08s linear;
}

/* ---- Visitor Counter ---- */
.visitor-counter {
  position: fixed;
  top: 22px;
  left: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,240,255,.25);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 22px rgba(0,240,255,.18);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-primary);
}
.visitor-eye {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px var(--neon-cyan);
  font-size: 16px;
}
#visitor-count {
  min-width: 30px;
  text-align: center;
}

/* ---- Navbar ---- */
#navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, 94vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(8,11,24,0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  z-index: 1000;
  transition: box-shadow .3s;
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
#navbar.scrolled {
  box-shadow: 0 4px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,240,255,0.1);
}

/* Logo */
.nav-logo { font-family: var(--font-display); font-size: 20px; font-weight: 900; letter-spacing: -1px; }
.nav-dot   { color: var(--neon-cyan); text-shadow: 0 0 12px var(--neon-cyan); }
.nav-logo-img {
  width: 44px; height: 44px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-img img {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.65)) drop-shadow(0 0 16px rgba(191,92,255,0.35));
  transition: transform .3s var(--ease-spring), filter .3s;
}
.nav-logo-img:hover img {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 0 12px rgba(0,240,255,0.9)) drop-shadow(0 0 24px rgba(255,45,120,0.45));
}

/* Nav links */
.nav-links { display: flex; gap: 8px; }
.nav-link {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-radius: 100px;
  color: var(--text-secondary);
  transition: color .3s, background .3s;
}
.nav-link:hover  { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--neon-cyan); }

/* Music btn in nav */
.nav-music-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(0,240,255,0.08);
  border: 1px solid rgba(0,240,255,0.15);
  color: var(--neon-cyan);
  font-size: 14px;
  cursor: none;
  transition: background .3s, box-shadow .3s;
}
.nav-music-btn:hover { background: rgba(0,240,255,0.15); box-shadow: 0 0 20px rgba(0,240,255,0.2); }
.nav-eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.nav-eq span { width: 2px; background: var(--neon-cyan); border-radius: 2px; height: 4px; }
@keyframes eq1 { from { height: 3px } to { height: 14px } }
.nav-eq.playing span:nth-child(1) { animation: eq1 .6s ease-in-out infinite alternate; }
.nav-eq.playing span:nth-child(2) { animation: eq1 .8s ease-in-out infinite alternate .1s; }
.nav-eq.playing span:nth-child(3) { animation: eq1 .5s ease-in-out infinite alternate .2s; }
.nav-eq.playing span:nth-child(4) { animation: eq1 .7s ease-in-out infinite alternate .05s; }

/* ---- Mobile Hamburger & Menu ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: none;
  padding: 4px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--text-secondary);
  transition: all .3s;
}
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,5,13,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 9990;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  font-family: var(--font-display);
  font-size: clamp(16px, 5vw, 20px);
  letter-spacing: 4px;
  color: var(--text-secondary);
  transition: color .3s;
  cursor: none;
  padding: 8px 0;
}
.nav-mobile-link:hover  { color: var(--neon-cyan); }
.nav-mobile-close {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 26px;
  color: var(--text-secondary);
  cursor: none;
  transition: color .3s;
  background: none;
  border: none;
}
.nav-mobile-close:hover { color: var(--text-primary); }

/* ---- Music Bubble (floating) ---- */
#music-bubble {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 5000;
  width: 56px;
  height: 56px;
  cursor: none;
}
.music-bubble-inner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 20px rgba(0,240,255,0.4);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
#music-bubble:hover .music-bubble-inner {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0,240,255,0.6);
}
.music-bubble-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(0,240,255,0.4);
  animation: bubble-ring-pulse 2s ease-in-out infinite;
}
@keyframes bubble-ring-pulse {
  0%, 100% { transform: scale(1); opacity: .5 }
  50%       { transform: scale(1.1); opacity: .2 }
}

/* ---- Main site background ---- */
#main-site {
  background: var(--bg-deep);
  position: relative;
}
#main-site::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80vw 60vh at 20% 10%, rgba(0,240,255,.04), transparent),
    radial-gradient(ellipse 60vw 80vh at 80% 90%, rgba(191,92,255,.04), transparent),
    radial-gradient(ellipse 50vw 50vh at 50% 50%, rgba(255,45,120,.03), transparent);
  animation: bg-shift 20s ease-in-out infinite alternate;
}
@keyframes bg-shift {
  0%   { background-position: 20% 10%, 80% 90%, 50% 50%; }
  100% { background-position: 30% 20%, 70% 80%, 60% 40%; }
}

/* ---- Canvas layers ---- */
#grid-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .18;
  will-change: transform;
}
#visualizer-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .8s ease;
}
#visualizer-canvas.active { opacity: 1; }

/* ---- Responsive Layout ---- */
@media (max-width: 768px) {
  #navbar { padding: 12px 18px; }
  .visitor-counter { top: auto; bottom: 100px; left: 16px; font-size: 11px; padding: 6px 10px; }
}
@media (max-width: 680px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
  #scroll-track  { display: none; }
}
@media (max-width: 480px) {
  #navbar { top: 12px; width: 94vw; padding: 10px 16px; }
  #music-bubble { bottom: 20px; right: 16px; }
}