:root {
  /* Timings */
  --pulsing-duration: 3s;
  --hover-transition: 0.5s;
  --click-transition: 0.25s;
}

/* Mobile and Tablet */
/* Hide all background elements, except mobile */
.background__scene * {
  display: none;
}

.background__base.background__base--mobile {
  display: unset;
}

/* Fills the entire viewport, centers background__scene */
.background {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.background__scene {
  position: relative; /* Necessary for absolute positioning of children */
}

.background__base {
  inset: 0;
  width: 100%;
  height: auto;
  animation: pulsing var(--pulsing-duration) ease-in-out infinite alternate;
}

@keyframes pulsing {
  from {
    opacity: 100%;
  }
  to {
    opacity: 40%;
  }
}

/* Desktop */
@media screen and (min-width: 992px) {
  /* Show all background elements, hide mobile background */
  .background__scene * {
    display: unset;
  }

  .background__base.background__base--mobile {
    display: none;
  }

  .background {
    z-index: unset;
  }

  .background__base {
    width: 100svw;
  }

  /* Background image should always cover viewport */
  @media (max-aspect-ratio: 1920/1080) {
    .background__base {
      width: auto;
      height: 100svh;
    }
  }

  /* Overlays, hover elements and video */
  .background__overlay,
  .background__hover-container,
  .loading-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
  }

  .loading-video {
    display: none; /* Is overwritten in background.js */
    transition: opacity var(--hover-transition);
    z-index: 2;
  }

  /* Style overlays */
  .background__overlay {
    opacity: 0;
    mix-blend-mode: screen;
  }

  .background__overlay.background__overlay--click {
    mix-blend-mode: normal;
  }

  /* Position hover elements */
  .background__hover-container {
    aspect-ratio: auto 2560 / 1440; /* Makes hover-container behave like the images */
  }

  .background__hover {
    position: absolute;
  }

  .background__hover--left {
    top: 19%;
    left: 7%;
    width: 22%;
    height: 68%;
  }

  .background__hover--top {
    top: 6%;
    left: 39%;
    width: 22%;
    height: 16%;
  }

  .background__hover--right-top {
    top: 3%;
    right: 4%;
    width: 26%;
    height: 53%;
    transform: rotate(-20deg);
    border-radius: 50%;
  }

  .background__hover--right-bottom {
    bottom: 8%;
    right: 3%;
    width: 20%;
    height: 37%;
    transform: skewY(-30deg);
  }

  /* Hover overlay animations */
  .background__overlay--click {
    transition: opacity var(--click-transition);
  }

  body:has(*:active) .background__overlay--click {
    opacity: 1;
  }

  .background__overlay--left,
  .background__overlay--right-top,
  .background__overlay--right-bottom {
    transition: opacity var(--hover-transition);
  }

  .background__scene:has(.background__hover--left:hover)
    .background__overlay--left {
    opacity: 1;
  }

  .background__scene:has(.background__hover--top:hover)
    .background__overlay--top {
    opacity: 1;
    animation: strobo 0.1s steps(2, jump-none) infinite;
  }

  @keyframes strobo {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .background__scene:has(.background__hover--right-top:hover)
    .background__overlay--right-top {
    opacity: 1;
  }

  .background__overlay--right-top {
    animation: pulsing2 0.75s ease-in-out infinite alternate;
  }

  @keyframes pulsing2 {
    0% {
      filter: opacity(1);
    }
    100% {
      filter: opacity(0.8);
    }
  }

  .background__scene:has(.background__hover--right-bottom:hover)
    .background__overlay--right-bottom {
    opacity: 1;
  }
}