/* Decorative homepage atmosphere. Activated by savokhin-parallax-v1.js. */
html.savokhin-parallax-ready {
  background-color: #0d0d15;
  background-image: url("../themes/sp-theme-master/img/bg.jpg");
  background-position: 0 0;
  background-repeat: repeat;
}

/* Keep the 1920px background from tiling horizontally on wide displays. */
@media (min-width: 1921px) {
  html.savokhin-parallax-ready,
  body.body {
    background-size: 100% auto;
    background-repeat: repeat-y;
  }
}

html.savokhin-parallax-ready body.body {
  position: relative;
  z-index: 0;
  background-color: transparent !important;
  background-image: none !important;
}

.savokhin-atmosphere {
  --savokhin-fog-x: 0px;
  --savokhin-fog-y: 0px;
  --savokhin-sparks-x: 0px;
  --savokhin-sparks-y: 0px;
  position: fixed;
  z-index: -1;
  inset: -220px;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.savokhin-atmosphere__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.savokhin-atmosphere__fog {
  background:
    radial-gradient(ellipse 43% 36% at 86% 12%, rgba(247, 184, 78, 0.18) 0%, rgba(165, 116, 40, 0.09) 34%, rgba(13, 13, 21, 0) 72%),
    radial-gradient(ellipse 38% 32% at 22% 30%, rgba(78, 112, 80, 0.13) 0%, rgba(37, 65, 51, 0.07) 38%, rgba(13, 13, 21, 0) 76%),
    radial-gradient(ellipse 48% 35% at 61% 67%, rgba(176, 95, 35, 0.12) 0%, rgba(91, 54, 34, 0.07) 40%, rgba(13, 13, 21, 0) 77%),
    radial-gradient(ellipse 34% 30% at 12% 86%, rgba(115, 78, 42, 0.1) 0%, rgba(13, 13, 21, 0) 74%);
  opacity: 0.82;
  transform: translate3d(var(--savokhin-fog-x), var(--savokhin-fog-y), 0) scale(1.035);
}

.savokhin-atmosphere__sparks {
  background-image:
    radial-gradient(ellipse, rgba(255, 201, 92, 0.95) 0 13%, rgba(255, 119, 24, 0.7) 25%, rgba(255, 83, 15, 0) 72%),
    radial-gradient(ellipse, rgba(255, 219, 132, 0.9) 0 12%, rgba(255, 109, 18, 0.58) 28%, rgba(255, 73, 8, 0) 70%),
    radial-gradient(ellipse, rgba(255, 181, 65, 0.88) 0 15%, rgba(244, 85, 13, 0.48) 31%, rgba(230, 58, 5, 0) 72%),
    radial-gradient(ellipse, rgba(255, 206, 111, 0.86) 0 12%, rgba(255, 119, 19, 0.52) 28%, rgba(239, 74, 6, 0) 72%),
    radial-gradient(ellipse, rgba(255, 172, 51, 0.82) 0 14%, rgba(251, 90, 13, 0.42) 31%, rgba(226, 52, 5, 0) 73%),
    radial-gradient(ellipse, rgba(255, 221, 142, 0.82) 0 12%, rgba(255, 112, 20, 0.5) 27%, rgba(230, 60, 5, 0) 72%),
    radial-gradient(ellipse, rgba(255, 183, 68, 0.84) 0 13%, rgba(247, 91, 13, 0.46) 30%, rgba(230, 57, 5, 0) 72%),
    radial-gradient(ellipse, rgba(255, 214, 124, 0.78) 0 11%, rgba(255, 111, 21, 0.48) 26%, rgba(232, 62, 7, 0) 70%),
    radial-gradient(ellipse, rgba(255, 176, 57, 0.8) 0 14%, rgba(244, 82, 11, 0.43) 31%, rgba(221, 49, 4, 0) 72%),
    radial-gradient(ellipse, rgba(255, 207, 111, 0.8) 0 12%, rgba(255, 105, 16, 0.47) 28%, rgba(230, 58, 4, 0) 71%),
    radial-gradient(ellipse, rgba(255, 178, 62, 0.76) 0 13%, rgba(247, 88, 12, 0.4) 30%, rgba(221, 50, 5, 0) 72%),
    radial-gradient(ellipse, rgba(255, 219, 137, 0.78) 0 11%, rgba(255, 110, 19, 0.46) 27%, rgba(232, 62, 7, 0) 70%),
    radial-gradient(ellipse, rgba(255, 189, 76, 0.8) 0 13%, rgba(250, 92, 14, 0.43) 29%, rgba(225, 52, 5, 0) 72%),
    radial-gradient(ellipse, rgba(255, 211, 117, 0.76) 0 12%, rgba(255, 106, 18, 0.44) 28%, rgba(230, 59, 6, 0) 71%),
    radial-gradient(ellipse, rgba(255, 175, 55, 0.72) 0 14%, rgba(245, 84, 12, 0.38) 31%, rgba(220, 48, 4, 0) 72%),
    radial-gradient(ellipse, rgba(255, 218, 134, 0.75) 0 11%, rgba(255, 109, 18, 0.43) 27%, rgba(231, 61, 7, 0) 70%);
  background-position:
    8% 12%, 24% 22%, 43% 9%, 67% 18%,
    88% 31%, 14% 43%, 36% 54%, 58% 40%,
    78% 59%, 95% 73%, 19% 78%, 46% 87%,
    69% 81%, 84% 94%, 5% 65%, 54% 68%;
  background-repeat: no-repeat;
  background-size:
    8px 18px, 5px 12px, 7px 16px, 4px 11px,
    8px 17px, 5px 13px, 7px 18px, 4px 10px,
    6px 15px, 5px 12px, 8px 19px, 4px 11px,
    6px 14px, 5px 13px, 7px 17px, 4px 10px;
  opacity: 0.62;
  transform: translate3d(var(--savokhin-sparks-x), var(--savokhin-sparks-y), 0);
  animation: savokhin-sparks-breathe 6.8s ease-in-out infinite alternate;
}

@keyframes savokhin-sparks-breathe {
  from {
    opacity: 0.46;
  }
  to {
    opacity: 0.68;
  }
}

@media (max-width: 767px) {
  .savokhin-atmosphere {
    inset: -180px;
  }

  .savokhin-atmosphere__fog {
    opacity: 0.68;
  }

  .savokhin-atmosphere__sparks {
    opacity: 0.48;
  }
}

@media (prefers-reduced-motion: reduce) {
  .savokhin-atmosphere__layer {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}