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

@layer utilities {
  .blueprint-grid {
    background-color: #020617;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      radial-gradient(circle at 50% 0%, #1e3a8a 0%, #020617 70%);
    background-size: 50px 50px, 50px 50px, 100% 100%;
    background-attachment: fixed;
  }

  .glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  .btn-3d {
    transition: all 0.1s;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  }

  .btn-3d:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  }

  /* Hide scrollbar for cleaner look */
  body::-webkit-scrollbar {
    width: 8px;
  }

  body::-webkit-scrollbar-track {
    background: #0f172a;
  }

  body::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
  }
}