.background-image {
  @include background-cover();
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;

  &.reveal {
    filter: none;
    will-change: transform, opacity;
    animation: progressive-reveal 1s ease-out;
  }

  &.preview {
    filter: blur(1vw);
    transform: scale(1.05);
  }

  &.full-image {
    z-index: 1;
    transition: all $transition-duration;
  }
}

@keyframes progressive-reveal {
  0% {
    // transform: scale(1.05);
    opacity: .2;
  }

  100% {
    // transform: scale(1);
    opacity: 1;
  }
}

// General class for any lazy load container
.has-lazyload {
  overflow: hidden;
  position: relative;
}