/* Seasonal decoration for the start area. */
.home-backdrop {
  filter: sepia(.19) saturate(1.13) brightness(1.04);
}

.home-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 31%, #d0873b39, transparent 58%);
  pointer-events: none;
}

.autumn-leaves,
.leaf-defs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.autumn-leaves {
  z-index: -1;
  overflow: hidden;
  container-type: size;
}

.autumn-leaf {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  color: #cd793d;
  filter: drop-shadow(0 2px 3px #24100688);
  animation: leaf-fall var(--time) var(--delay) linear infinite;
}

.autumn-leaf.gold { color: #e2a54e; }
.autumn-leaf.rust { color: #b65536; }

.autumn-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: leaf-tumble 5.5s var(--delay) ease-in-out infinite;
}

@keyframes leaf-fall {
  0% { transform: translate(0, 0) rotate(var(--angle)); opacity: 0; }
  12% { opacity: .8; }
  35% { transform: translate(calc(var(--wind) * .35 + 30px), 36cqh) rotate(calc(var(--angle) + 120deg)); }
  70% { transform: translate(calc(var(--wind) * .65 - 20px), 74cqh) rotate(calc(var(--angle) + 220deg)); opacity: .76; }
  94% { opacity: .5; }
  100% { transform: translate(var(--wind), calc(100cqh + 75px)) rotate(calc(var(--angle) + 305deg)); opacity: 0; }
}

@keyframes leaf-tumble {
  0%, 100% { transform: scaleX(.96) skewY(-7deg); }
  50% { transform: scaleX(.39) skewY(16deg); }
}

[data-autumn-paused] .autumn-leaf,
[data-autumn-paused] .autumn-leaf svg {
  animation-play-state: paused;
}

.autumn-toggle {
  position: absolute;
  z-index: 1;
  bottom: 7px;
  left: 13px;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid #fae2c782;
  border-radius: 999px;
  background: #142c43df;
  color: #fff1df;
  font: 700 10px/1.25 var(--font);
  cursor: pointer;
}

.autumn-toggle:hover { background: #2a4258; }
.autumn-toggle:focus-visible { outline: 2px solid #fff1df; outline-offset: 2px; }

@media (max-width: 670px) {
  .autumn-leaf:nth-child(even) { display: none; }
  .autumn-leaf { width: calc(var(--size) * .8); height: calc(var(--size) * .8); }
}

@media (prefers-reduced-motion: reduce) {
  .autumn-leaves, .autumn-toggle { display: none; }
}