// smoke effect
@if $icedream-fog-bg {
  #main {
    position: relative;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;

    &::before {
      opacity: .2;
      background-image: url('../images/whitefog.png');
      background-attachment: fixed;
      content: ' '; // sass-lint:disable-line variable-for-property
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      min-width: 100%;

      @if $icedream-fog-bg-blur {
          filter: blur(16px);
      }

      @if not($icedream-fog-bg-animated) {
        background-size: 200% 100%;
      }

      // animate it so it moves right to left slowly?
      @if $icedream-fog-bg-animated {
        background-repeat: repeat-x;
        background-size: 100% 100%;
        animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite,
          icedream-bg-pulse ease-in-out $icedream-fog-bg-pulse-animation-length infinite;
        transform: scale(2, 1) translateX(0);
        transform-origin: left;
        @keyframes icedream-bg-pulse {
          0% {
            opacity: .3;
          }
          22% {
            opacity: .2;
          }
          54% {
            opacity: .35;
          }
          77% {
            opacity: .16;
          }
          100% {
            opacity: .3;
          }
        }
        @keyframes icedream-bg-slide {
          to {
            transform: scale(2, 1) translateX(-50%);
          }
        }
      }
    }
  }
}