@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

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

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Admin Panel Custom Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.admin-card {
  animation: slideInUp 0.5s ease-out forwards;
  opacity: 0;
}

.admin-cards-container > div:nth-child(1) { animation-delay: 0.1s; }
.admin-cards-container > div:nth-child(2) { animation-delay: 0.2s; }
.admin-cards-container > div:nth-child(3) { animation-delay: 0.3s; }
.admin-cards-container > div:nth-child(4) { animation-delay: 0.4s; }

.shimmer-effect {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0));
  background-size: 200px 100%;
  animation: shimmer 2s infinite;
}

/* Glass morphism effect for admin panels */
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient text utilities */
.text-gradient-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-rose {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Enhanced Analysis Page Components */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress-width, 0%);
  }
}

/* Navigation Pills */
.nav-pill {
  @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-full border-2 border-transparent transition-all duration-200 hover:bg-white hover:shadow-md;
}

.nav-pill.active {
  @apply bg-white shadow-md text-indigo-600 border-indigo-100;
}

.nav-pill:not(.active) {
  @apply text-gray-600 hover:text-gray-900;
}

/* Tab Components */
.tab-button {
  @apply relative transition-all duration-200 hover:text-gray-700;
}

.tab-button.active {
  @apply text-red-600;
}

.tab-content {
  @apply transition-all duration-300 ease-in-out;
}

.tab-content.hidden {
  @apply opacity-0 pointer-events-none;
}

/* View Toggle */
.view-toggle {
  @apply transition-all duration-200 hover:bg-gray-50;
}

.view-toggle.active {
  @apply bg-blue-500 text-white shadow-sm;
}

/* Ingredient Cards */
.ingredient-card {
  @apply transition-all duration-200;
}

.ingredient-card:hover {
  @apply shadow-sm;
}

.detailed-view {
  @apply block;
}

.compact-view {
  @apply hidden;
}

.view-compact .detailed-view {
  @apply hidden;
}

.view-compact .compact-view {
  @apply block;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Modal Animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-content {
  animation: modalFadeIn 0.2s ease-out;
}

/* Progress Ring Animation */
@keyframes drawCircle {
  from {
    stroke-dashoffset: 283;
  }
  to {
    stroke-dashoffset: calc(283 - (283 * var(--progress, 0)) / 100);
  }
}

.progress-ring {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: drawCircle 2s ease-out forwards;
}

/* Safety Score Pulse */
@keyframes scorePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
}

.safety-score-pulse {
  animation: scorePulse 3s infinite;
}

/* Stagger Animation */
.stagger-item {
  opacity: 0;
  animation: slideInLeft 0.6s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

/* Hover Effects */
.hover-lift {
  @apply transition-all duration-200;
}

.hover-lift:hover {
  @apply transform -translate-y-1 shadow-lg;
}

/* Enhanced Components */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 focus:ring-purple-500;
  }

  .btn-ghost {
    @apply border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 focus:ring-purple-500;
  }

  .btn-danger {
    @apply bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 focus:ring-red-500;
  }

  .btn-success {
    @apply bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 focus:ring-green-500;
  }

  .card {
    @apply bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow;
  }

  .card-interactive {
    @apply bg-white rounded-xl p-6 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-200 cursor-pointer;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-100 text-green-700;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-700;
  }

  .badge-danger {
    @apply bg-red-100 text-red-700;
  }

  .badge-info {
    @apply bg-blue-100 text-blue-700;
  }

  .section-pad {
    @apply py-16 md:py-24;
  }

  .headline {
    @apply font-bold tracking-tight;
  }

  .muted {
    @apply text-gray-600;
  }

  .focus-ring {
    @apply focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
  }

  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Analysis-specific components */
  .safety-indicator {
    @apply flex items-center justify-center w-12 h-12 rounded-xl font-bold text-lg shadow-sm transition-all duration-200;
  }

  .safety-safe {
    @apply bg-green-100 text-green-700 hover:bg-green-200;
  }

  .safety-caution {
    @apply bg-amber-100 text-amber-700 hover:bg-amber-200;
  }

  .safety-danger {
    @apply bg-red-100 text-red-700 hover:bg-red-200;
  }

  .metric-card {
    @apply bg-white rounded-xl p-4 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-200;
  }

  .progress-bar {
    @apply h-2 bg-gray-100 rounded-full overflow-hidden;
  }

  .progress-fill {
    @apply h-full transition-all duration-1000 ease-out;
  }

  .ingredient-tag {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium;
  }
}