@import "tailwindcss";

:root {
  --background: #0a0a0a;
  --foreground: #ededed;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 32px 8px rgba(255,255,255,0.0);
  }
  10%,
  90% {
    box-shadow: 0 0 32px 8px rgba(255,255,255,0.10);
  }
  50% {
    box-shadow: 0 0 48px 16px rgba(255,255,255,0.20);
  }
}

.pulse-glow {
  animation: pulse-glow 10.6s ease-in infinite;
}

@keyframes gentle-pan {
  0%, 100% {
    transform: scale(1.1) translate(0, 0);
  }
  25% {
    transform: scale(1.1) translate(-2%, -1%);
  }
  50% {
    transform: scale(1.1) translate(2%, -1%);
  }
  75% {
    transform: scale(1.1) translate(-1%, 1%);
  }
}

.pan-image {
  animation: gentle-pan 10s ease-in-out infinite;
}