.sea-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--sea-water, 0);
  clip-path: inset(var(--sea-wipe, 100%) 0 0);
  background: #08214c;
  pointer-events: none;
}

.sea-water::before,
.sea-water::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.sea-water::before {
  inset: -6%;
  background: #08214c url('assets/sea-water.webp') center / cover no-repeat;
}

[data-sea-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.sea-water::after {
  inset: 0;
  background: radial-gradient(ellipse at 36% 42%, #58d5df22, transparent 51%),
    radial-gradient(ellipse at 49% 60%, transparent 25%, #020a2394 100%);
}

.lift[data-sea-phase] .sea-water::before { animation: sea-swell 18s ease-in-out infinite alternate; }
.lift[data-sea-phase] .sea-wake-flow { animation: sea-wake-stream 6s linear infinite; }
.lift[data-sea-live] [data-sea-canvas] { visibility: visible; }
.lift[data-sea-live] .sea-water::before { animation: none; }
.lift[data-sea-live] .sea-water::after { opacity: .27; }
.lift[data-sea-live] [data-sea-wake-fallback],
.lift[data-sea-live] .sea-wake-flow { display: none; }

@keyframes sea-swell {
  from { transform: translate(-1.8%, -2%) scale(1); }
  to { transform: translate(1.8%, 2%) scale(1.035); }
}

@keyframes sea-wake-stream {
  to { stroke-dashoffset: 176; }
}

@media (prefers-reduced-motion: reduce) {
  .lift[data-sea-phase] .sea-water::before,
  .lift[data-sea-phase] .sea-wake-flow { animation: none; }
}