.fani-container {
  position: relative;
  display: block;
  width: 100%;
  height: 3.5rem;
  background-image: url('/image/ui/farfalla/vetka2.svg');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}

#vetka-zbb {
  display: none;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0px;
  left: 52%;
  transform: translateX(-50%) rotate(5deg);

  /* Убираем выделение при фокусе и нажатии */
  outline: none;
  cursor: pointer;

  z-index: 100;
  height: 3.3rem;
  width: 12rem;
  text-align: center;

  background-color: rgb(120, 76, 45);
  border: none;
  border-radius: 1rem;
}

#vetka-text {
  color: rgb(232, 221, 205);
  font-family: 'OswaldRegular', 'Roboto Condensed', 'Source Sans Pro Condensed', 'Open Sans Condensed', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  margin: 0 auto;
  padding: 0 1rem 0 1rem;
}

.fani {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  cursor: pointer;
  z-index: 101;
}

.fani-lw {
  position: absolute;
  height: 4rem;
  width: auto;
  will-change: transform;
  left: -2.35rem;
  top: 0;
  transform-origin: 2.75rem 2rem;
  /* Точка вращения */
  z-index: 103;
}

.fani-rw {
  position: absolute;
  height: 4rem;
  width: auto;
  will-change: transform;
  right: -3.45rem;
  top: 0;
  transform-origin: 0.04rem 2rem;
  z-index: 104;
}

.fani-t {
  position: absolute;
  left: 0;
  top: 0;
  height: 4rem;
  z-index: 102;
}

@keyframes faniWingsFlap {

  /* Фаза 1: начало подъёма — лёгкое сжатие */
  0% {
    transform: rotate(0deg) scaleX(1) scaleY(1);
  }

  /* Фаза 2: подъём — сильное сжатие по горизонтали */
  30% {
    transform: rotate(0deg) scaleX(0.2) scaleY(1.1);
  }

  /* Фаза 3: верхняя точка — пауза в сжатом состоянии */
  45% {
    transform: rotate(0deg) scaleX(0.1) scaleY(1.15);
  }

  /* Фаза 4: начало опускания — постепенное расширение */
  50% {
    transform: rotate(0deg) scaleX(0.2) scaleY(1.05);
  }

  80% {
    transform: rotate(0deg) scaleX(1) scaleY(1);
  }

  100% {
    transform: rotate(0deg) scaleX(1) scaleY(1);
  }
}

/* Анимация полёта */
.fly-forward {
  animation: flyForward 9s linear forwards;
}

@keyframes flyForward {
  from {
    transform: rotate(-12deg);
  }

  to {
    /* задана в JS */
  }
}

/* -------------------======== [                       ]========--------------------- */
/* -------------------======== [ FOR LANDSCAPE SCREENS ]========--------------------- */
/* -------------------======== [                       ]========--------------------- */
/* @media screen and (orientation:landscape){ */
@media only screen and (min-aspect-ratio: 4/3) {
  .fani-container {
    width: 100%;
    height: 4rem;
  }
}