apps/matrix-frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Cyber Terminal Dark Theme */
    --background: 220 20% 4%;
    --foreground: 180 100% 90%;

    --card: 220 25% 6%;
    --card-foreground: 180 100% 90%;

    --popover: 220 25% 6%;
    --popover-foreground: 180 100% 90%;

    /* Neon Cyan - Primary */
    --primary: 166 100% 50%;
    --primary-foreground: 220 20% 4%;

    /* Deep Navy - Secondary */
    --secondary: 220 30% 12%;
    --secondary-foreground: 180 100% 90%;

    --muted: 220 25% 15%;
    --muted-foreground: 200 20% 55%;

    /* Electric Teal - Accent */
    --accent: 175 100% 45%;
    --accent-foreground: 220 20% 4%;

    /* Hot Coral - Destructive/Alert */
    --destructive: 0 85% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Alert Orange */
    --warning: 30 100% 55%;
    --warning-foreground: 220 20% 4%;

    --border: 200 50% 20%;
    --input: 220 30% 15%;
    --ring: 166 100% 50%;

    --radius: 0.25rem;

    /* Custom Design Tokens */
    --glow-primary: 0 0 20px hsl(166 100% 50% / 0.5), 0 0 40px hsl(166 100% 50% / 0.3);
    --glow-accent: 0 0 20px hsl(175 100% 45% / 0.5), 0 0 40px hsl(175 100% 45% / 0.3);
    --glow-destructive: 0 0 20px hsl(0 85% 55% / 0.5), 0 0 40px hsl(0 85% 55% / 0.3);
    
    --gradient-primary: linear-gradient(135deg, hsl(166 100% 50%), hsl(175 100% 45%));
    --gradient-dark: linear-gradient(180deg, hsl(220 20% 4%), hsl(220 25% 8%));
    --gradient-card: linear-gradient(135deg, hsl(220 25% 8%), hsl(220 30% 6%));
    
    --scanline-opacity: 0.03;
    --noise-opacity: 0.02;

    --sidebar-background: 220 25% 6%;
    --sidebar-foreground: 180 100% 90%;
    --sidebar-primary: 166 100% 50%;
    --sidebar-primary-foreground: 220 20% 4%;
    --sidebar-accent: 220 30% 15%;
    --sidebar-accent-foreground: 180 100% 90%;
    --sidebar-border: 200 50% 20%;
    --sidebar-ring: 166 100% 50%;
  }

  .dark {
    --background: 220 20% 4%;
    --foreground: 180 100% 90%;
    --card: 220 25% 6%;
    --card-foreground: 180 100% 90%;
    --popover: 220 25% 6%;
    --popover-foreground: 180 100% 90%;
    --primary: 166 100% 50%;
    --primary-foreground: 220 20% 4%;
    --secondary: 220 30% 12%;
    --secondary-foreground: 180 100% 90%;
    --muted: 220 25% 15%;
    --muted-foreground: 200 20% 55%;
    --accent: 175 100% 45%;
    --accent-foreground: 220 20% 4%;
    --destructive: 0 85% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 200 50% 20%;
    --input: 220 30% 15%;
    --ring: 166 100% 50%;
  }

  .light {
    --background: 210 20% 98%;
    --foreground: 220 30% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 30% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 30% 10%;
    --primary: 166 80% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 93%;
    --secondary-foreground: 220 30% 10%;
    --muted: 210 15% 90%;
    --muted-foreground: 220 15% 40%;
    --accent: 175 70% 35%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 15% 85%;
    --input: 210 15% 90%;
    --ring: 166 80% 40%;
    --scanline-opacity: 0.01;
    --noise-opacity: 0.01;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    background-image: 
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        hsl(var(--foreground) / var(--scanline-opacity)) 2px,
        hsl(var(--foreground) / var(--scanline-opacity)) 4px
      );
    background-attachment: fixed;
  }

  ::selection {
    background: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
  }
}

@layer components {
  /* Glowing text effects */
  .text-glow {
    text-shadow: var(--glow-primary);
  }

  .text-glow-accent {
    text-shadow: var(--glow-accent);
  }

  .text-glow-destructive {
    text-shadow: var(--glow-destructive);
  }

  /* Box glow effects */
  .box-glow {
    box-shadow: var(--glow-primary);
  }

  .box-glow-accent {
    box-shadow: var(--glow-accent);
  }

  /* Cyber border effect */
  .cyber-border {
    @apply relative;
    border: 1px solid hsl(var(--primary) / 0.3);
  }

  .cyber-border::before {
    content: '';
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      90deg,
      hsl(var(--primary) / 0) 0%,
      hsl(var(--primary) / 0.1) 50%,
      hsl(var(--primary) / 0) 100%
    );
    animation: scan 3s linear infinite;
  }

  /* Terminal cursor blink */
  .cursor-blink::after {
    content: '▮';
    @apply text-primary ml-1;
    animation: blink 1s step-end infinite;
  }

  /* Data stream effect */
  .data-stream {
    @apply overflow-hidden relative;
  }

  .data-stream::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-full pointer-events-none;
    background: linear-gradient(
      180deg,
      hsl(var(--primary) / 0.1) 0%,
      transparent 10%,
      transparent 90%,
      hsl(var(--primary) / 0.1) 100%
    );
  }

  /* Grid overlay */
  .grid-overlay {
    background-image: 
      linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Breaking news ticker */
  .ticker {
    @apply overflow-hidden whitespace-nowrap;
  }

  .ticker-content {
    @apply inline-block;
    animation: ticker 30s linear infinite;
  }

  /* Glitch effect */
  .glitch {
    @apply relative;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    @apply absolute top-0 left-0 w-full h-full;
  }

  .glitch::before {
    left: 2px;
    text-shadow: -2px 0 hsl(var(--destructive));
    clip-path: inset(0);
    animation: glitch-1 2s infinite linear alternate-reverse;
  }

  .glitch::after {
    left: -2px;
    text-shadow: 2px 0 hsl(var(--accent));
    clip-path: inset(0);
    animation: glitch-2 2s infinite linear alternate-reverse;
  }

  /* Pulse ring */
  .pulse-ring {
    @apply relative;
  }

  .pulse-ring::before {
    content: '';
    @apply absolute inset-0 rounded-full;
    border: 2px solid hsl(var(--primary));
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@layer utilities {
  /* Typography */
  .font-display {
    font-family: 'Orbitron', sans-serif;
  }

  .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }

  .font-sans {
    font-family: 'Inter', sans-serif;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }
}

/* Keyframe animations */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes glitch-1 {
  0%, 100% { clip-path: inset(80% 0 0 0); }
  20% { clip-path: inset(10% 0 70% 0); }
  40% { clip-path: inset(50% 0 30% 0); }
  60% { clip-path: inset(30% 0 50% 0); }
  80% { clip-path: inset(0 0 80% 0); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(0 0 80% 0); }
  20% { clip-path: inset(30% 0 50% 0); }
  40% { clip-path: inset(70% 0 10% 0); }
  60% { clip-path: inset(10% 0 70% 0); }
  80% { clip-path: inset(60% 0 20% 0); }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes matrix-fall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}