@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

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

@layer base {
  :root {
    --bg:       #0b0c10;
    --surface:  #13141a;
    --border:   #1f2130;
    --accent:   #c8ff57;
    --accent2:  #57ffc8;
    --text:     #e8eaf0;
    --muted:    #5a5d72;
    --error:    #ff5757;
    --radius:   14px;
  }
  
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'DM Mono', monospace;
  }

  h1 {
    font-family: 'DM Serif Display', serif;
  }
}

@layer components {
  /* Animated Background Grid */
  .bg-grid {
    background-image:
      linear-gradient(rgba(200,255,87,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,87,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridDrift 20s linear infinite;
  }

  /* Animated Button Shine */
  .btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
  }
  .btn-submit:hover::after {
    transform: translateX(100%);
  }
}

@layer utilities {
  .animate-pulse-slow { animation: pulse 6s ease-in-out infinite alternate; }
  .animate-card-in { animation: cardIn .55s cubic-bezier(.22,1,.36,1) both; }
  .animate-blink { animation: blink 1.4s ease-in-out infinite; }
  .animate-shake { animation: shake .35s ease; }

  @keyframes gridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 48px 48px; }
  }
  @keyframes pulse {
    from { opacity: .25; transform: scale(1);   }
    to   { opacity: .45; transform: scale(1.08); }
  }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes blink {
    0%,100% { opacity: 1; }
    50%     { opacity: .2; }
  }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    60%     { transform: translateX(6px); }
  }
}