/* Original nautical linework, drawn for the workspace. */
.hero .wordmark {
  margin-bottom: -36px;
  position: relative;
  z-index: 1;
}
.ocean-art {
  max-width: 1200px;
  margin: 0 auto 28px;
}
.ocean-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ocean-art figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: -9px auto 0;
  padding: 0 22px;
  color: #888e94;
  font: 8px var(--mono);
  letter-spacing: 1.3px;
}
.motion-toggle {
  border: 0;
  background: transparent;
  padding: 8px 0 8px 16px;
  color: #555e66;
  font: 9px var(--mono);
  white-space: nowrap;
}
.motion-toggle span {
  display: inline-block;
  width: 12px;
  margin-left: 6px;
}
.research-boat {
  animation: boat-float 5s ease-in-out infinite;
  transform-origin: 80px 78px;
}
.explorer-sub {
  animation: sub-drift 13s ease-in-out infinite;
}
.ocean-currents {
  animation: current-flow 9s ease-in-out infinite alternate;
}
.ocean-clouds {
  animation: cloud-drift 23s ease-in-out infinite alternate;
}
.ocean-buoy {
  animation: buoy-bob 3s ease-in-out infinite;
}
.sonar-rings {
  animation: sonar-pulse 4s ease-out infinite;
  transform-origin: 93px 0;
}
.sub-propeller {
  animation: propeller-turn 0.65s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.bubble {
  animation: bubble-rise 5s ease-in infinite;
}
.b2 {
  animation-delay: -1.7s;
}
.b3 {
  animation-delay: -3.4s;
}
.ocean-art[data-paused="true"] *,
.ocean-art[data-offscreen="true"] * {
  animation-play-state: paused !important;
}
@keyframes boat-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(4px) rotate(1deg);
  }
}
@keyframes sub-drift {
  0%,
  100% {
    transform: translate(-20px, 0) rotate(-1deg);
  }
  50% {
    transform: translate(17px, 8px) rotate(1deg);
  }
}
@keyframes current-flow {
  from {
    transform: translateX(-13px);
  }
  to {
    transform: translateX(13px);
  }
}
@keyframes cloud-drift {
  to {
    transform: translateX(20px);
  }
}
@keyframes buoy-bob {
  50% {
    transform: translateY(3px) rotate(4deg);
  }
}
@keyframes sonar-pulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  25% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@keyframes propeller-turn {
  50% {
    transform: scaleY(0.2);
  }
}
@keyframes bubble-rise {
  0% {
    opacity: 0;
    transform: translate(0, 12px);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-16px, -34px);
  }
}
@media (max-width: 700px) {
  .hero .wordmark {
    margin-bottom: -12px;
  }
  .ocean-art {
    margin: 0 -20px 25px;
  }
  .ocean-art svg {
    width: 150%;
    max-width: none;
    margin-left: -25%;
  }
  .ocean-annotations {
    display: none;
  }
  .ocean-art figcaption {
    padding: 0 25px;
    font-size: 6px;
    letter-spacing: 0.7px;
    margin-top: 5px;
    gap: 10px;
  }
  .motion-toggle {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-art * {
    animation: none !important;
  }
}