mue/src/features/background/scss/index.scss

@use 'photoinformation' as *;
@use 'scss/mixins' as *;

#backgroundImage {
  height: 100vh;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-attachment: fixed !important;
  zoom: 100% !important;
  position: relative;
  z-index: -2;
}

#backgroundOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-attachment: fixed !important;
  pointer-events: none;
  z-index: -1;
  transition: opacity 1.2s ease-in-out;
}

#backgroundFilterOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  transition: backdrop-filter 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.backgroundPreload {
  opacity: 0;
}

#backgroundVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.fade-in {
  @include animation('fadein 0.8s ease-in-out');
}

@include keyframes(fadein) {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}