/* === Transparent Navbar with Fading Blur Effect === */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.096);
  /* backdrop-filter: blur(5px); */
  border-bottom: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  background-color: #11111100;
  
  /* Fade out effect at bottom */
  /* -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); */
  /* mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); */
}

/* Alternative method: Add an ::after pseudo-element for more control */
/* .topbar::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.096), transparent);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
} */

/* When scrolled past slideshow - add class 'scrolled' */
.topbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); */
  
  /* Keep full opacity when scrolled */
  -webkit-mask-image: none;
  mask-image: none;
}

.topbar.scrolled::after {
  display: none;
}

/* === Hide Navigation Until Scrolled === */

/* Hide desktop nav when transparent */
.topbar .nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show desktop nav when scrolled */
.topbar.scrolled .nav {
  opacity: 1;
  pointer-events: auto;
}

/* Hide mobile menu button when transparent */
.topbar .menu-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show mobile menu button when scrolled */
.topbar.scrolled .menu-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Text colors - white when transparent */
.topbar .brand,
.topbar .nav a {
  color: #fff;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text colors - dark when scrolled */
.topbar.scrolled .brand,
.topbar.scrolled .nav a {
  color: #111;
}

/* Brand mark (logo) */
.topbar .brand-mark {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Menu button icon color */
.topbar .menu-btn svg path {
  stroke: #fff;
  transition: stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar.scrolled .menu-btn svg path {
  stroke: #111;
}

/* Nav link hover states */
.topbar .nav a:hover {
  opacity: 0.7;
}

/* Active link indicator - adjust colors based on scroll */
.topbar .nav a.active::after {
  background: #fff;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar.scrolled .nav a.active::after {
  background: #111;
}

/* Optional: Add subtle text shadow for better readability when transparent */
.topbar:not(.scrolled) .brand,
.topbar:not(.scrolled) .nav a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}