* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #FF512F, #F09819, #FDC830);
  animation: sunsetVibes 20s ease-in-out forwards;
}

@keyframes sunsetVibes {
  0% { background: linear-gradient(to top, #FF512F, #F09819, #FDC830); }
  100% { background: linear-gradient(to top, #0F2027, #203A43, #2C5364); }
}

/* Nubes */
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: floatCloud 60s linear infinite;
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
}
.cloud::before {
  width: 80px;
  height: 80px;
  top: -40px;
  left: 30px;
}
.cloud::after {
  width: 60px;
  height: 60px;
  top: -30px;
  left: -30px;
}
@keyframes floatCloud {
  0% { transform: translateX(-200px); }
  100% { transform: translateX(110vw); }
}
.cloud1 { top: 20%; left: -150px; width: 120px; height: 60px; animation-duration: 50s; }
.cloud2 { top: 30%; left: -300px; width: 150px; height: 70px; animation-duration: 65s; }
.cloud3 { top: 40%; left: -100px; width: 100px; height: 50px; animation-duration: 45s; }


.ocean {
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: 120px;
  background: #1E90FF;
  animation: wave 4s ease-in-out infinite alternate;
  z-index: 2;
  opacity: 0.6;
}
@keyframes wave {
  0% { border-radius: 0 100% 0 100%; }
  100% { border-radius: 100% 0 100% 0; }
}
.sand {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #F4A460;
  z-index: 3;
}


.logo-image {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 2s ease 1s forwards;
}
.logo {
  position: absolute;
  top: 25%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 2.8em;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  z-index: 4;
  opacity: 0;
  animation: fadeIn 2s ease 2s forwards;
}
.slogan {
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 1.3em;
  font-style: italic;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  z-index: 4;
  opacity: 0;
  animation: fadeIn 2s ease 3s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}


.plane {
  position: absolute;
  top: 40%;
  left: 110vw; 
  width: 120px;
  height: auto;
  z-index: 6;
  animation: flyLeft 10s linear forwards;
  filter: drop-shadow(2px 2px 8px rgba(255,255,255,0.6));
}

@keyframes flyLeft {
  0% {
    left: 110vw;
    top: 40%;
  }
  100% {
    left: -130px;
    top: 30%;
  }
}