@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 */
}

/* === DRIVER.JS CUSTOMIZATION === */
/* We target the specific classes with !important to override the library defaults */

.driver-popover {
  border-radius: 12px;
  /* Customize general text colors if needed */
  --driver-popover-title-color: #1e293b;
  --driver-popover-description-color: #475569;
}

/* "Next" and "Done" Buttons */
.driver-popover-next-btn {
  background-color: #0ea5e9 !important; /* Sky-500 */
  color: #ffffff !important;
  border: 1px solid #0ea5e9 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

.driver-popover-next-btn:hover {
  background-color: #0284c7 !important; /* Sky-600 */
  border-color: #0284c7 !important;
}

/* "Previous" Button */
.driver-popover-prev-btn {
  background-color: transparent !important;
  color: #64748b !important; /* Slate-500 */
  border: 1px solid #cbd5e1 !important; /* Slate-300 */
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-weight: 500 !important;
}

.driver-popover-prev-btn:hover {
  background-color: #f1f5f9 !important; /* Slate-100 */
  color: #334155 !important; /* Slate-700 */
}

/* Close Button (X) */
.driver-popover-close-btn {
  color: #94a3b8 !important; /* Slate-400 */
}
.driver-popover-close-btn:hover {
  color: #64748b !important; /* Slate-500 */
}