@layer stage {
  .ocean {
    --brightness: 1;
    --shadow: -20px 0px 10px #00000055;

    position: relative;
    height: 100svh;
    min-height: 600px;
    background-image: linear-gradient(
      to bottom,
      hsl(198 calc(var(--brightness) * 100%) 50%),
      80%,
      hsl(198 calc(var(--brightness) * 100%) 100%)
    );
    overflow: hidden;
  }

  .stormcontrol {
    display: none;
    position: absolute;
    top: 50%;
    width: 20vh;
    background-color: hsl(198, 100%, 86%);
    transform-origin: 50% 50%;
    transform: rotate(90deg);
    z-index: 100;
  }

  .cloud {
    position: absolute;
    top: -100px;
    fill: #fff;
    stroke: #000;
    filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.95));

    &.z-06 {
      animation: cloudRoll 120s -60s linear infinite, cloudDangle 1s ease-in-out infinite alternate;
    }

    &.z-08 {
      animation: cloudRoll 90s -10s linear infinite, cloudDangle 1s ease-in-out infinite alternate-reverse;
    }

    .rope {
      stroke: #333;
      stroke-width: 1;
    }
  }

  .water {
    position: absolute;
    left: 50%;
    width: 110%;
    min-width: 1000px;
    height: 170px;
    fill: #fff;
    stroke: #000;
    fill: #0AA3CF;
    stroke: #fff;
    transform: translateX(-50%);
    overflow-x: hidden;

    .wave {
      animation: wave 1.5s var(--delay, 0) infinite var(--direction, alternate) ease-in-out both;
    }

    &.z-07 {
      --movement: 10px;
      --delay: -0.4s;
      --direction: alternate-reverse;
      bottom: 150px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.95));
    }

    &.z-08 {
      --movement: 20px;
      --delay: -0.8s;
      bottom: 120px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.85));
    }

    &.z-09 {
      --movement: 30px;
      --delay: -1.2s;
      --direction: alternate-reverse;
      bottom: 90px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.95));
    }

    &.z-10 {
      --movement: 40px;
      --delay: -1.6s;
      bottom: 60px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.9));
    }

    &.z-11 {
      --movement: 50px;
      --delay: -2s;
      --direction: alternate-reverse;
      bottom: 30px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 0.95));
    }

    &.z-12 {
      --movement: 60px;
      --delay: -2.4s;
      bottom: 0px;
      filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 1));
    }
  }

  .lifebelt {
    position: absolute;
    left: 50%;
    bottom: 140px;
    stroke: #000;
    stroke-width: 5;
    offset-path: path('M0,0 C2,.1 2,.1 4,0');
    offset-anchor: top;
    animation: roll 2s infinite alternate linear both, lift 4s -1s infinite ease-in-out both;
    filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 1));
    cursor: pointer;
  }

  .boat-group {
    position: absolute;
    left: calc(100vw + 500px);
    bottom: 220px;
    offset-path: path('M0,0 C2,.1 2,.1 4,0');
    offset-anchor: top right;
    animation: roll 1.25s -0.5s infinite alternate linear both, lift 3s -1.5s infinite ease-in-out both,
      sail 10s linear both;
    filter: drop-shadow(var(--shadow)) brightness(calc(var(--brightness) * 1));
  }

  .boat {
    stroke: #000;
    stroke-width: 4;
  }

  .snail {
    position: absolute;
    left: 110px;
    bottom: 10px;
    stroke: #000;
    stroke-width: 10;
    z-index: -1;

    .iris-l,
    .iris-r,
    .pupil-l,
    .pupil-r {
      animation: look linear 10s;
    }
  }

  @keyframes cloudRoll {
    from {
      left: -300px;
    }
    to {
      left: 100%;
    }
  }

  @keyframes cloudDangle {
    from {
      transform-origin: 50% -100%;
      transform: rotate(-1deg);
    }
    to {
      transform-origin: 50% -100%;
      transform: rotate(1deg);
    }
  }

  @keyframes roll {
    0% {
      offset-distance: 0%;
    }
    100% {
      offset-distance: 100%;
    }
  }

  @keyframes lift {
    0%,
    100% {
      transform: translate(-5px, 0);
    }
    50% {
      transform: translate(5px, 10px);
    }
  }

  @keyframes sail {
    to {
      left: 0;
      display: none;
    }
  }

  @keyframes look {
    from {
      transform: translate(5%, 0);
    }
    to {
      transform: translate(-5%, 0);
    }
  }

  @keyframes wave {
    from {
      transform: translate(calc(var(--movement, 50px) * -1), 0);
    }
    to {
      transform: translate(var(--movement, 50px), 0);
    }
  }
}