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

:root {
  --bg: #0a0a0a;
  --card: #0f0f0f;
  --amber: #f59e0b;
  --green: #22c55e;
  --text: #e4e4e7;
  --muted: #71717a;
  --border: #1c1c1e;
  --border2: #27272a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.018) 3px,
    rgba(0, 0, 0, 0.018) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Subtle vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Text selection */
::selection {
  background: rgba(245, 158, 11, 0.25);
  color: var(--text);
}

/* Cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor-blink {
  animation: blink 1.1s step-end infinite;
}

/* Fade up entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.55s ease forwards;
}

/* Draw line */
@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}