@import 'tailwindcss';

@theme {
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}

html,
body {
  @apply bg-white dark:bg-gray-950;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

/* Custom styles for video container */
.video-container {
  transform: scaleX(
    -1
  ); /* Mirror the video horizontally for better UX */
}

/* Canvas should not be mirrored to match pose coordinates */
canvas {
  pointer-events: none;
}

/* Animation for rep counter */
@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

.rep-pulse {
  animation: pulse-green 0.6s ease-out;
}

/* Gradient background animations */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}
