/* ==========================================================================
   MOTION AND ROTATION
   Flight transitions, wing movement and highlight positioning.
   ========================================================================== */

/* ==========================================================================
   MOTION AND ROTATION
   Flight transitions, wing movement and highlight positioning.
   ========================================================================== */

.pill-one {
  top:44px;
  right:10px
}

.pill-two {
  bottom:72px;
  left:0
}

@keyframes wingbeat {
  0%,100% {
    transform:rotate(28deg) scaleX(1)
  }
  50% {
    transform:rotate(18deg) scaleX(.78)
  }

}

.scroll-butterfly {
  position:absolute;
  top:0;
  left:0;
  width:124px;
  height:110px;
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
  transition:left .55s cubic-bezier(.2,.85,.3,1),top .55s cubic-bezier(.2,.85,.3,1),transform .55s cubic-bezier(.2,.85,.3,1);
  will-change:left,top,transform;
  transform-style:preserve-3d
}

.scroll-butterfly-left {
  clip-path:polygon(0 0,76% 0,52% 49%,28% 100%,0 100%);
  transform-origin:52% 54%;
  animation:scrollButterflyLeftWing 1.12s ease-in-out infinite
}

.scroll-butterfly-right {
  clip-path:polygon(76% 0,100% 0,100% 100%,28% 100%,52% 49%);
  transform-origin:52% 54%;
  animation:scrollButterflyRightWing 1.12s ease-in-out infinite .08s
}

/* Beim Scrollen wird diese Dauer per JavaScript verkürzt. */
.scroll-butterfly-left,
.scroll-butterfly-right {
  animation-duration:var(--wing-flap-duration,1.12s)
}

.scroll-butterfly-body {
  clip-path:polygon(45% 49%,58% 51%,58% 63%,49% 82%,39% 90%,31% 84%,41% 65%,43% 55%);
  transform-origin:50% 55%;
  animation:scrollButterflyBody 2.6s ease-in-out infinite
}

.scroll-butterfly-body img {
  filter:drop-shadow(0 8px 6px #3e19502b)
}

@keyframes scrollButterflyLeftWing {
  0%,100% {
    transform:rotateY(0deg) rotate(-1deg)
  }
  50% {
    transform:rotateY(30deg) rotate(-4deg)
  }

}

@keyframes scrollButterflyRightWing {
  0%,100% {
    transform:rotateY(0deg) rotate(1deg)
  }
  50% {
    transform:rotateY(-30deg) rotate(4deg)
  }

}

@keyframes scrollButterflyBody {
  0%,100% {
    transform:translateY(0) rotate(-1deg)
  }
  50% {
    transform:translateY(-3px) rotate(1deg)
  }

}

@media(prefers-reduced-motion:reduce) {
  .scroll-butterfly-piece {
    animation:none!important
  }

}

.hero-card:after {
  content:none
}

.hero-visual .floating-pill {
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:max-content;
  max-width:none;
  white-space:nowrap;
  flex-wrap:nowrap;
  transition:filter .3s ease,opacity .3s ease
}

.pill-three {
  white-space:nowrap
}