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

/* React PDF CSS */
@import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
@import 'react-pdf/dist/esm/Page/TextLayer.css';

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --radius: 0.5rem;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Print Styles */
@media print {
  body {
    background-color: white !important;
    color: black !important;
  }

  /* Hide navigation elements and buttons when printing */
  header,
  nav,
  footer,
  button,
  .no-print {
    display: none !important;
  }

  /* Ensure content is visible on white background */
  #technical-results-content,
  #interview-results-content,
  #feedback-content {
    background-color: white !important;
    color: black !important;
    padding: 20px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Style cards for print */
  .card {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background-color: white !important;
    color: black !important;
    break-inside: avoid !important;
    margin-bottom: 20px !important;
  }

  /* Improve progress bars and badges for print */
  .progress, [class*="bg-"] {
    background-color: #f1f1f1 !important;
    border: 1px solid #ddd !important;
    print-color-adjust: exact !important;
  }

  /* Print on separate pages */
  .page-break {
    page-break-before: always !important;
  }
}

/* Sliding logo animation - seamless loop */
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-slide-left {
  animation: slide-left 15s linear infinite;
}

/* Pause animation on hover */
.animate-slide-left:hover {
  animation-play-state: paused;
}

/* Enhanced Talking Animations for TTS */
@keyframes animate-talking {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
  }
  25% {
    transform: scale(1.05) rotate(1deg);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
  }
  50% {
    transform: scale(1.08) rotate(-0.5deg);
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.7));
  }
  75% {
    transform: scale(1.03) rotate(0.8deg);
    filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.6));
  }
}

@keyframes animate-talking-flow {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
  50% {
    stroke-dashoffset: -15;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -30;
    opacity: 0.8;
  }
}

@keyframes animate-talking-flow-reverse {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  50% {
    stroke-dashoffset: 12;
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: 24;
    opacity: 0.5;
  }
}

@keyframes animate-talking-pulse {
  0%, 100% {
    opacity: 0.2;
    stroke-width: 0.5;
  }
  50% {
    opacity: 0.4;
    stroke-width: 0.8;
  }
}

@keyframes animate-talking-glow {
  0%, 100% {
    opacity: 0.1;
    stroke-width: 1;
  }
  50% {
    opacity: 0.4;
    stroke-width: 3;
  }
}

.animate-talking {
  animation: animate-talking 0.8s ease-in-out infinite;
}

.animate-talking-flow {
  animation: animate-talking-flow 1.2s linear infinite;
}

.animate-talking-flow-reverse {
  animation: animate-talking-flow-reverse 1.5s linear infinite reverse;
}

.animate-talking-pulse {
  animation: animate-talking-pulse 0.6s ease-in-out infinite;
}

.animate-talking-glow {
  animation: animate-talking-glow 1s ease-in-out infinite;
}

/* Existing animations for non-talking state */