@tailwind base;
@tailwind components;
@tailwind utilities;

/* app/assets/stylesheets/collapse.css */
.collapse {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 200ms ease, opacity 160ms ease;
}

.collapse.open {
  max-height: 600px; /* suficiente para tu bloque típico */
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes pulse-amber {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); /* amber-400 */
  }
  50% {
    box-shadow: 0 0 0 6px rgba(251, 191, 36, 0);
  }
}

.pulse-amber {
  animation: pulse-amber 1.5s infinite;
}

@keyframes sparkle-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  2.5% { transform: rotate(-8deg) scale(1.1); }
  7.5% { transform: rotate(8deg) scale(1.1); }
  10% { transform: rotate(0deg) scale(1); }
}

.sparkle-animate {
  animation: sparkle-wiggle 10s ease-in-out infinite;
}

/* AI Gradient Text Effect */
@keyframes ai-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.ai-gradient-text {
  background: linear-gradient(
    90deg,
    #6d28d9 0%,    /* ai-700 */
    #8b5cf6 25%,   /* ai-500 */
    #6ec653 50%,   /* primary-500 */
    #8b5cf6 75%,   /* ai-500 */
    #6d28d9 100%   /* ai-700 */
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ai-shimmer 6s linear infinite;
}