@layer blocks {
  /* ==========================================================================
     Nav Bar
     ========================================================================== */

  .nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
    height: 4rem;
    background-color: transparent;
    backdrop-filter: blur(0);
    transition:
      background-color var(--duration-normal) ease,
      backdrop-filter var(--duration-normal) ease;
  }

  /* Scrolled state — set by JS scroll observer (task 2.8) */
  .nav[data-scrolled] {
    background-color: hsl(221deg 39% 11% / 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--color-border);
  }

  /* --- Logo --- */

  .nav-logo {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
  }

  .nav-logo:hover {
    color: var(--color-accent);
  }

  /* --- Hamburger (mobile only) --- */

  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-xs);
  }

  /* --- Nav Links --- */

  .nav-links {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    position: relative;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--duration-fast) ease;
  }

  .nav-links a:hover {
    color: var(--color-text);
  }

  /* Active section indicator — set by JS scroll observer (task 2.8) */
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }

  .nav-links a[data-active]::after {
    transform: scaleX(1);
  }

  /* --- Theme Toggle --- */

  .nav-theme-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast) ease;
  }

  .nav-theme-toggle:hover {
    color: var(--color-text);
  }

  .nav-theme-toggle svg {
    transition: transform var(--duration-normal) var(--ease-spring);
  }

  .nav-theme-toggle:active svg {
    transform: rotate(30deg) scale(0.85);
  }

  /* Show sun icon in dark mode, moon in light mode */
  .nav-icon-moon {
    display: none;
  }

  [data-theme='light'] .nav-icon-sun {
    display: none;
  }

  [data-theme='light'] .nav-icon-moon {
    display: block;
  }

  /* ==========================================================================
     Mobile Nav (< 768px)
     ========================================================================== */

  @media (width <= 768px) {
    .nav-hamburger {
      display: flex;
    }

    .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      height: 100dvh;
      width: min(300px, 80vw);
      flex-direction: column;
      gap: 0;
      padding: var(--space-3xl) var(--space-xl);
      background: var(--color-surface);
      transform: translateX(100%);
      transition: transform var(--duration-normal) var(--ease-out-expo);
      z-index: var(--z-nav);
    }

    .nav[data-menu-open] .nav-links {
      transform: translateX(0);
    }

    .nav-links li {
      opacity: 0;
      transform: translateX(20px);
      transition:
        opacity var(--duration-normal) var(--ease-out-expo),
        transform var(--duration-normal) var(--ease-out-expo);
    }

    .nav[data-menu-open] .nav-links li {
      opacity: 1;
      transform: translateX(0);
    }

    /* Stagger each link */
    .nav[data-menu-open] .nav-links li:nth-child(1) {
      transition-delay: 100ms;
    }

    .nav[data-menu-open] .nav-links li:nth-child(2) {
      transition-delay: 150ms;
    }

    .nav[data-menu-open] .nav-links li:nth-child(3) {
      transition-delay: 200ms;
    }

    .nav[data-menu-open] .nav-links li:nth-child(4) {
      transition-delay: 250ms;
    }

    .nav-links a {
      display: block;
      padding: var(--space-md) 0;
      font-size: var(--font-size-lg);
    }
  }
}