@import url('https://googleapis.com');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --font-display: "Space Grotesk", sans-serif;
  --color-pink-soft: #ff8fb1;
  --color-pink-deep: #ff4d6d;
  --color-brand-red: #ff003c;
}

@layer base {
  body {
    @apply bg-[#050505] text-white selection:bg-brand-red/30;
  }
}

.terminal-cursor {
  border-right: 2px solid;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: var(--color-pink-deep); }
}

.glow-text {
  text-shadow: 0 0 10px rgba(255, 77, 109, 0.5), 0 0 20px rgba(255, 77, 109, 0.3);
}

.scanline {
  width: 100%;
  height: 100px;
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.1;
  position: absolute;
  bottom: 100%;
  animation: scanline 10s linear infinite;
}

@keyframes scanline {
  0% { bottom: 100%; }
  100% { bottom: -100px; }
}