/* Toast Animation Styles */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.robot-icon {
  animation: pulse 2s infinite ease-in-out;
  display: inline-block;
}

.robot-icon.float {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.toast-content {
  animation: fadeIn 0.5s ease-out forwards;
}

.spin-icon {
  animation: spin 2s infinite linear;
  display: inline-block;
}

.progress-bar {
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #4299e1, #9f7aea);
  border-radius: 2px;
  margin-top: 15px;
  animation: progress 3s linear forwards;
}

/* Animation to fade out the badge after 10 seconds */
@keyframes fadeOut {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Wiggle animation for referral button */
@keyframes wiggle {
  0%, 100% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(-2px);
  }
  10% {
    transform: translateX(2px);
  }
  15% {
    transform: translateX(-2px);
  }
  20% {
    transform: translateX(2px);
  }
  25% {
    transform: translateX(-1px);
  }
  30% {
    transform: translateX(1px);
  }
  35% {
    transform: translateX(-1px);
  }
  40% {
    transform: translateX(1px);
  }
  45% {
    transform: translateX(0);
  }
  /* Pause for the rest of the animation */
  100% {
    transform: translateX(0);
  }
}

.wiggle-button {
  animation: wiggle 4s ease-in-out infinite;
  transform-origin: center;
}

/* Animations for Impostazioni button - 5s wiggle, 5s pause (total 10s) */
@keyframes wiggle-red-outline {
  /* Wiggle phase (0% to 50% = 5 seconds) */
  0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45% {
    box-shadow: 0 0 0 3px #e74c3c;
  }
  0%, 10%, 20%, 30%, 40%, 50% {
    transform: rotate(0deg);
  }
  2%, 12%, 22%, 32%, 42% {
    transform: rotate(-3deg);
  }
  4%, 14%, 24%, 34%, 44% {
    transform: rotate(3deg);
  }
  6%, 16%, 26%, 36%, 46% {
    transform: rotate(-2deg);
  }
  8%, 18%, 28%, 38%, 48% {
    transform: rotate(2deg);
  }
  /* Pause phase (50% to 100% = 5 seconds) - no animation, no outline */
  50%, 100% {
    transform: rotate(0deg);
    box-shadow: 0 0 0 0px transparent;
  }
}

/* Periodic wiggle animation for Impostazioni Analisi button - repeats every 5s */
@keyframes wiggle-periodic {
  0%, 88% {
    transform: rotate(0deg);
  }
  89% {
    transform: rotate(-5deg);
  }
  90% {
    transform: rotate(5deg);
  }
  91% {
    transform: rotate(-4deg);
  }
  92% {
    transform: rotate(4deg);
  }
  93% {
    transform: rotate(-3deg);
  }
  94% {
    transform: rotate(3deg);
  }
  95% {
    transform: rotate(-2deg);
  }
  96% {
    transform: rotate(2deg);
  }
  97%, 100% {
    transform: rotate(0deg);
  }
}

/* Animation for loading portfolios */
.portfolio-card {
  animation: fadeIn 0.3s ease-out;
}