/* ============================================================
   NAV — bar atas (desktop) & dock bawah ala tab bar iOS (HP)
   ============================================================ */
.nav {
  position: fixed; z-index: 100; top: 16px; left: 50%;
  width: min(1180px, calc(100% - var(--gutter) * 2));
  height: var(--nav-h); padding: 0 28px; border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(14,14,14,.82), rgba(8,8,8,.7));
  transform: translate(-50%, -140%); opacity: 0;
  transition: transform .9s var(--ease) .2s, opacity .9s var(--ease) .2s;
}
body.is-ready .nav { transform: translate(-50%, 0); opacity: 1; }
.nav__brand { font: 400 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--fg-2); transition: color .25s; }
.nav__brand:hover { color: #fff; }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  position: relative; font: 400 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--fg-3);
  padding: 8px 0; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after { transform: scaleX(1); }

/* dock (HP) */
.dock { display: none; }
@media (max-width: 760px) {
  .nav { padding: 0 20px; height: 48px; top: calc(10px + env(safe-area-inset-top)); }
  .nav__links { display: none; }
  .dock {
    display: flex; position: fixed; z-index: 100; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translate(-50%, 160%); padding: 6px; gap: 2px; border-radius: 28px;
    background: linear-gradient(180deg, rgba(30,30,30,.7), rgba(12,12,12,.65));
    transition: transform .9s var(--spring) .4s;
  }
  body.is-ready .dock { transform: translate(-50%, 0); }
  .dock a {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 76px; padding: 9px 0 7px; border-radius: 22px; color: var(--fg-3);
    font: 400 10px/1 var(--font-body); transition: color .3s, transform .35s var(--spring);
  }
  .dock a:active { transform: scale(.9); }
  .dock a.is-active { color: #fff; }
  .dock__lens {
    position: absolute; z-index: 1; top: 6px; bottom: 6px; left: 6px; width: 76px; border-radius: 22px;
    background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 18px rgba(0,0,0,.4);
    transition: transform .55s var(--spring);
  }
}