/* Estilos para a animação de foguete na seção Sobre Nós */
.rocket-animation-container {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 100px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.rocket {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 120px;
  transition: transform 0.3s ease;
  z-index: 10;
}

.rocket-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 50% 50% 0 0;
}

.rocket-head {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border-radius: 50% 50% 0 0;
}

.rocket-window {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.fin {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 30px;
  background: #f5f5f5;
}

.fin-left {
  left: -15px;
  border-radius: 50% 0 0 0;
  transform: skewY(30deg);
}

.fin-right {
  right: -15px;
  border-radius: 0 50% 0 0;
  transform: skewY(-30deg);
}

.exhaust-flame {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 40px;
  background: linear-gradient(to bottom, var(--primary-color), transparent);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exhaust-smoke {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 60px;
}

.smoke-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
}

.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
}

/* Animação de voo do foguete */
@keyframes rocketFly {
  0% {
    transform: translateY(0) translateX(-50%);
  }
  100% {
    transform: translateY(-100vh) translateX(-50%);
  }
}

@keyframes flameFlicker {
  0% {
    opacity: 0.7;
    height: 30px;
  }
  50% {
    opacity: 1;
    height: 40px;
  }
  100% {
    opacity: 0.7;
    height: 30px;
  }
}

@keyframes smokeRise {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(2);
  }
}

@keyframes starPass {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Estado ativo para quando o foguete estiver voando */
.rocket.flying {
  animation: rocketFly 15s cubic-bezier(0.21, 0.53, 0.29, 0.8) forwards;
}

.rocket.flying .exhaust-flame {
  opacity: 1;
  animation: flameFlicker 0.2s infinite;
}

.smoke-particle.active {
  animation: smokeRise 2s ease-out forwards;
}

.star.active {
  animation: starPass 3s linear forwards;
}

/* Responsividade */
@media screen and (max-width: 768px) {
  .rocket-animation-container {
    right: 2%;
    width: 80px;
  }
  
  .rocket {
    width: 50px;
    height: 100px;
  }
  
  .rocket-body {
    width: 25px;
    height: 70px;
  }
  
  .rocket-head {
    bottom: 70px;
    width: 25px;
    height: 25px;
  }
  
  .rocket-window {
    bottom: 45px;
    width: 12px;
    height: 12px;
  }
  
  .fin {
    width: 12px;
    height: 25px;
  }
  
  .fin-left {
    left: -12px;
  }
  
  .fin-right {
    right: -12px;
  }
  
  .exhaust-flame {
    width: 23px;
    height: 35px;
  }
}