html,
body {
  overflow-x: hidden;
}

#main-content {
  position: relative;
}

.floating-wing {
  position: absolute;
  right: 0;
  bottom: -10vh;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.floating-wing .wing {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 382px;
  height: auto;
  overflow: visible;
}

/* Lähtötila: oikealla ja kallellaan */
.floating-wing .wing-inner {
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(40%, 0, 0) rotateZ(45deg);
  transition:
    transform 1.4s cubic-bezier(.25, .8, .25, 1),
    opacity 0.8s ease-out;
}

/* Kun .is-in lisätään (wing.js), liike interpoloidaan automaattisesti
   -> oikealta vasemmalle + 45deg -> 0deg yhtä aikaa, ilman nykimistä */
.floating-wing .wing-inner.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateZ(0deg);
}

.floating-wing .wing img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tabletti */
@media (max-width: 980px) {
  .floating-wing {
    bottom: -16vh;
  }
  .floating-wing .wing {
    width: 130px;
  }
}

/* Mobiili */
@media (max-width: 640px) {
  .floating-wing {
    bottom: -13vh;
  }
  .floating-wing .wing {
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-wing .wing-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}