/* Fullscreen overlay */
#preloader {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: linear-gradient(to top, #0077be 65%, #87ceeb 100%);
  z-index: 9999;
  opacity:1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
  overflow: hidden;
}

#preloader.fade-out { opacity:0; visibility:hidden; }

/* Clouds */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.8;
  animation: move-clouds linear infinite;
}
.cloud1 { width: 80px; height: 40px; top: 20px; left: -120px; animation-duration: 30s; }
.cloud2 { width: 50px; height: 25px; top: 60px; left: -180px; animation-duration: 40s; }
@keyframes move-clouds { 0% { transform: translateX(0); } 100% { transform: translateX(500px); } }

/* Boat centered */
.boat {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 100px;
  animation: boat-bob 3s ease-in-out infinite;
  z-index: 2;
}

/* Hull */
.hull {
  position: absolute;
  bottom: 0;
  width: 140px; height: 40px;
  background: #654321;
  border-radius: 0 0 25px 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

/* Mast */
.mast {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 6px; height: 60px;
  background: #333;
  transform: translateX(-50%);
  z-index: 3;
}

/* Sail */
.sail {
  position: absolute;
  top: 0; left: 50%;
  width: 60px; height: 60px;
  background: #ff4d4d;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: left center;
  animation: sail-flutter 1s infinite ease-in-out;
  transform: translateX(-10px);
  z-index: 4;
}

/* Boat reflection */
.reflection {
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  filter: blur(4px);
  animation: reflection-wave 3s ease-in-out infinite;
}

@keyframes sail-flutter { 0%,100% { transform: translateX(-10px) rotate(0deg); } 50% { transform: translateX(-10px) rotate(5deg); } }
@keyframes reflection-wave { 0%,100% { transform: scaleX(1) scaleY(1) translateY(0); } 50% { transform: scaleX(1.05) scaleY(0.9) translateY(2px); } }

/* Layered waves */
.waves {
  position: absolute; left: 50%;
  width: 500px; height: 50px;
  background: radial-gradient(circle at 20px 20px, rgba(255,255,255,0.5) 20%, transparent 20%) repeat-x;
  background-size: 40px 40px;
  transform: translateX(-50%);
  z-index: 1;
}
.wave1 { bottom: 20px; animation: move-waves 2s linear infinite; opacity: 0.8; }
.wave2 { bottom: 10px; animation: move-waves 3s linear infinite reverse; opacity: 0.5; }

@keyframes move-waves {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-48%) translateY(2px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* Boat bobbing */
@keyframes boat-bob {
  0%,100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); }
  25% { transform: translate(-50%, -50%) translateY(-5px) rotate(1deg); }
  50% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); }
  75% { transform: translate(-50%, -50%) translateY(5px) rotate(1deg); }
}

/* Company Name */
.company-name {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  z-index: 5;
}