Fade in effect on the loading screen

Hey everyone! I feel like I am super close to getting this but would love to get some help. I'm working on adding a cool find-in effect to my homepage as it loads up. Right now, it's taking a bit too long to fade in I would love to reduce the time to 3 seconds, and my navigation bar becomes inactive once the homepage opens. Any ideas on where I might have made a mistake? Thanks a bunch!

URL: https://puma-paddlefish-k7zy.squarespace.com/

Password: Love365

This is the code I have so far: 

/*CREATING AN ANIMATED LOADING SCREEN FOR SQUARESPACE (7.0 & 7.1)*/
//To style the whole screen container
.loading-screen {
   animation: goodbyeScreen .5s forwards 3.5s cubic-bezier(.5,-.75,.7,2);
  background-color: #F5E7DA;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
}

//To style the logo or image
.loading-screen-image {
  animation: scrollingLogo 1 3s linear;
  background-image: url(https://static1.squarespace.com/static/65716cb6fc3d2648e7dc1b5c/t/657afe18707db71ff14c8bba/1702559256450/2884803_diamond_love_surprise_valentine%27s-day_wedding_icon.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 135px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 637px;
}

//Animation for the sliding screen
@keyframes goodbyeScreen {
  to {
	-webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
	opacity: 0;
  }
}

Your effect is still covering the whole screen, it's just invisible because of opacity: 0, so all elements on the home page will not be clickable.

You can consider adding code to make loading screen will slide down/up/left/right to make it not cover screen. Like this example: https://tuanphan3.squarespace.com/1images-loading

pass: abc

If you need to adjust code, let me know, I will give new code