/* ONEBEAT optional autumn layer. Disable by removing public.autumn-season include. */
.onebeat-autumn {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0% 18%, rgba(183, 86, 42, 0.22), transparent 46%),
    radial-gradient(ellipse at 100% 40%, rgba(210, 139, 74, 0.16), transparent 44%);
}

.onebeat-autumn__leaf {
  position: absolute;
  top: 0;
  width: 36px;
  height: 46px;
  opacity: 0.88;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 60'%3E%3Cpath d='M24 4 30 16 38 10 36 25 46 23 39 36 42 40 28 45 25 55 22 54 23 44 8 41 12 35 2 24 15 26 11 12 20 17Z' fill='%23E8A45A'/%3E%3Cpath d='M24 14 24 49M24 34 14 27M24 38 35 29' fill='none' stroke='%238B4630' stroke-width='1.6'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
}

.onebeat-autumn__leaf--one {
  left: 4%;
  animation: onebeat-autumn-fall 18s linear infinite;
  animation-delay: -3s;
}

.onebeat-autumn__leaf--two {
  left: 22%;
  width: 28px;
  height: 36px;
  animation: onebeat-autumn-fall 22s linear infinite;
  animation-delay: -11s;
}

.onebeat-autumn__leaf--three {
  left: 72%;
  width: 32px;
  height: 41px;
  animation: onebeat-autumn-fall 20s linear infinite;
  animation-delay: -7s;
}

.onebeat-autumn__leaf--four {
  left: 88%;
  width: 40px;
  height: 52px;
  animation: onebeat-autumn-fall 16s linear infinite;
  animation-delay: -14s;
}

.onebeat-autumn__leaf--five {
  left: 48%;
  width: 26px;
  height: 34px;
  animation: onebeat-autumn-fall 24s linear infinite;
  animation-delay: -19s;
}

.onebeat-autumn__leaf--six {
  left: 61%;
  width: 30px;
  height: 38px;
  animation: onebeat-autumn-fall 19s linear infinite;
  animation-delay: -5s;
}

@keyframes onebeat-autumn-fall {
  0% {
    transform: translate3d(0, -60px, 0) rotate(-25deg);
    opacity: 0;
  }
  8% {
    opacity: 0.92;
  }
  50% {
    transform: translate3d(18px, 360px, 0) rotate(80deg);
    opacity: 0.85;
  }
  85% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-12px, 760px, 0) rotate(170deg);
    opacity: 0;
  }
}

@keyframes onebeat-autumn-glow {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .onebeat-autumn::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 0% 30%, rgba(210, 120, 55, 0.14), transparent 44%),
      radial-gradient(ellipse at 100% 55%, rgba(190, 110, 45, 0.12), transparent 40%);
    animation: onebeat-autumn-glow 10s ease-in-out infinite alternate;
  }
}

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

  .onebeat-autumn__leaf {
    animation: none !important;
    will-change: auto;
    top: auto;
  }

  .onebeat-autumn__leaf--one {
    top: 120px;
    transform: rotate(-28deg);
  }

  .onebeat-autumn__leaf--two {
    top: 210px;
    transform: rotate(32deg);
  }

  .onebeat-autumn__leaf--three {
    top: 380px;
    transform: rotate(-40deg);
  }

  .onebeat-autumn__leaf--four {
    top: 160px;
    transform: rotate(55deg);
  }

  .onebeat-autumn__leaf--five {
    top: 460px;
    transform: rotate(12deg);
  }

  .onebeat-autumn__leaf--six {
    top: 300px;
    transform: rotate(-50deg);
  }
}

@media (max-width: 1023px) {
  .onebeat-autumn__leaf--five,
  .onebeat-autumn__leaf--six {
    display: none;
  }

  .onebeat-autumn__leaf--one,
  .onebeat-autumn__leaf--two,
  .onebeat-autumn__leaf--three,
  .onebeat-autumn__leaf--four {
    width: 30px;
    height: 38px;
    opacity: 0.95;
  }
}

@media (max-width: 639px) {
  .onebeat-autumn {
    background:
      radial-gradient(ellipse at 0% 8%, rgba(183, 86, 42, 0.28), transparent 48%),
      radial-gradient(ellipse at 100% 22%, rgba(210, 139, 74, 0.2), transparent 42%);
  }

  .onebeat-autumn__leaf--three,
  .onebeat-autumn__leaf--four {
    display: none;
  }

  .onebeat-autumn__leaf--one {
    left: 6%;
    width: 28px;
    height: 36px;
  }

  .onebeat-autumn__leaf--two {
    left: 78%;
    width: 26px;
    height: 34px;
  }
}

@media print {
  .onebeat-autumn {
    display: none;
  }
}