.airplane-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease, opacity 2s ease;
  opacity: 1;
  animation: airplane 5s infinite;
}

/* اولین هواپیما */
.airplane1 {
  z-index: 100; /* اولین هواپیما در جلوی دومین هواپیما قرار می‌گیرد */
  filter: drop-shadow(-10px 30px 0px black);
}

/* دومین هواپیما */
.airplane2 {
  z-index: 200; /* دومین هواپیما در پشت اولی قرار می‌گیرد */
}

.airplane {
  width: 70px;
  display: block;
}

.smoke-container {
  position: fixed;
  top: 0px; /* دقیقا پشت بالا وسط هواپیما */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
}

@keyframes smokeAnim {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(0px, -100px) scale(1.5);
    opacity: 0;

  }
}
.smoke {
  width: 5px;
  height: 1px;
  background: #e40000;
  border-radius: 50%;
  position: fixed;
  animation: smokeMove 2s ease-out infinite forwards;
  opacity: 1;
}

.smoke-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .5px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  opacity: 1;
  /* transform: rotate(90deg);
  margin: -26px; */
}

@keyframes smokeMove {
  0% {
    transform: translate(-2px , 0px) scale(3);
    opacity: 0.8;
  }
  100% {
    transform: translate(0px , -400px) scale(3);
    opacity: 0;
  }
}

@keyframes airplane {
  0% {
      scale: .8;
    }
    25% {
      scale: .95;
    }
  50% {
    scale: .9;
  }
    75% {
      scale: .95;
    }
    100% {
      scale: .8;
    }
}

@keyframes opacity{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/*======= C-animated =======*/
@keyframes color-pass {
    0%,
    50% {
        left: -100%;
    }
    60%,
    100%{
      left: 100%;
    }
}

@keyframes color-pass-back {
  0%,
  50% {
      right: -100%;
  }
  60%,
  100%{
    right: 100%;
  }
}

/*======= F-animated ======*/
@keyframes flash-on {
    from,
    15%,
    20%,
    to{
      opacity: 0;
    }
    0%,
    12.5%,
    17.5%,
    22.5%,
    100% {
      opacity: 1;
    }
  }
@keyframes flash-off {
    from,
    15%,
    to{
      opacity: 1;
    }
  
    100% {
      opacity: 1;
    }
  }




  /*--------- B ----------*/
  @keyframes bg-colors{
    from,
    0%,
    100%,
    to{
      background-color: var(--action-primary);
    }
    20%{
      background-color: var(--action-primary-hover);
    }
    40%{
      background-color: var(--action-tertiary);
    }
    60%{
      background-color: var(--action-tertiary-hover);
    }
    80%{
      background-color: var(--action-primary-hover);
    }
  }

  @keyframes shadowMenuMobile{
    0%{
      box-shadow: 0 -3px 3px rgb(255, 0, 234);
    }
    20%{
      box-shadow: 0 -3px 3px red;
    }
    40%{
      box-shadow: 0 -3px 3px rgb(186, 186, 0);
    }
    60%{
      box-shadow: 0 -3px 3px rgb(0, 221, 255);
    }
    80%{
      box-shadow: 0 -3px 4px rgb(17, 0, 255);
    }
  }
  @keyframes rubberBand {
    from {
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
  
    to {
      transform: scale3d(1, 1, 1);
    }
  }
  
  .rubberBand {
    animation-name: rubberBand;
  }