:root {
  --autumn-bg: #fff7ee;
  --autumn-surface-rgb: 255, 247, 238;
  --autumn-glow: 0.1;
  --autumn-green-glow: 0.08;
}

body.autumn-season {
  background:
    radial-gradient(circle at 8% 5%, rgba(221, 137, 48, var(--autumn-glow)), transparent 30%),
    radial-gradient(circle at 92% 28%, rgba(177, 76, 34, var(--autumn-glow)), transparent 27%),
    radial-gradient(circle at 55% 100%, rgba(104, 119, 50, var(--autumn-green-glow)), transparent 32%),
    var(--autumn-bg);
  background-attachment: fixed;
}

body.autumn-season .topbar,
body.autumn-season .footer {
  background: rgba(var(--autumn-surface-rgb), 0.94);
}

body.autumn-season .header {
  background: rgba(var(--autumn-surface-rgb), 0.88);
  border-bottom-color: rgba(177, 76, 34, 0.13);
}

body.autumn-season .logo-banner .brand-mark {
  background: linear-gradient(180deg, rgba(255, 249, 233, 0.98), rgba(var(--autumn-surface-rgb), 0.98));
}

.autumn-leaf-layer {
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  overflow: hidden;
}

.autumn-leaf {
  position: absolute;
  top: -14vh;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: var(--leaf-height);
  border-radius: 100% 0 100% 0;
  background: var(--leaf-color);
  box-shadow: inset -3px -3px 5px rgba(100, 48, 21, 0.16), 0 3px 8px rgba(80, 45, 20, 0.12);
  opacity: 0;
  transform-origin: 55% 70%;
  animation: autumn-leaf-fall var(--leaf-duration) linear infinite;
  animation-delay: var(--leaf-delay);
  will-change: transform, opacity;
}

.autumn-leaf::after {
  content: "";
  position: absolute;
  left: 47%;
  top: 54%;
  width: 2px;
  height: 72%;
  border-radius: 999px;
  background: rgba(91, 53, 25, 0.48);
  transform: rotate(-42deg);
  transform-origin: top center;
}

@keyframes autumn-leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }

  10%,
  82% {
    opacity: var(--leaf-alpha);
  }

  38% {
    transform: translate3d(var(--leaf-sway), 38vh, 0) rotate(190deg);
  }

  68% {
    transform: translate3d(var(--leaf-counter-sway), 76vh, 0) rotate(355deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--leaf-drift), 118vh, 0) rotate(var(--leaf-spin));
  }
}

@media (max-width: 720px) {
  .autumn-leaf:nth-child(n + 9) {
    display: none;
  }

  .autumn-leaf {
    filter: saturate(0.92);
  }
}

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

  body.autumn-season {
    background-attachment: scroll;
  }
}