/* ==========================================================================
   BUTTERFLY STYLES
   Visual appearance, cut-out layers and the fixed scroll container.
   ========================================================================== */

.butterfly {
  position:absolute;
  z-index:3;
  width:110px;
  height:100px;
  pointer-events:none;
  filter:drop-shadow(0 18px 12px #4f1f6d33)
}

.wing {
  position:absolute;
  top:18px;
  width:47px;
  height:64px;
  border-radius:70% 35% 65% 35%;
  background:linear-gradient(145deg,#fff1ff,#a96fe0 55%,#63258e);
  box-shadow:inset 5px 5px 8px #ffffffb8,inset -6px -8px 12px #46146947;
  transform-origin:90% 80%;
  animation:wingbeat 1.5s ease-in-out infinite
}

.wing.left {
  left:4px;
  transform:rotate(28deg)
}

.wing.right {
  right:4px;
  border-radius:35% 70% 35% 65%;
  transform:scaleX(-1) rotate(28deg);
  transform-origin:10% 80%
}

.wing:after {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid #ffffff99;
  border-radius:inherit
}

.butterfly-body {
  position:absolute;
  z-index:2;
  top:25px;
  left:50%;
  width:12px;
  height:53px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,#2f153e,#8255a0,#2f153e)
}

.butterfly-body:before,.butterfly-body:after {
  content:"";
  position:absolute;
  top:-15px;
  width:27px;
  height:20px;
  border-top:2px solid #4c2366;
  border-radius:50%
}

.butterfly-body:before {
  left:-18px;
  transform:rotate(-28deg)
}

.butterfly-body:after {
  right:-18px;
  transform:rotate(28deg)
}

.butterfly-path {
  position:fixed;
  z-index:9999;
  inset:0;
  display:block;
  visibility:visible;
  pointer-events:none
}
.scroll-butterfly-piece {
  position:absolute;
  inset:0;
  pointer-events:none;
  transform-style:preserve-3d
}
.scroll-butterfly-piece img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 9px #3e195033)
}