.themed-wallpaper {
  background: linear-gradient(
    to bottom,
    var(--config-accent-darkest-color),
    var(--config-accent-color),
    var(--config-accent-darkest-color)
  );

  > .bg-layers {
    > .bg-layer-1 {
      background: linear-gradient(
        to bottom,
        var(--config-accent-dark-color),
        var(--config-accent-lightest-color)
      );
      mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 790' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0,800 C 0,800 0,160 0,160 C 104.43062200956939,139.54066985645932 208.86124401913878,119.08133971291866 297,128 C 385.1387559808612,136.91866028708134 456.9856459330142,175.2153110047847 540,178 C 623.0143540669858,180.7846889952153 717.1961722488038,148.05741626794256 816,150 C 914.8038277511962,151.94258373205744 1018.2296650717703,188.555023923445 1123,196 C 1227.7703349282297,203.444976076555 1333.8851674641148,181.7224880382775 1440,160 C 1440,160 1440,800 1440,800 Z' stroke='none' stroke-width='0' fill='%23FFFFFF' fill-opacity='0.265' class='path-0' style='transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-delay: 150ms;'%3E%3C/path%3E%3Cpath d='M 0,800 C 0,800 0,320 0,320 C 120.88995215311004,343.9138755980861 241.7799043062201,367.82775119617224 335,373 C 428.2200956937799,378.17224880382776 493.77033492822966,364.60287081339715 576,343 C 658.2296650717703,321.39712918660285 757.1387559808612,291.76076555023917 869,287 C 980.8612440191388,282.23923444976083 1105.6746411483252,302.354066985646 1203,312 C 1300.3253588516748,321.645933014354 1370.1626794258373,320.822966507177 1440,320 C 1440,320 1440,800 1440,800 Z' stroke='none' stroke-width='0' fill='%23FFFFFF' fill-opacity='0.4' class='path-1' style='transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-delay: 150ms;'%3E%3C/path%3E%3Cpath d='M 0,800 C 0,800 0,480 0,480 C 116.71770334928229,477.07177033492826 233.43540669856458,474.14354066985646 330,462 C 426.5645933014354,449.85645933014354 502.97607655502395,428.49760765550246 593,421 C 683.023923444976,413.50239234449754 786.6602870813399,419.8660287081339 891,432 C 995.3397129186601,444.1339712918661 1100.382775119617,462.0382775119617 1192,471 C 1283.617224880383,479.9617224880383 1361.8086124401916,479.98086124401914 1440,480 C 1440,480 1440,800 1440,800 Z' stroke='none' stroke-width='0' fill='%23FFFFFF' fill-opacity='0.53' class='path-2' style='transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-delay: 150ms;'%3E%3C/path%3E%3Cpath d='M 0,800 C 0,800 0,640 0,640 C 117.33014354066987,611.6746411483253 234.66028708133973,583.3492822966507 339,587 C 443.33971291866027,590.6507177033493 534.688995215311,626.2775119617224 621,629 C 707.311004784689,631.7224880382776 788.5837320574162,601.5406698564593 883,614 C 977.4162679425838,626.4593301435407 1084.9760765550238,681.5598086124402 1180,693 C 1275.0239234449762,704.4401913875598 1357.5119617224882,672.22009569378 1440,640 C 1440,640 1440,800 1440,800 Z' stroke='none' stroke-width='0' fill='%23FFFFFF' fill-opacity='1' class='path-3' style='transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; transition-delay: 150ms;'%3E%3C/path%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-position: bottom;
      mask-size: cover;
    }
  }
}

.wallpaper-container {
  display: none;
  overflow: hidden;
  will-change: transform;

  &.rendering {
    display: block;
    animation: ExpandOutCircle 600ms cubic-bezier(0.8, 0, 1, 1) forwards;
  }

  &.will-unrender {
    animation: Vanish 600ms linear forwards;
  }
}

@keyframes ExpandOutCircle {
  0% {
    clip-path: circle(0%);
  }
  100% {
    clip-path: circle(100%);
  }
}

@keyframes Vanish {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
