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

    &::before {
      opacity: $icedream-fog-base-opacity;
      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%;
        @if $icedream-fog-bg-pulse {
          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;
        } @else {
          animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite;
        }
        transform: scale(2, 1) translateX(0);
        transform-origin: left;
        @keyframes icedream-bg-pulse {
          0% {
            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
          }
          22% {
            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .12);
          }
          54% {
            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .15);
          }
          77% {
            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
          }
          100% {
            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
          }
        }
        @keyframes icedream-bg-slide {
          to {
            transform: scale(2, 1) translateX(-50%);
          }
        }
      }
    }
  }
}