.navigation-gradient {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(120px, 38vh);
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.navigation-gradient.is-disabled {
  opacity: 0;
}

.navigation-gradient--top {
  top: 0;
  bottom: auto;
  display: none;
  transform: scaleY(-1);
  z-index: 999;
}

.navigation-gradient.navigation-gradient--top::after {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0) 100%
  );
}

.navigation-gradient::after,
.navigation-gradient span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.navigation-gradient::after {
  content: "";
  z-index: 9;
  background: transparent;
}

.navigation-gradient span {
  z-index: var(--layer);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent var(--mask-start),
    #000 var(--mask-full-start),
    #000 var(--mask-full-end),
    transparent var(--mask-end)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent var(--mask-start),
    #000 var(--mask-full-start),
    #000 var(--mask-full-end),
    transparent var(--mask-end)
  );
}

.navigation-gradient span:nth-child(1) {
  --layer: 1;
  --blur: 1px;
  --mask-start: 0%;
  --mask-full-start: 12.5%;
  --mask-full-end: 25%;
  --mask-end: 37.5%;
}

.navigation-gradient span:nth-child(2) {
  --layer: 2;
  --blur: 2px;
  --mask-start: 12.5%;
  --mask-full-start: 25%;
  --mask-full-end: 37.5%;
  --mask-end: 50%;
}

.navigation-gradient span:nth-child(3) {
  --layer: 3;
  --blur: 3px;
  --mask-start: 25%;
  --mask-full-start: 37.5%;
  --mask-full-end: 50%;
  --mask-end: 62.5%;
}

.navigation-gradient span:nth-child(4) {
  --layer: 4;
  --blur: 5px;
  --mask-start: 37.5%;
  --mask-full-start: 50%;
  --mask-full-end: 62.5%;
  --mask-end: 75%;
}

.navigation-gradient span:nth-child(5) {
  --layer: 5;
  --blur: 8px;
  --mask-start: 50%;
  --mask-full-start: 62.5%;
  --mask-full-end: 75%;
  --mask-end: 87.5%;
}

.navigation-gradient span:nth-child(6) {
  --layer: 6;
  --blur: 12px;
  --mask-start: 62.5%;
  --mask-full-start: 75%;
  --mask-full-end: 87.5%;
  --mask-end: 100%;
}

.navigation-gradient span:nth-child(7) {
  --layer: 7;
  --blur: 16px;
  --mask-start: 75%;
  --mask-full-start: 87.5%;
  --mask-full-end: 100%;
  --mask-end: 112.5%;
}

.navigation-gradient span:nth-child(8) {
  --layer: 8;
  --blur: 20px;
  --mask-start: 87.5%;
  --mask-full-start: 100%;
  --mask-full-end: 112.5%;
  --mask-end: 125%;
}

@media (max-width: 540px) {
  .navigation-gradient--top {
    display: block;
  }
}