<template>
  <div class="onboarding-gradient">
    <div class="gradient"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style lang="scss">
.onboarding-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  .gradient {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    &:after {
      content: "";
      position: absolute;
      background: linear-gradient(
        -45deg,
        var(--gradient-1),
        var(--gradient-2),
        var(--gradient-3),
        var(--gradient-4),
        var(--gradient-5),
        var(--gradient-6)
      );
      width: 100%;
      height: 100%;
      background-size: 400% 400%;
      animation: gradient 30s ease infinite;
    }
  }
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
</style>
