/* Never let a decorative element cause sideways scrolling on phones */
html, body { overflow-x: clip; }

/* Whenever the full-screen menu is open, its close (×) button must be visible
   (Webflow's animation could leave it at scale 0 when the menu was opened from the top of the page). */
.fixed-nav-menu-container[style*="display: flex"] .menu-toggle.close { opacity: 1 !important; transform: none !important; }

/* Phones & tablets: the nav links are hidden at this size, so the menu button must always be
   reachable (Webflow only revealed it after scrolling, leaving no navigation at the top). */
@media screen and (max-width: 991px) {
  .navbar .nav-container .menu-toggle { opacity: 1 !important; transform: none !important; }
  /* sound control: icon only, so it doesn't sit over the content */
  .ks-sound { padding: 0 !important; width: 40px; justify-content: center; }
  .ks-sound .ks-label { display: none; }
}

/* Logo hides while scrolling down, returns on scroll up (all screen sizes) */
.navbar .brand .logo { transition: opacity .3s ease, transform .4s cubic-bezier(.4, 0, .2, 1); }
.navbar .brand.ks-brand-hidden .logo { opacity: 0; transform: translateY(-140%) scale(.8); }
.navbar .brand.ks-brand-hidden { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .navbar .brand.ks-brand-hidden .logo { transform: none; }
}

/* Split navbar (desktop): links on both sides, the ✷ mark centred */
@media screen and (min-width: 992px) {
  .navbar .nav-container { display: flex; align-items: center; position: relative; }
  .navbar .nav-menu-container { flex: 1; }
  .navbar .nav-links-wrapper { width: 100%; justify-content: flex-start; }
  .navbar .brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 2; padding: 0; margin: 0;
  }
  .navbar .brand .logo.ks-star-logo { width: 28px; height: 28px; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.2, .5, 1); }
  .navbar .brand:hover .logo.ks-star-logo { transform: rotate(180deg); }

  /* left: Projects · Story · Play    |    right: Contact · Resume */
  .navbar .nav-links-wrapper > a[href*="index"] { order: 1; }
  .navbar .nav-links-wrapper > a[href*="about"] { order: 2; }
  .navbar .nav-links-wrapper > a[href*="play-area"] { order: 3; margin-right: auto; }
  .navbar .nav-links-wrapper > a[href*="contact"] { order: 4; }
  .navbar .nav-links-wrapper > a:last-child { order: 5; }
  /* pages without a Play link: split after Story */
  .navbar .nav-links-wrapper:not(:has(> a[href*="play-area"])) > a[href*="about"] { margin-right: auto; }
}