@layer base {
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: system-ui;
  }
}

main {
  background: black;
  height: 100%;
  display: grid;
  place-items: center;
  background: #21212a;
  color: white;
  text-align: center;
}

nav {
  background-color: #111;
  color: #eee;
  border-radius: 1.25rem;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

a {
  padding: 0.5rem 1rem;
  position: relative;
  color: white;
  isolation: isolate;
  text-decoration: none;
  &.active {
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(to right, #cb1711 0%, #e7934e 100%);
      z-index: -1;
      border-radius: 0.75rem;
    }
  }
}

@layer demo {
  :root {
    --bounce: linear(
      0,
      1 37.8%,
      0.883 44.2%,
      0.855 47.1%,
      0.846 50%,
      0.853 52.7%,
      0.875 55.5%,
      1 65.5%,
      0.967 69.4%,
      0.957 73.1%,
      0.964 76.5%,
      1 84.5%,
      0.993 89.3%,
      1
    );
  }
}

a {
  view-transition-class: nav-item;
}
a.active::before {
  view-transition-name: active-nav-elem;
}
::view-transition-old(active-nav-elem),
::view-transition-new(active-nav-elem) {
  height: 100%;
}
::view-transition-group(nav-item) {
  z-index: 1;
}
::view-transition-group(active-nav-elem) {
  animation-timing-function: var(--bounce);
  animation-duration: 0.375s;
}