@import "tailwindcss";

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrapper {
  flex: 1;
}

/* ANNOTATION: A new, subtle gradient for the hero section background. It's lighter and less saturated than the footer. */
.hero-gradient-bg {
  background-image: radial-gradient(at top left, #e0e7ff, transparent 50%), radial-gradient(at top right, #dbeafe, transparent 50%);
}

.dark .hero-gradient-bg {
  background-image: radial-gradient(at top left, #1e293b, transparent 50%), radial-gradient(at top right, #312e81, transparent 50%);
}

.footer-gradient {
  background: linear-gradient(90deg, #4f46e5, #818cf8);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0; /* Start hidden */
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ANNOTATION: Added more stagger delays to handle the increased number of animated elements on the page. */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* === AI FLOW & GLOW EFFECTS === */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* Rotating gradient background - Added Red (#ef4444) */
.siri-gradient {
  background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #efaaaa, #06b6d4, #3b82f6);
}

/* Animated Inset Shadow Loop - Added Red step at 50% */
@keyframes siri-inset-loop {
  0% {
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.4); /* Blue */
  }
  25% {
    box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.4); /* Purple */
  }
  50% {
    box-shadow: inset 0 0 20px rgba(239, 168, 168, 0.4); /* Red */
  }
  75% {
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.4); /* Cyan */
  }
  100% {
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.4); /* Blue */
  }
}

.ai-glow-pulse {
  animation: siri-inset-loop 3s infinite linear;
  background-color: #f8fafc; /* Slate-50 for contrast */
}