@import "import";

.keyholeAnimation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: z(overlay);
  pointer-events: none;

  .overlay,
  .logoAnimationWrapper {
    width: 100%;
    height: 100%;
  }

  .mask {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .heart {
    position: absolute;
    transform: translate(calc(50% - 50px), calc(50% - 50px));
  }

  .logoAnimation {
    .background {
      fill: color(black);
    }
  }
}

.overlayTransition {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: z(overlay);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;

  .overlay,
  .logoAnimationWrapperOverlay {
    width: 100%;
    height: 100%;
  }

  #maskOverlay {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .heartOverlay {
    position: absolute;
    transform: translate(calc(50% - 50px), calc(50% - 50px));
  }

  .logoAnimationOverlay {
    .background {
      fill: color(black);
    }
  }
}