/* Ship Management Sequence */
.ship-sequence {
  position: relative;
  width: 100%;
  height: 200vh; /* Scroll duration */
  z-index: 3;
}

/* Gradient to blend seamlessly into the next white section */
.ship-sequence::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 70%, #ffffff 100%);
  z-index: 10;
  pointer-events: none;
}

.ship-sticky-container {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ship-ocean-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250vw;
  height: 250vh;
  margin-left: -125vw;
  margin-top: -125vh;
  background-image: url('../Assets/ocean.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.ship-water-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250vw;
  height: 250vh;
  margin-left: -125vw;
  margin-top: -125vh;
  object-fit: cover;
  z-index: 1; /* Below the ship */
  opacity: 0.6; /* Blend slightly with the ocean.jpg behind it */
  mix-blend-mode: overlay;
  pointer-events: none;
}

.ship-center-image {
  position: relative;
  z-index: 2;
  width: 25%;
  max-width: 400px;
  /* Zoomed out ship */
  height: auto;
  margin-top: -70vh;
  /* Negative margin to push it very next to the road */
  transform: translateY(0);
}

@media (max-width: 768px) {
  .ship-ocean-bg, .ship-water-video {
    width: 400vh;
    height: 400vh;
    margin-left: -200vh;
    margin-top: -200vh;
  }
  
  .ship-center-image {
    width: 50%;
    margin-top: -15vh; /* Lowered ship so truck perfectly overlaps the white container */
  }
}