/* Keep the existing island silhouette; animate its height rather than its text. */
.Navigation-Island,
.Navigation-Island.show-menu {
  --navigation-safe-bottom: env(safe-area-inset-bottom, 0px);
  padding: 0;
  pointer-events: auto;
  max-height: none;
  transform-origin: top center;
  transition: transform 380ms cubic-bezier(.2,.8,.25,1.15), background-color 220ms ease, box-shadow 300ms ease;
}
.Navigation-Island.show-menu { height: 50px; }
.Navigation-Island.menu-animating {
  background: rgba(0, 0, 0, .96) !important;
  border-color: rgba(255, 255, 255, .13);
}
.Navigation-Island .Island-Menu,
.Navigation-Island.show-menu .Island-Menu {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: auto;
  max-height: var(--navigation-menu-space, 0px);
  box-sizing: border-box;
  padding: 16px 20px 22px;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: none;
}
.Navigation-Island.menu-animating .Island-Menu { display: flex; }
.Navigation-Island .Island-Menu[hidden] { display: none; }
.Navigation-Island .Menu-Button span { transition: transform 220ms ease, opacity 160ms ease; }
.Navigation-Island .Menu-Button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.Navigation-Island .Menu-Button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.Navigation-Island .Menu-Button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.Navigation-Island .Menu-Button:active { transform: scale(.94); }
body.navigation-open .scroll-container { overflow-y: hidden; }
@media (hover: hover) and (pointer: fine) {
  .Navigation-Island:hover {
    transform: translateX(-50%) scale(1.025);
    box-shadow: var(--glass-shadow), 0 5px 18px rgba(255,255,255,.06);
  }
  .Navigation-Island .Menu-Button:hover { transform: scale(1.035); }
  .Navigation-Island .Menu-Button:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .Navigation-Island:hover { transform: translateX(-50%); }
  .Navigation-Island, .Navigation-Island .Menu-Button, .Navigation-Island .Menu-Button span { transition: none; }
}
