/* Decorative sea scene — sky, waves, sailship, fish, diver */
.sea-scene{
  position:absolute;
  left:0;right:0;
  top:0;
  height:calc(100svh + 140px);
  height:calc(100dvh + 140px);
  pointer-events:none;
  z-index:0;
  overflow:visible;
}

.sea-scene__sky{
  position:absolute;
  left:0;right:0;
  top:0;
  height:100svh;
  height:100dvh;
  background:
    radial-gradient(ellipse 70% 40% at 70% 18%, rgba(255,255,255,0.18) 0%, transparent 60%),
    linear-gradient(180deg,
      #6eb0d4 0%,
      #4a96bf 28%,
      #2f7399 58%,
      #1a4d6e 82%,
      #12263e 100%
    );
  z-index:0;
}
.sea-scene__clouds{
  display:block;
  width:100%;
  height:100%;
  opacity:0.9;
}
.sea-scene__cloud{animation:sea-cloud-drift 40s ease-in-out infinite alternate;}
.sea-scene__cloud--b{animation-duration:52s;animation-delay:-12s;}
.sea-scene__cloud--c{animation-duration:36s;animation-delay:-6s;}
.sea-scene__cloud--d{animation-duration:48s;animation-delay:-18s;opacity:0.85;}
@keyframes sea-cloud-drift{
  0%{transform:translateX(0);}
  100%{transform:translateX(3%);}
}

.sea-scene__surface{
  position:absolute;
  left:0;right:0;
  top:calc(100svh - 84px);
  top:calc(100dvh - 84px);
  height:140px;
  z-index:2;
  overflow:visible;
}

.sea-scene__waves{
  display:block;
  width:150%;
  margin-left:-25%;
  height:140px;
  overflow:visible;
}

.sea-scene__wave{transform-origin:center;}
.sea-scene__wave--back{animation:sea-wave-drift 10s ease-in-out infinite alternate;}
.sea-scene__wave--mid{animation:sea-wave-drift 7.5s ease-in-out infinite alternate-reverse;}
.sea-scene__wave--front{animation:sea-wave-drift 5.8s ease-in-out infinite alternate;}
@keyframes sea-wave-drift{
  0%{transform:translateX(-3%);}
  100%{transform:translateX(3%);}
}

.sea-scene__ship{
  position:absolute;
  left:10%;
  bottom:18px;
  width:min(28vw,168px);
  height:auto;
  z-index:3;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.28));
}
.sea-scene__ship-bob{
  transform-origin:50% 90%;
  animation:sea-ship-bob 4.2s ease-in-out infinite;
}
@keyframes sea-ship-bob{
  0%,100%{transform:translateY(0) rotate(-1.4deg);}
  50%{transform:translateY(5px) rotate(1.6deg);}
}

.sea-scene__fish{
  position:absolute;
  opacity:0.85;
  filter:drop-shadow(0 0 8px rgba(123,194,196,0.18));
  z-index:1;
}
.sea-scene__fish-body{
  transform-box:fill-box;
  transform-origin:center;
}
.sea-scene__fish--a{
  top:138vh;
  left:7%;
  width:min(12vw,76px);
  animation:sea-fish-patrol-a 18s ease-in-out infinite;
}
.sea-scene__fish--b{
  top:168vh;
  right:9%;
  width:min(11vw,64px);
  animation:sea-fish-patrol-b 22s ease-in-out infinite;
  animation-delay:-7s;
}
.sea-scene__fish--c{
  top:198vh;
  left:18%;
  width:min(9vw,52px);
  animation:sea-fish-patrol-a 16s ease-in-out infinite;
  animation-delay:-4s;
  opacity:0.7;
}
/* Default art faces left; flip when swimming right */
@keyframes sea-fish-patrol-a{
  0%{transform:translate(0,0) scaleX(-1);}
  45%{transform:translate(24vw,-12px) scaleX(-1);}
  50%{transform:translate(24vw,-12px) scaleX(1);}
  95%{transform:translate(0,0) scaleX(1);}
  100%{transform:translate(0,0) scaleX(-1);}
}
@keyframes sea-fish-patrol-b{
  0%{transform:translate(0,0) scaleX(1);}
  45%{transform:translate(-22vw,10px) scaleX(1);}
  50%{transform:translate(-22vw,10px) scaleX(-1);}
  95%{transform:translate(0,0) scaleX(-1);}
  100%{transform:translate(0,0) scaleX(1);}
}

@media (max-width:1024px){
  .sea-scene{
    height:calc(100svh + 110px);
    height:calc(100dvh + 110px);
  }
  .sea-scene__sky{
    background:linear-gradient(180deg,
      #6eb0d4 0%,
      #4a96bf 28%,
      #2f7399 58%,
      #1a4d6e 82%,
      #12263e 100%
    );
  }
  .sea-scene__surface{
    overflow:hidden;
  }
  .sea-scene__waves{
    width:100%;
    margin-left:0;
  }
}

@media (max-width:640px){
  .sea-scene__surface{top:calc(100svh - 64px);top:calc(100dvh - 64px);height:110px;}
  .sea-scene__waves{height:110px;}
  .sea-scene__ship{left:4%;bottom:10px;width:112px;}
  .sea-scene__fish--a{width:58px;left:3%;}
  .sea-scene__fish--b{width:48px;right:3%;}
  .sea-scene__fish--c{width:38px;}
}

@media (prefers-reduced-motion:reduce){
  .sea-scene__wave--back,
  .sea-scene__wave--mid,
  .sea-scene__wave--front,
  .sea-scene__ship-bob,
  .sea-scene__fish--a,
  .sea-scene__fish--b,
  .sea-scene__fish--c,
  .sea-scene__cloud{
    animation:none !important;
  }
}