@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    --primary: #1a56db;
    --primary-dark: #0f2e6b;
    --background: #f8fafc;
    --card: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
  }

  .dark {
    --background: #0f172a;
    --card: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
  }

  * {
    border-color: var(--border);
  }

  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background);
    color: var(--text);
  }
}

@layer components {
  .navbar-brand-gradient {
    background: linear-gradient(135deg, #1a56db 0%, #0f2e6b 100%);
  }

  .scanner-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .card-hover {
    @apply transition-shadow duration-200 hover:shadow-md;
  }

  .stat-card {
    @apply bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6 shadow-sm;
  }

  .page-header {
    @apply flex items-center justify-between mb-6;
  }

  .page-title {
    @apply text-2xl font-semibold text-slate-800 dark:text-slate-100;
  }

  .scan-success {
    animation: slideIn 0.3s ease-out;
  }

  @keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .rating-star-1 { @apply text-red-500; }
  .rating-star-2 { @apply text-orange-500; }
  .rating-star-3 { @apply text-yellow-500; }
  .rating-star-4 { @apply text-blue-500; }
  .rating-star-5 { @apply text-green-500; }

  .shape-float {
    position: absolute;
    opacity: 0.08;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: floatShape 14s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
  }

  .shape-float-2 {
    animation-duration: 18s;
    animation-delay: -4s;
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  }

  .shape-float-3 {
    animation-duration: 22s;
    animation-delay: -9s;
    border-radius: 50%;
  }

  .shape-float-4 {
    animation-duration: 16s;
    animation-delay: -2s;
    border-radius: 0;
    transform: rotate(45deg);
  }

  @keyframes floatShape {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(20px, -30px) rotate(20deg); }
    50%  { transform: translate(-15px, 20px) rotate(-10deg); }
    75%  { transform: translate(25px, 10px) rotate(15deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }

  /* AI Robotics feedback form animations */
  @keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33%  { transform: translate(40px, -60px) scale(1.1); opacity: 0.25; }
    66%  { transform: translate(-30px, 40px) scale(0.9); opacity: 0.1; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  }

  @keyframes orbFloat2 {
    0%   { transform: translate(0, 0) scale(1.1); opacity: 0.1; }
    50%  { transform: translate(-50px, -40px) scale(0.85); opacity: 0.2; }
    100% { transform: translate(0, 0) scale(1.1); opacity: 0.1; }
  }

  @keyframes orbFloat3 {
    0%   { transform: translate(0, 0); opacity: 0.08; }
    25%  { transform: translate(60px, 30px); opacity: 0.18; }
    75%  { transform: translate(-20px, -50px); opacity: 0.12; }
    100% { transform: translate(0, 0); opacity: 0.08; }
  }

  @keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.05); }
  }

  @keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

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

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes starPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
  }

  @keyframes gridScan {
    0%   { background-position: 0 0; }
    100% { background-position: 0 80px; }
  }

  @keyframes successScale {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }

  .ai-orb-1 {
    animation: orbFloat 18s ease-in-out infinite;
    will-change: transform;
  }
  .ai-orb-2 {
    animation: orbFloat2 22s ease-in-out infinite;
    will-change: transform;
  }
  .ai-orb-3 {
    animation: orbFloat3 26s ease-in-out infinite;
    will-change: transform;
  }
  .ai-card-enter {
    animation: cardFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .ai-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
  }
  .ai-fade-in {
    animation: fadeIn 0.4s ease forwards;
  }
  .ai-star-pop {
    animation: starPop 0.25s ease;
  }
  .ai-success-icon {
    animation: successScale 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .ai-grid-bg {
    background-image: linear-gradient(rgba(56,189,248,0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(56,189,248,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridScan 8s linear infinite;
  }
}