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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 4%;
    --foreground: 0 0% 95%;

    --card: 0 0% 6%;
    --card-foreground: 0 0% 95%;

    --popover: 0 0% 6%;
    --popover-foreground: 0 0% 95%;

    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 95%;

    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 60%;

    --accent: 330 81% 60%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14%;
    --input: 0 0% 14%;
    --ring: 24 95% 53%;

    --radius: 0.75rem;

    --gradient-primary: linear-gradient(135deg, hsl(24, 95%, 53%), hsl(330, 81%, 60%));
    --gradient-soft: linear-gradient(180deg, hsl(24, 95%, 53%, 0.1), transparent);
    --glow: 24 95% 53%;
    --glow-soft: 330 81% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-mono;
  }
}

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
All colors MUST be HSL.
*/

@keyframes terminal-typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes terminal-cursor {
  0%, 100% { border-right-color: hsl(24, 95%, 53%); }
  50% { border-right-color: transparent; }
}

@keyframes dashboard-reveal {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes number-count {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

@keyframes thinking-hide {
  to { opacity: 0; height: 0; margin: 0; overflow: hidden; }
}

@keyframes ai-text-reveal {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.terminal-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
  animation:
    terminal-typing 2.5s steps(48, end) forwards,
    terminal-cursor 0.8s step-end 4;
  width: 0;
}

.thinking-dots {
  opacity: 0;
  animation:
    ai-text-reveal 0.2s ease-out forwards 2.7s,
    thinking-hide 0.2s ease-out forwards 3.3s;
}

.thinking-dot {
  animation: thinking-pulse 0.6s ease-in-out infinite;
  animation-delay: 2.8s;
}

.ai-response {
  opacity: 0;
  animation: ai-text-reveal 0.6s ease-out forwards;
  animation-delay: 3.4s;
}

.dashboard-preview {
  opacity: 0;
  animation: dashboard-reveal 0.8s ease-out forwards;
  animation-delay: 4s;
}

.dashboard-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: bar-grow 0.6s ease-out forwards;
}

.dashboard-number {
  opacity: 0;
  animation: number-count 0.5s ease-out forwards;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.012;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
