.pagenav {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  z-index: 40;
  padding: 32px 0 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
}

.pagenav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.pagenav::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  bottom: 0;
  height: 140px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.pagenav__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 1px;
  background: #222222;
}

.pagenav__progress {
  display: block;
  height: 100%;
  background: #3F3F3F;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.pagenav__list {
  position: relative;
  height: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagenav__item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) / 7 * 100%);
}

.pagenav__item::after {
  content: "";
  position: absolute;
  left: -0.5px;
  bottom: -5px;
  width: 1px;
  height: 10px;
  background: rgba(245, 245, 245, 0.3);
}

.pagenav__link {
  position: absolute;
  bottom: -14px;
  left: 0;
  display: block;
  padding: 8px 10px 30px;
  color: rgba(245, 245, 245, 0.4);
  font: 500 14px/1.2 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: color 0.25s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.pagenav__item:first-child .pagenav__link {
  transform: translate(-10px, 4px);
}

.pagenav__item:last-child .pagenav__link {
  transform: translate(calc(-100% + 10px), 4px);
}

.pagenav:hover::before,
.pagenav:focus-within::before {
  opacity: 1;
}

.pagenav:hover .pagenav__link,
.pagenav:focus-within .pagenav__link {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pagenav:hover .pagenav__item:first-child .pagenav__link,
.pagenav:focus-within .pagenav__item:first-child .pagenav__link {
  transform: translate(-10px, 0);
}

.pagenav:hover .pagenav__item:last-child .pagenav__link,
.pagenav:focus-within .pagenav__item:last-child .pagenav__link {
  transform: translate(calc(-100% + 10px), 0);
}

.pagenav__link:hover,
.pagenav__link:focus-visible,
.pagenav__link[aria-current="true"] {
  color: var(--white);
}

@media (max-width: 900px) {
  .pagenav {
    padding: 16px 0 24px;
  }

  .pagenav__track {
    bottom: 24px;
  }

  .pagenav__list {
    height: 0;
  }

  .pagenav::before,
  .pagenav__link {
    display: none;
  }

  .pagenav__item::after {
    left: -0.5px;
  }
}