// $background-image: (
//   url: url(../img/gal-1.jpeg),
//   position: center center,
//   size: cover,
//   attachment: fixed,
// );
// $fallback: color('primary');

.l-header {
  position: relative;

  @include respond-to('large') {
  }

  > .l-nav:not(.l-nav--fixed) + .l-header__content {
    height: calc(100vh - #{$navbar-height});
  }

  > .l-nav.l-nav--fixed + .l-header__content {
    height: 100vh;
  }

  &__content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 100%;
  }
}

.animation-box {
  position: relative;
  @include flex-center;
}

.gooey {
  //background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
  position: absolute;
  font-size: size('lg');
  animation: morph 3s linear infinite;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;

  &::before,
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }

  &--1 {
    width: 150px;
    height: 144px;
    // background-image: linear-gradient(120deg, color('primary') 0%, color('secondary') 100%);
    background-image: linear-gradient(120deg, hsl(186, 99, 60) 0%, hsl(287, 93, 53) 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

    // &::before,
    // &::after {
    //   left: 0;
    //   top: 0;
    //   border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    //   box-shadow: 5px 5px 89px transparentize(hsl(287, 93, 53), 0.8);
    //   will-change: border-radius, transform, opacity;
    //   animation-delay: 200ms;
    //   // background-image: linear-gradient(120deg, rgba(0, 67, 255, 0.55) 0%, rgba(0, 103, 255, 0.89) 100%);
    // }

    // &::before {
    //   animation: morph 3s linear infinite;
    //   opacity: 0.21;
    //   animation-duration: 1.5s;
    // }

    // &::after {
    //   animation: morph 3s linear infinite;
    //   animation-delay: 400ms;
    //   opacity: 0.89;
    //   content: attr(data-text);
    //   line-height: 120px;
    //   text-indent: 5rem;
    // }
  }

  &--2 {
    left: 4rem;
    top: 12rem;
    width: 225px;
    height: 167px;
    background-image: linear-gradient(120deg, hsl(305, 58, 63) 0%, hsl(287, 93, 53) 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

    // &::before,
    // &::after {
    //   left: 0;
    //   top: 0;
    //   border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    //   box-shadow: 5px 5px 89px transparentize(hsl(287, 93, 53), 0.8);
    //   will-change: border-radius, transform, opacity;
    //   animation-delay: 200ms;
    //   // background-image: linear-gradient(120deg, rgba(0, 67, 255, 0.55) 0%, rgba(0, 103, 255, 0.89) 100%);
    // }

    // &::before {
    //   animation: morph 3s linear infinite;
    //   opacity: 0.21;
    //   animation-duration: 1.5s;
    // }

    // &::after {
    //   animation: morph 3s linear infinite;
    //   animation-delay: 400ms;
    //   opacity: 0.89;
    //   content: attr(data-text);
    //   line-height: 120px;
    //   text-indent: 5rem;
    // }
  }

  &--3 {
    left: 29rem;
    top: -5rem;
    width: 180px;
    height: 117px;
    background-image: linear-gradient(120deg, hsl(331, 72, 57) 0%, color('tertiary') 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

    // &::before,
    // &::after {
    //   left: 0;
    //   top: 0;
    //   border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    //   box-shadow: 5px 5px 89px transparentize(color('tertiary'), 0.8);
    //   will-change: border-radius, transform, opacity;
    //   animation-delay: 200ms;
    //   // background-image: linear-gradient(120deg, rgba(0, 67, 255, 0.55) 0%, rgba(0, 103, 255, 0.89) 100%);
    // }

    // &::before {
    //   animation: morph 3s linear infinite;
    //   opacity: 0.21;
    //   animation-duration: 1.5s;
    // }

    // &::after {
    //   animation: morph 3s linear infinite;
    //   animation-delay: 400ms;
    //   opacity: 0.89;
    //   content: attr(data-text);
    //   line-height: 120px;
    //   text-indent: 5rem;
    // }
  }

  // &--4 {
  //   right: 15rem;
  //   top: 14rem;
  //   width: 58px;
  //   height: 58px;
  //   background-image: linear-gradient(120deg, color('primary'), color('secondary') 100%);
  //   border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

  //   &::before,
  //   &::after {
  //     left: 0;
  //     top: 0;
  //     border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  //     box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
  //     will-change: border-radius, transform, opacity;
  //     animation-delay: 200ms;
  //     // background-image: linear-gradient(120deg, rgba(0, 67, 255, 0.55) 0%, rgba(0, 103, 255, 0.89) 100%);
  //   }

  //   &::before {
  //     animation: morph 3s linear infinite;
  //     opacity: 0.21;
  //     animation-duration: 1.5s;
  //   }

  //   &::after {
  //     animation: morph 3s linear infinite;
  //     animation-delay: 400ms;
  //     opacity: 0.89;
  //     content: attr(data-text);
  //     line-height: 120px;
  //     text-indent: 5rem;
  //   }
  // }

  // &--5 {
  //   right: 10rem;
  //   bottom: -17rem;
  //   width: 40rem;
  //   height: 40rem;
  //   background-image: linear-gradient(120deg, color('primary'), color('secondary') 100%);
  //   border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;

  //   &::before,
  //   &::after {
  //     left: 0;
  //     top: 0;
  //     border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  //     box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
  //     will-change: border-radius, transform, opacity;
  //     animation-delay: 200ms;
  //     // background-image: linear-gradient(120deg, rgba(0, 67, 255, 0.55) 0%, rgba(0, 103, 255, 0.89) 100%);
  //   }

  //   &::before {
  //     animation: morph 3s linear infinite;
  //     opacity: 0.21;
  //     animation-duration: 1.5s;
  //   }

  //   &::after {
  //     animation: morph 3s linear infinite;
  //     animation-delay: 400ms;
  //     opacity: 0.89;
  //     content: attr(data-text);
  //     line-height: 120px;
  //     text-indent: 5rem;
  //   }
  // }
}