.nav {
  grid-area: 2 / 1 / 3 / 2;
  display: block grid;
  grid-auto-flow: row;
  justify-content: space-between;
  inline-size: 5em;
  block-size: 100%;
  padding: 1em;
  background: inherit;
  z-index: 0;
  transition: z-index 0.3s step-end;

  & > ul {
    position: relative;
    display: block grid;
    grid-template-columns: 2.5rem auto;
    align-content: center;
    inline-size: 4rem;
    gap: 1rem;
    transform-origin: left center;
    padding: 0;
    padding-inline-start: 0.5rem;
    margin: 0;

    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 100%;
      inset-block: -1em;
      inline-size: 40vw;
      background-image: linear-gradient(to right, rgb(from var(--surface-1) r g b / .9) 50%, transparent);
      mask: radial-gradient(
        ellipse 40vw 100% at left center,
        black 25%,
        transparent
      );
      backdrop-filter: blur(5px);
      opacity: 0;
      transition: opacity 0.3s var(--ease-3);
    }

    & > a {
      position: relative;
      grid-column: span 2;
      display: block grid;
      grid-template-columns: subgrid;
      align-items: center;
      text-decoration: none;
      transform-origin: center left;
      transition:
        transform 2s var(--ease-spring-5),
        opacity 0.3s var(--ease-3);
      color: var(--text-2);
      font-size: 2rem;
      line-height: 1.5;

      & > span {
        opacity: 0;
        transition: opacity 0.3s var(--ease-3);
        text-shadow: 0 0 .5em var(--surface-1);
      }

      & > svg {
        fill: var(--text-2);
        inline-size: 2.5rem;
        block-size: 2.5rem;
      }

      &.active {
        color: var(--yellow-5);
        list-style: disc;

        &::before {
          content: "•";
          position: absolute;
          inset-inline-start: -1rem;
        }

        & > svg {
          fill: var(--yellow-5);
        }
      }
    }

    &:has(a:is(:hover, :focus)) {
      &::before {
          opacity: 1;
        }

        & > a {
           transform: scale(max(1, calc(1.5 - (0.2 * abs(var(--target) - var(--sibling-index))))));
        
           & > span {
             opacity: 1;
           }
         }
    }

    &:has(a:is(:hover, :focus)) > a:not(:is(:hover, :focus)) {
      opacity: 0.25;
    }

    &:has(a:is(:hover, :focus):nth-child(1)) {
      --target: 1;
    }

    &:has(a:is(:hover, :focus):nth-child(2)) {
      --target: 2;
    }

    &:has(a:is(:hover, :focus):nth-child(3)) {
      --target: 3;
    }

    &:has(a:is(:hover, :focus):nth-child(4)) {
      --target: 4;
    }

    &:has(a:is(:hover, :focus):nth-child(5)) {
      --target: 5;
    }

    &:has(a:is(:hover, :focus):nth-child(6)) {
      --target: 6;
    }

    &:has(a:is(:hover, :focus):nth-child(7)) {
      --target: 7;
    }

    &:has(a:is(:hover, :focus):nth-child(8)) {
      --target: 8;
    }

    &:has(a:is(:hover, :focus):nth-child(9)) {
      --target: 9;
    }

    &:has(a:is(:hover, :focus):nth-child(10)) {
      --target: 10;
    }

    &:has(a:is(:hover, :focus):nth-child(11)) {
      --target: 11;
    }

    &:has(a:is(:hover, :focus):nth-child(12)) {
      --target: 12;
    }

    &:has(a:is(:hover, :focus):nth-child(13)) {
      --target: 13;
    }

    &:has(a:is(:hover, :focus):nth-child(14)) {
      --target: 14;
    }

    &:has(a:is(:hover, :focus):nth-child(15)) {
      --target: 15;
    }
  }

  &:has(a:hover, :focus-within) {
    z-index: 1;
    transition: z-index 0.3s step-start;
  }
}
