/* Decorative only: no effect on artwork sizing, hit areas or document flow. */
.hero-leaves {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.hero-leaf {
  --duration:8s;
  --delay:.4s;
  --drift:6px;
  position:absolute;
  top:0;
  display:block;
  width:calc(var(--leaf-size) * var(--scale));
  height:calc(var(--leaf-size) * var(--scale));
  opacity:0;
  animation:hero-leaf-fall var(--duration) linear var(--delay) 1 both;
}
.hero-leaf__shape {
  display:block;
  width:100%;
  height:100%;
  background:var(--leaf-image) center / contain no-repeat;
  transform-origin:50% 40%;
  animation:hero-leaf-sway var(--duration) ease-in-out var(--delay) 1 both;
}
.hero-leaf--1 {
  --leaf-size:22px;
  --leaf-image:url("./assets/hero-leaf-1.svg");
  left:calc(2px * var(--scale));
}
.hero-leaf--2 {
  --leaf-size:26px;
  --leaf-image:url("./assets/hero-leaf-2.svg");
  --duration:9.6s;
  --delay:1.2s;
  --drift:-5px;
  right:calc(1px * var(--scale));
}
.hero-leaf--3 {
  --leaf-size:16px;
  --leaf-image:url("./assets/hero-leaf-3.svg");
  --duration:8.7s;
  --delay:1.8s;
  --drift:-4px;
  left:calc(10px * var(--scale));
}
@keyframes hero-leaf-fall {
  0% { transform:translate3d(0,calc(-35px * var(--scale)),0); opacity:0; }
  8% { opacity:1; }
  84% { opacity:1; }
  100% { transform:translate3d(0,calc(480px * var(--scale)),0); opacity:0; visibility:hidden; }
}
@keyframes hero-leaf-sway {
  0% { transform:translateX(0) rotate(-18deg); }
  25% { transform:translateX(calc(var(--drift) * var(--scale))) rotate(12deg); }
  50% { transform:translateX(calc(var(--drift) * -1 * var(--scale))) rotate(-12deg); }
  75% { transform:translateX(calc(var(--drift) * var(--scale))) rotate(20deg); }
  100% { transform:translateX(0) rotate(42deg); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-leaves { display:none; }
  .hero-leaf,.hero-leaf__shape { animation:none; }
}