/* Estilo inicial del contenedor */
#animated-content {
  display: none; /* Inicialmente oculto */
  opacity: 0; /* Empieza invisible */
  transform: scale(0.8) translateY(-20px); /* Empieza más pequeño y ligeramente hacia arriba */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Transición suave */
}

/* Cuando se activa la animación con la clase 'show' */
#animated-content.show {
  opacity: 1;
  transform: scale(1) translateY(0); /* Se mueve a su posición final y se expande */
  animation: slideIn 0.6s ease-out forwards; /* Animación de deslizamiento */
}

/* Animación de deslizamiento similar a las ventanas en macOS */
@keyframes slideIn {
  0% {
    transform: scale(0.8) translateY(-20px); /* Empieza más pequeño y fuera de lugar */
    opacity: 0; /* Comienza invisible */
  }
  50% {
    transform: scale(1.05) translateY(5px); /* Expande un poco más de lo normal, subiendo ligeramente */
    opacity: 0.7;
  }
  100% {
    transform: scale(1) translateY(0); /* Regresa a su tamaño y posición final */
    opacity: 1; /* Se vuelve completamente visible */
  }
}

/* Para quitar la animación después de que termine */
#animated-content.remove-animation {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  transition: none !important; /* Desactiva la transición */
}