/* Осенний листопад для 1С-Битрикс. Не перехватывает клики. */

#autumn-leaves-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

#autumn-leaves-layer.is-paused .autumn-leaf,
#autumn-leaves-layer.is-paused .autumn-leaf__inner {
  animation-play-state: paused;
}

html[data-autumn-leaves="off"] #autumn-leaves-layer {
  display: none !important;
}

.autumn-leaf {
  position: absolute;
  top: -14%;
  left: 0;
  width: var(--leaf-size, 32px);
  height: var(--leaf-size, 32px);
  color: var(--leaf-color, #c2410c);
  opacity: 0.9;
  will-change: transform;
  animation: autumn-leaf-fall var(--fall-duration, 14s) linear var(--fall-delay, 0s) infinite;
}

.autumn-leaf__inner {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 60%;
  animation: autumn-leaf-sway var(--sway-duration, 3.2s) ease-in-out var(--fall-delay, 0s) infinite alternate;
}

.autumn-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(70, 32, 0, 0.28));
}

@keyframes autumn-leaf-fall {
  0% {
    transform: translate3d(var(--x-start), 0, 0);
  }

  100% {
    transform: translate3d(var(--x-end), 118vh, 0);
  }
}

@keyframes autumn-leaf-sway {
  0% {
    transform: translateX(-14px) rotate(var(--spin-start, -28deg));
  }

  100% {
    transform: translateX(14px) rotate(var(--spin-end, 320deg));
  }
}

@media (max-width: 768px) {
  .autumn-leaf {
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  #autumn-leaves-layer {
    display: none !important;
  }
}