.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-index-background);
  display: none;
}

.is-background-visual-show .background {
  display: block;
}

.background-visual-image {
  background-image: var(--background-visual-image);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: var(--background-visual-opacity);
  transform: scale(var(--background-visual-scale));
  filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
  z-index: 1;
}

.background-visual-video {
  opacity: var(--link-item-background-opacity);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.background-visual-video video {
  opacity: var(--background-visual-opacity);
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(var(--background-visual-scale));
  filter: blur(var(--background-visual-blur)) grayscale(var(--background-visual-grayscale));
}

.background-visual-accent {
  background-color: rgba(var(--theme-accent), var(--background-visual-accent));
  position: absolute;
  top: -1em;
  left: -1em;
  width: calc(100% + 2em);
  height: calc(100% + 2em);
  pointer-events: none;
  display: block;
  z-index: 2;
}

.background-visual-vignette {
  position: absolute;
  top: -1em;
  left: -1em;
  width: calc(100% + 2em);
  height: calc(100% + 2em);
  pointer-events: none;
  background-image: radial-gradient(circle,
      transparent var(--background-visual-vignette-end),
      rgba(0, 0, 0, var(--background-visual-vignette-opacity)) var(--background-visual-vignette-start));
  z-index: 3;
}