/* Butterflies fluttering around the hero, alongside the existing falling petals. */
.butterflies{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}

.butterfly{position:absolute;width:40px;height:33px;will-change:transform}
.butterfly-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(20,4,9,.3))}

.butterfly-svg .wing-left{transform-box:fill-box;transform-origin:100% 50%;animation:wing-l .32s ease-in-out infinite alternate}
.butterfly-svg .wing-right{transform-box:fill-box;transform-origin:0% 50%;animation:wing-r .32s ease-in-out infinite alternate}
@keyframes wing-l{from{transform:scaleX(1)}to{transform:scaleX(.45)}}
@keyframes wing-r{from{transform:scaleX(1)}to{transform:scaleX(.45)}}

.butterfly:nth-child(1){left:8%;top:68%;animation:drift-a 17s ease-in-out infinite}
.butterfly:nth-child(2){left:50%;top:10%;width:34px;height:28px;animation:drift-b 21s ease-in-out infinite;animation-delay:-6s}
.butterfly:nth-child(3){left:46%;top:82%;width:30px;height:25px;animation:drift-c 19s ease-in-out infinite;animation-delay:-11s}
.butterfly:nth-child(2) .wing-left,.butterfly:nth-child(2) .wing-right{animation-delay:-.1s}
.butterfly:nth-child(3) .wing-left,.butterfly:nth-child(3) .wing-right{animation-duration:.26s}

@keyframes drift-a{
  0%{transform:translate3d(0,0,0) rotate(-6deg)}
  22%{transform:translate3d(9vw,-6vh,0) rotate(5deg)}
  46%{transform:translate3d(16vw,3vh,0) rotate(-10deg)}
  68%{transform:translate3d(7vw,10vh,0) rotate(8deg)}
  86%{transform:translate3d(-3vw,4vh,0) rotate(-4deg)}
  100%{transform:translate3d(0,0,0) rotate(-6deg)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) rotate(5deg)}
  25%{transform:translate3d(-10vw,-5vh,0) rotate(-8deg)}
  50%{transform:translate3d(-4vw,6vh,0) rotate(10deg)}
  75%{transform:translate3d(-14vw,-2vh,0) rotate(-6deg)}
  100%{transform:translate3d(0,0,0) rotate(5deg)}
}
@keyframes drift-c{
  0%{transform:translate3d(0,0,0) rotate(-4deg)}
  30%{transform:translate3d(6vw,-8vh,0) rotate(6deg)}
  55%{transform:translate3d(13vw,-4vh,0) rotate(-8deg)}
  80%{transform:translate3d(4vw,-9vh,0) rotate(4deg)}
  100%{transform:translate3d(0,0,0) rotate(-4deg)}
}

@media(max-width:680px){
  .butterfly{transform:scale(.8)}
}