[data-component-id="solvy:animated_background"] {
  .animate-square {
    /* Initial state */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 8rem;

    /* 
   * You can configure the exact duration and delay in MS per step here!
   * Format: animation-name | duration | timing-function | delay | fill-mode
   */
    animation:
      move-up 400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards,
      move-left 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards,
      grow 400ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms forwards;
  }

  .animate-circle {
    /* Initial state */
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    width: auto;
    height: 8rem;
    aspect-ratio: 1 / 1;
    animation:
      move-right 400ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards,
      grow-circle 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms forwards;

    @media (max-width: 1023px) {
      max-height: 75vw;
    }
  }
}

@keyframes move-up {
  from {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  to {
    top: 0;
    transform: translate(-50%, 0);
  }
}

@keyframes move-down {
  from {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  to {
    top: 100%;
    transform: translate(-50%, -100%);
  }
}

@keyframes move-left {
  from {
    left: 50%;
    transform: translate(-50%, 0);
  }
  to {
    left: 0;
    transform: translate(0, 0);
  }
}

@keyframes move-right {
  from {
    left: 50%;
    transform: translate(-50%, -100%);
  }
  to {
    left: 100%;
    transform: translate(-100%, -100%);
  }
}

@keyframes grow {
  from {
    width: 8rem;
    height: 8rem;
  }
  to {
    width: 100%;
    height: 100%;
  }
}

@keyframes grow-circle {
  from {
    left: 100%;
    transform: translate(-100%, -100%);
    height: 8rem;
  }
  to {
    left: 100%;
    transform: translate(-100%, -100%);
    height: 100%;
  }
}