@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&family=Newsreader:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 96%;
  
  --card: 0 0% 5%;
  --card-foreground: 0 0% 96%;
  
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 96%;
  
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  
  --secondary: 0 0% 8%;
  --secondary-foreground: 0 0% 96%;
  
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 45%;
  
  --accent: 0 0% 10%;
  --accent-foreground: 0 0% 96%;
  
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 14%;
  --input: 0 0% 14%;
  --ring: 0 0% 60%;
  
  --radius: 6px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Menlo', monospace;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 96%;
  
  --card: 0 0% 5%;
  --card-foreground: 0 0% 96%;
  
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 96%;
  
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  
  --secondary: 0 0% 8%;
  --secondary-foreground: 0 0% 96%;
  
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 45%;
  
  --accent: 0 0% 10%;
  --accent-foreground: 0 0% 96%;
  
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 98%;
  
  --border: 0 0% 14%;
  --input: 0 0% 14%;
  --ring: 0 0% 60%;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased font-sans selection:bg-primary selection:text-primary-foreground;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif tracking-tight;
  }
}

@layer utilities {
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  
  /* Scanline effect */
  .scanlines {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.02) 50%,
      rgba(0,0,0,0.02)
    );
    background-size: 100% 4px;
    pointer-events: none;
  }

  /* Noise texture */
  .noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
  
  /* CRT Flicker Animation */
  @keyframes flicker {
    0% { opacity: 0.97; }
    5% { opacity: 0.95; }
    10% { opacity: 0.9; }
    15% { opacity: 0.95; }
    20% { opacity: 0.99; }
    50% { opacity: 0.95; }
    55% { opacity: 0.9; }
    60% { opacity: 0.99; }
    100% { opacity: 0.97; }
  }
  
  .animate-flicker {
    animation: flicker 4s infinite;
  }
  
  /* Smooth Fade Up */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .animate-fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes orbDrift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
  }

  .orb-drift {
    animation: orbDrift 20s ease-in-out infinite;
  }

  .orb-drift-delayed {
    animation: orbDrift 25s ease-in-out infinite;
    animation-delay: -8s;
  }

  @keyframes orbPulse {
    0% { transform: translate(0, 0) scale(1.1); }
    25% { transform: translate(15px, -10px) scale(1.18); }
    50% { transform: translate(-10px, 8px) scale(1.05); }
    75% { transform: translate(8px, -15px) scale(1.15); }
    100% { transform: translate(0, 0) scale(1.1); }
  }

  .orb-pulse {
    animation: orbPulse 4s ease-in-out infinite;
  }

  .orb-pulse-delayed {
    animation: orbPulse 5s ease-in-out infinite;
    animation-delay: -2s;
  }

  @keyframes pulseRing {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.08); }
  }

  .pulse-ring {
    animation: pulseRing 2s ease-in-out infinite;
  }

  .hero-glow {
    text-shadow: 0 0 30px rgba(52,211,153,0.15), 0 0 60px rgba(52,211,153,0.05);
  }

  @keyframes goPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { box-shadow: 0 0 20px 4px rgba(255,255,255,0.15); }
  }

  .go-pulse {
    animation: goPulse 1.5s ease-in-out infinite;
  }

  .typed-cursor {
    font-weight: 100;
    color: rgba(255, 255, 255, 0.7);
    font-size: inherit;
    line-height: inherit;
  }

  @keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .blink-cursor {
    animation: blinkCursor 1s step-end infinite;
  }

  .metallic-text {
    background: linear-gradient(
      135deg,
      #e8e8e8 0%,
      #ffffff 15%,
      #a0a0a0 30%,
      #ffffff 50%,
      #b0b0b0 65%,
      #ffffff 80%,
      #c0c0c0 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: metallicPulse 3s ease-in-out infinite;
  }

  @keyframes metallicPulse {
    0% { background-position: 0% 50%; filter: brightness(1); }
    25% { background-position: 50% 0%; filter: brightness(1.15); }
    50% { background-position: 100% 50%; filter: brightness(1.3); }
    75% { background-position: 50% 100%; filter: brightness(1.15); }
    100% { background-position: 0% 50%; filter: brightness(1); }
  }

  .page-sparkle {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px 2px rgba(255,255,255,0.4);
    animation: pageSparkle var(--duration, 1.5s) ease-in-out forwards;
  }

  @keyframes pageSparkle {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    30% { opacity: var(--sparkle-opacity, 0.5); transform: scale(1.2) rotate(90deg); }
    70% { opacity: var(--sparkle-opacity, 0.5); transform: scale(0.8) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(270deg); }
  }
}