.chicory-autumn-leaves {
  position: relative;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.chicory-autumn-leaves__layer {
  --leaf-fall-distance: 770px;
  --leaf-fall-midpoint: 370px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 650px;
  overflow: hidden;
}

.chicory-autumn-leaves__leaf {
  --leaf-color: #b56c45;
  --leaf-delay: 0s;
  --leaf-drift: 40px;
  --leaf-duration: 12s;
  --leaf-left: 10%;
  --leaf-size: 15px;
  position: absolute;
  top: -12%;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: 11px;
  opacity: 0;
  background: var(--leaf-color);
  border-radius: 90% 0 90% 0;
  filter: drop-shadow(0 2px 2px rgb(24 50 61 / 14%));
  transform-origin: 65% 100%;
  animation: chicory-autumn-leaf-fall var(--leaf-duration) linear var(--leaf-delay) infinite;
}

.chicory-autumn-leaves__leaf::after {
  position: absolute;
  top: 46%;
  right: -24%;
  width: 48%;
  height: 1px;
  content: "";
  background: #6e4632;
  transform: rotate(23deg);
  transform-origin: left center;
}

.chicory-autumn-leaves__leaf--1 { --leaf-left: 4%; --leaf-size: 13px; --leaf-color: #c9903c; --leaf-delay: -7s; --leaf-duration: 12s; --leaf-drift: 72px; }
.chicory-autumn-leaves__leaf--2 { --leaf-left: 15%; --leaf-size: 17px; --leaf-color: #9f603d; --leaf-delay: -1s; --leaf-duration: 14s; --leaf-drift: -48px; }
.chicory-autumn-leaves__leaf--3 { --leaf-left: 27%; --leaf-size: 12px; --leaf-color: #d5a85b; --leaf-delay: -10s; --leaf-duration: 13s; --leaf-drift: 54px; }
.chicory-autumn-leaves__leaf--4 { --leaf-left: 39%; --leaf-size: 16px; --leaf-color: #b56c45; --leaf-delay: -4s; --leaf-duration: 15s; --leaf-drift: -66px; }
.chicory-autumn-leaves__leaf--5 { --leaf-left: 51%; --leaf-size: 11px; --leaf-color: #8e5a3c; --leaf-delay: -12s; --leaf-duration: 14s; --leaf-drift: 46px; }
.chicory-autumn-leaves__leaf--6 { --leaf-left: 63%; --leaf-size: 15px; --leaf-color: #c9903c; --leaf-delay: -6s; --leaf-duration: 13s; --leaf-drift: 78px; }
.chicory-autumn-leaves__leaf--7 { --leaf-left: 74%; --leaf-size: 12px; --leaf-color: #b56c45; --leaf-delay: -2s; --leaf-duration: 15s; --leaf-drift: -58px; }
.chicory-autumn-leaves__leaf--8 { --leaf-left: 84%; --leaf-size: 18px; --leaf-color: #9f603d; --leaf-delay: -9s; --leaf-duration: 16s; --leaf-drift: 44px; }
.chicory-autumn-leaves__leaf--9 { --leaf-left: 93%; --leaf-size: 12px; --leaf-color: #d5a85b; --leaf-delay: -5s; --leaf-duration: 13s; --leaf-drift: -80px; }
.chicory-autumn-leaves__leaf--10 { --leaf-left: 57%; --leaf-size: 10px; --leaf-color: #c17b4d; --leaf-delay: -15s; --leaf-duration: 17s; --leaf-drift: -38px; }

@keyframes chicory-autumn-leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0) rotate(0deg);
  }
  12% {
    opacity: 0.72;
  }
  48% {
    transform: translate3d(0, var(--leaf-fall-midpoint), 0) rotate(245deg);
  }
  86% {
    opacity: 0.68;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--leaf-drift), var(--leaf-fall-distance), 0) rotate(560deg);
  }
}

@media (max-width: 959px) {
  .chicory-autumn-leaves__layer {
    --leaf-fall-distance: 620px;
    --leaf-fall-midpoint: 290px;
    height: 500px;
  }

  .chicory-autumn-leaves__leaf--2,
  .chicory-autumn-leaves__leaf--4,
  .chicory-autumn-leaves__leaf--6,
  .chicory-autumn-leaves__leaf--8,
  .chicory-autumn-leaves__leaf--10 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chicory-autumn-leaves__leaf {
    display: none;
  }
}