/* The bars (markup from .claude/build_menu.py, motion in js/navbar.js): a frosted bar top-centre
   with the photo, About, Projects (a list that grows out of it), Contact and, on desktop, a
   button to bring the side menu back; the clock top-right; and a bar at the bottom to go home
   or on to the next project (About has a home button beside the top bar instead).
   Desktop: shown while the side menu is hidden. Phones: always the navigation. */
.navbar-defs { position: absolute; width: 0; height: 0; }

.navbar, .navbar-clock, .pager { visibility: hidden; }
/* Arriving by a page change, the bars are already there from the first frame, so they hold still
   instead of blinking out and back (js/navbar.js shows them without the grow-in then) */
html.case-swap.nav-collapsed :is(.navbar, .navbar-clock, .pager) { visibility: visible; }
@media (max-width: 780px) { html.case-swap :is(.navbar, .navbar-clock, .pager) { visibility: visible; } }

.navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 120;
    width: max-content;
    transform: translateX(-50%);
    color: #161615;
    font-size: 13px;
    letter-spacing: -0.15px;
}

/* Frosted shapes that melt into each other as they move (the goo filter); the blur behind
   comes on once the bar has settled (.is-settled), since a filtered layer can't blur its
   backdrop. Text never goes through the filter. */
.navbar-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#nav-goo) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.08));
}
.navbar-shapes span { position: absolute; top: 0; left: 0; border-radius: 26px; background-color: rgba(255, 255, 255, 0.62); }
.navbar-shapes [data-shape="bar"] { width: 100%; height: 100%; } /* until js/navbar.js sizes it */
.navbar-shapes [data-shape="panel"] { border-radius: 22px; opacity: 0; }
.navbar-items, .navbar-panel, .pager-shape, .navbar-home { transition: -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease; }
.navbar.is-settled .navbar-items,
.navbar.is-settled .navbar-panel.is-open {
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
}
.navbar.is-settled .navbar-items { border-radius: 26px; }
.navbar.is-settled .navbar-panel.is-open { border-radius: 0 0 22px 22px; }

.navbar-items { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px; }
.navbar-avatar { display: block; flex-shrink: 0; margin-right: 14px; border-radius: 50%; }
.navbar-avatar img { display: block; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.navbar-pill, .navbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    border: 0;
    border-radius: 200px;
    background-color: rgba(0, 0, 0, 0.05);
    color: #4a4a46;
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.navbar-pill { padding: 0 18px; }
.navbar-pill-gap { margin-left: 14px; }
.navbar-icon { width: 34px; }
.navbar-pill .icon { width: 12px; height: 12px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.navbar-icon .icon { width: 16px; height: 16px; }
.navbar-pill:hover, .navbar-icon:hover, .navbar-pill[aria-current], .navbar-pill[aria-expanded="true"] { background-color: rgba(0, 0, 0, 0.09); color: #161615; }
.navbar-pill[aria-expanded="true"] .icon { transform: rotate(180deg); }
:is(.navbar-pill, .navbar-icon, .navbar-avatar, .navbar-row, .pager-link, .navbar-home):focus-visible { outline: 2px solid #161615; outline-offset: 2px; }

/* About: home, in its own frosted circle just left of the bar */
.navbar-home {
    position: absolute;
    top: 3px;
    right: calc(100% + 8px);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.08);
    color: #2a2a28;
    transition: background-color 0.25s ease;
}
.navbar-home:hover { background-color: rgba(255, 255, 255, 0.85); }
.navbar-home .icon { width: 17px; height: 17px; }

/* Projects: a list that grows out of the bar (hidden until opened) */
.navbar-panel { position: relative; display: none; padding: 0 6px 6px; }
.navbar-panel.is-open { display: grid; gap: 4px; }
.navbar-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.035);
    color: #161615;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.navbar-row > span { transition: opacity 0.3s ease, color 0.25s ease; }
.navbar-row span + span { color: #6b6b66; }
.navbar-row:hover { background-color: rgba(0, 0, 0, 0.07); }
.navbar-row.is-current { background-color: #161615; color: #fff; }
.navbar-row.is-current span + span { color: rgba(255, 255, 255, 0.72); }
.navbar-panel:hover .navbar-row:not(:hover) > span { opacity: 0.5; }

.navbar-clock {
    position: fixed;
    top: 30px;
    right: 32px;
    z-index: 120;
    color: #6b6b66;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pager {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 120;
    display: flex;
    gap: 4px;
    width: max-content;
    padding: 6px;
    transform: translateX(-50%);
    font-size: 13px;
}
.pager-shape {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background-color: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.08);
}
.pager-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 200px;
    color: #4a4a46;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.pager-link .icon { width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pager-link:hover { color: #161615; }
.pager-link.is-home { width: 34px; padding: 0; }
.pager-link.is-home .icon { width: 16px; height: 16px; }
.pager-link.is-next { background-color: rgba(0, 0, 0, 0.05); }
.pager-link.is-next:hover { background-color: rgba(0, 0, 0, 0.09); }
.pager-link.is-next:hover .icon { transform: translateX(3px); }

/* Desktop: the story leaves room for the bars while the side menu is hidden */
@media (min-width: 781px) {
    html.nav-collapsed :is(.story, .about) { padding-top: 104px; padding-bottom: 140px; }
    html:not(.nav-collapsed) .pager { display: none; }
}

/* Phones: the bars are the navigation. No side menu, no old header, no expand button. */
@media (max-width: 780px) {
    .navbar { top: 12px; font-size: 12.5px; }
    .navbar-icon, .navbar-clock { display: none; }
    .navbar-avatar { margin-right: 6px; }
    .navbar-avatar img { width: 32px; height: 32px; }
    .navbar-pill { height: 32px; padding: 0 13px; }
    .navbar-pill-gap { margin-left: 6px; }
    .navbar-items { padding: 5px; }
    .navbar-home { width: 42px; height: 42px; top: 1px; right: auto; left: auto; }
    .navbar:has(.navbar-home) { transform: translateX(calc(-50% + 25px)); }
    .navbar-home { right: calc(100% + 8px); }
    .navbar-row { padding: 11px 14px; }
    .pager { bottom: 14px; }
    header:has(#menu-open), #right-side-menu.right-side-menu:not(.home-page *) { display: none !important; }
    :is(.story, .about) { padding-top: 88px !important; padding-bottom: 104px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .navbar *, .pager * { transition: none !important; }
}
.pager-next-name { margin-left: -2px; color: #161615; }