/* General Page Styling */
body {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Ensures the body takes the full height of the viewport */
  margin: 0; /* Removes the default margin */
  padding: 0;
  overflow: hidden; /* Prevents scrollbars during animation */
}

.frontcloud {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  animation: revealScreen 15s ease-out forwards;
}

.left {
  left: 0;
  background: url("cloud.png") no-repeat center center;
  background-size: 100%;
}

.right {
  right: 0;
  background: url("cloud.png") no-repeat center center;
  background-size: 100%;
  /* The right cloud will be in a separate animation */
  animation: revealScreenRight 15s ease-out forwards;
}

@keyframes revealScreen {
  0% {
    transform: translateX(0); /* Start with clouds covering the screen */
  }
  50% {
    transform: translateX(-100%); /* Left cloud moves left */
  }
  100% {
    transform: translateX(-100%); /* Left cloud finishes off-screen */
  }
}

@keyframes revealScreenRight {
  0% {
    transform: translateX(0); /* Start with clouds covering the screen */
  }
  50% {
    transform: translateX(100%); /* Right cloud moves right */
  }
  100% {
    transform: translateX(100%); /* Right cloud finishes off-screen */
  }
}

/* Ocean & Waves */
#ocean {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Waves Animation */
.wave {
  position: absolute;
  width: 200%;
  height: 150px;
  background: rgba(255, 255, 255, 0.3);
  bottom: 0;
  border-radius: 50%;
  animation: waveMove 6s infinite linear alternate;
}

.wave1 {
  animation-delay: 0s;
}
.wave2 {
  animation-delay: 2s;
  opacity: 0.7;
}
.wave3 {
  animation-delay: 4s;
  opacity: 0.5;
}
.wave4 {
  animation-delay: 6s;
  opacity: 0.3;
}

@keyframes waveMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Floating Islands */
.island {
  position: absolute;
  width: 30%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  transition: transform 3s ease-in-out, 3s ease-in-out;
  animation: floatIsland 4s infinite ease-in-out alternate;
}

/* Continuous floating animation */
@keyframes floatIsland {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-15px);
  }
}

.island:hover {
  transform: scale(1.2) translateY(-20px);
}

/* Island Positions */
#island1 {
  top: 15%;
  left: 10%;
}
#island2 {
  top: 50%;
  left: 35%;
}
#island3 {
  top: 65%;
  left: 65%;
}
#island4 {
  top: 25%;
  left: 60%;
}

.island img {
  width: 100%;
}

/* Clouds */
.cloud {
  position: absolute;
  width: 500px;
  height: 250px;
  opacity: 90%;
  animation: moveClouds 12s infinite linear;
}

.cloud1 {
  top: 10%;
  left: 20%;
  animation-duration: 30s;
}
.cloud2 {
  top: 30%;
  left: 60%;
  width: 20%;
  animation-duration: 35s;
}
.cloud3 {
  top: 50%;
  left: 80%;
  width: 400px;
  animation-duration: 40s;
}
.cloud4 {
  top: 15%;
  left: 40%;
  width: 400px;
  animation-duration: 45s;
}
.cloud5 {
  top: 45%;
  left: 10%;
  width: 200px;
  animation-duration: 50s;
}
.cloud6 {
  top: 55%;
  left: 75%;
  width: 200px;
  animation-duration: 55s;
}

.cloud img {
  width: 100%;
}

/* Cloud Animation */
@keyframes moveClouds {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100vw);
  }
}