/* General styles */
.box {
  position: relative;
  padding: 20px;
  overflow: visible; /* Allow overflow to avoid cutting off content */
}

/* Slide-in animation for intro text */
@keyframes slideIn {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-slide-in {
  animation: slideIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Smooth and natural easing */
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left animation for other text */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated-slide-in-left {
  animation: slideInLeft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Smooth and natural easing */
  opacity: 1;
}

/* Bounce animation for the down arrow */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px); /* Gentle bounce */
  }
  60% {
    transform: translateY(-3px);
  }
}

.animated-bounce {
  animation: bounce 3s infinite; /* Slower and smoother bounce */
  display: block;
  margin: 0 auto;
}

/* Hover effects on buttons */
@keyframes buttonHover {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.03); /* Subtle scaling for smoother effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Softer shadow */
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.animated-button {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother transitions */
  display: inline-block;
  margin: 10px;
}

.animated-button:hover {
  animation: buttonHover 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Smooth hover effect */
}

/* Styling for the button container */
.button-container {
  text-align: center;
}