<!-- Sky & Sea -->
  <div class="sea-sky">
    <div class="sky">
      <div class="sky__clouds">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="sky__clouds">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="sky__clouds">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="sea">
      <div class="sea__line-1"></div>
      <div class="sea__line-2"></div>
      <div class="sea__line-3"></div>
      <div class="sea__line-4"></div>
      <div class="sea__line-5"></div>
    </div>
  </div>


  <!-- Whale -->
  <div class="whale">
    <div class="whale__main-body">
      <div class="whale__mouth"></div>
      <div class="whale__eye"></div>
    </div>
    <div class="whale__fluke">
      <div class="whale__fluke__left"></div>
      <div class="whale__fluke__right"></div>
    </div>
    <div class="whale__containers">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="whale__water-shower">
    </div>
  </div>

  <!-- Whale spalsh -->
  <div class="whale-splash"></div>

/*=============================================
=            Variables            =
=============================================*/
$whale: #59b6e5;
$dark: #5a5a5a;

/*=====  End of Variables  ======*/

/*=============================================
=            Mixins            =
=============================================*/

@mixin box($size) {
  width: $size;
  height: $size;
}

@mixin round($arg: 50%) {
  border-radius: $arg;
}

@mixin center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*=====  End of Mixins  ======*/

/*=============================================
=            Resets            =
=============================================*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*=====  End of Reset ======*/

/*=============================================
=            General styles                   =
=============================================*/

body {
  @include center();
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/*=====  End of General styles ======*/
/*=============================================
=            Main styles                      =
=============================================*/

.whale {
  position: relative;
  scale: 0.7;
  margin-top: 80px;
  transform-origin: center top;
  // animation: whale 4s 2s ease-in-out forwards infinite;
  animation: whale 6s ease-in-out forwards infinite;
  z-index: 1;

  &__main-body {
    background-color: $whale;
    border: 6px solid $dark;
    border-radius: 0 0 150px 120px;
    width: 300px;
    height: 150px;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      @include box(inherit);
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0.3;
      box-shadow: inset -10px -30px 0 2px darken($whale, 10%),
        inset 8px -20px 0 2px darken($whale, 10%);
    }
  }

  &__containers {
    position: absolute;
    bottom: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    margin-left: 40px;

    div {
      @include box(40px);
      background-color: $whale;
      box-shadow: inset 0 0 0 3px $whale;
      border: 4px solid $dark;
      background-image: repeating-linear-gradient(
        90deg,
        $whale,
        $whale 2px,
        $dark 5px,
        $dark 4px
      );

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(5),
      &:nth-child(6),
      &:nth-child(10) {
        opacity: 0;
      }
    }
  }

  &__mouth {
    width: 100px;
    height: 100px;
    background: gainsboro;
    position: absolute;
    top: 80px;
    left: 0;
    rotate: -6deg;
    background-image: radial-gradient(
      circle at 232px -20px,
      $whale 60%,
      white 60%
    );

    &::before {
      content: '';
      border-bottom-right-radius: 50%;
      border-right: 6px solid transparent;
      width: inherit;
      height: 28px;
      border-bottom: 6px solid $dark;
      position: absolute;
      bottom: 96%;
      left: 0;
    }
  }

  &__eye {
    @include box(20px);
    @include round();
    border: 2px solid #fff;
    position: absolute;
    top: 46px;
    left: 100px;
    background-color: #000;
    position: relative;
    animation: eye 4s 2s linear forwards infinite;

    &::after {
      content: '';
      @include round();
      background-color: #fff;
      position: absolute;
      @include box(8px);
      top: 0;
      right: 0;
    }
  }

  &__fluke {
    @include box(80px);
    position: absolute;
    bottom: 89%;
    right: 20px;
    transform-origin: bottom right;
    animation: fluke 3s ease-in-out infinite alternate;

    &::after {
      content: '';
      position: absolute;
      height: 50px;
      width: 100px;
      background-color: $whale;
      bottom: -11px;
      left: 68px;
      width: 24px;
    }

    div {
      @include box(inherit);
      background-color: $whale;
      border-radius: 0 100% 0 100%;
      position: absolute;
      top: 0;
      border: 6px solid $dark;
    }

    &__left {
      transform-origin: bottom right;
      left: 20px;
    }

    &__right {
      transform-origin: bottom right;
      rotate: 95deg;
      left: -10px;
    }
  }
}

