$prefix: null;

@if setting-exists($settings, "prefix") {
  $prefix: "#{settings($settings,"prefix")}-";
}
@mixin color-gradients() {
  @if export($output, "color.gradients") {
    .background--gradient {
      position: relative;
      background-image: url(https://stil.style/assets/noise.jpg),
        linear-gradient(
          value(gradient-direction, to right bottom),
          value(gradient-from, value(primary)),
          value(gradient-to, value(secondary))
        );
      background-blend-mode: overlay, normal;
      animation: movieEffect 2s infinite steps(5);
      background-size: 200%, auto;

      @at-root {
        @keyframes movieEffect {
          0% {
            background-position: 50% 50%, 50% 50%;
          }
          20% {
            background-position: 40% 10%, 50% 50%;
          }
          40% {
            background-position: 70% 70%, 50% 50%;
          }
          60% {
            background-position: 30% 20%, 50% 50%;
          }
          80% {
            background-position: 60% 40%, 50% 50%;
          }
          100% {
            background-position: 10% 90%, 50% 50%;
          }
        }
      }

      // // &.grained{
      // &::before {
      //   content: "";
      //   width: 100%;
      //   height: 100%;
      //   background-color: red;
      //   display: block;
      //   position: absolute;
      //   left: 0;
      //   top: 0;
      // }
      // // }
    }
  }
}