// Whale splash
.whale-splash {
  border-radius: 50%;
  box-shadow: 0 0 4px 10px rgba(blue, 0.05);
  position: absolute;
  width: 200px;
  height: 100px;
  top: 52%;
  left: 50%;
  opacity: 0;
  transform: scaleY(0.4) translateX(-55%);
  animation: whalesplash 6s ease-in-out forwards infinite;
}

// sea and sky
.sea-sky {
  background: #000;
  height: 100vh;
  width: 100vw;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

// Sea
.sea {
  background-image: linear-gradient(0deg, #4d82b0, #8ecbeb);
  position: relative;
  flex: 1;

  &::after {
    content: '';
    background-color: rgba(#000, 0.04);
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  &__line-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #d2f0f8;
    filter: blur(16px);
  }

  &__line-2,
  &__line-3,
  &__line-4,
  &__line-5 {
    background-color: rgba(#fff, 0.05);
    border-radius: 50%;
    position: absolute;
    width: 40%;
    height: 15px;
    right: 20%;
    top: 100px;
    animation: moveright 15s alternate infinite;
  }

  &__line-3 {
    right: auto;
    left: 0;
    scale: 0.3;
  }

  &__line-4 {
    top: 70%;
    scale: 0.5;
  }

  &__line-5 {
    top: 60%;
    right: auto;
    left: 0;
    scale: 0.4;
    background-color: rgba($dark, 0.1);
  }
}

// sky
.sky {
  background-color: #cbecf7;
  background-image: linear-gradient(0deg, #cbecf7, #69baff);
  position: relative;
  flex: 1;

  &__clouds {
    position: absolute;
    bottom: 0;
    right: 80%;
    height: 200px;
    width: 30%;

    &:nth-child(1) {
      transform-origin: bottom left;
      scale: 0.7;
      animation: moveright 15s linear infinite alternate;
    }

    &:nth-child(2) {
      left: 80%;
      opacity: 0.5;
    }

    &:nth-child(3) {
      left: 70%;
      bottom: 80%;
      opacity: 0.3;
      overflow: hidden;
      scale: 0.6;
      transform-origin: bottom right;
      animation: moveright 15s linear infinite alternate;
    }

    div {
      @include box(100px);
      @include round();
      position: absolute;
      bottom: 0;
      background-color: #fff;

      &:nth-child(1) {
        top: 90%;
      }

      &:nth-child(2) {
        left: 60px;
        top: 75%;
      }
      &:nth-child(3) {
        left: 100px;
        top: 80%;
      }
      &:nth-child(4) {
        left: 150px;
        top: 72%;
      }
      &:nth-child(5) {
        left: 200px;
        top: 72%;
      }
    }
  }
}

/*=====  End of Main Styles ======*/

/*=============================================
=            Keyframes            =
=============================================*/

@keyframes whale {
  10% {
    transform: rotate(5deg);
  }

  20% {
    transform: rotate(-5deg);
  }

  30% {
    transform: rotate(5deg);
  }

  50% {
    transform: translateY(-100px) rotate(45deg);
  }

  80% {
    transform: translateY(20px) rotate(-5deg);
  }
}

@keyframes fluke {
  from {
    rotate: 25deg;
  }
  to {
    rotate: 45deg;
  }
}

@keyframes whalesplash {
  60% {
    transform: scaleY(0.4) translateX(-55%);
    opacity: 0;
  }
  80% {
    transform: scaleY(0.4) translateX(-55%) scaleX(2);
    box-shadow: 0 0 20px 20px rgba(lightblue, 0.6),
      inset 0 0 20px 20px rgba(lightblue, 0.6);
    opacity: 1;
  }
}

@keyframes moveright {
  to {
    transform: translateX(150%);
  }
}

@keyframes eye {
  60% {
    rotate: 140deg;
  }
}

/*=====  End of Keyframes  ======*/