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

:root {
  --font-display: "Barlow Condensed", "Bebas Neue", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html, body { background: #0f0518; color: #fff; }

body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain textura sutil pra tirar sensação de tela chapada */
.noise::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Brackets de focagem tipo câmera (assinatura visual do folheto) */
.bracket-frame { position: relative; }
.bracket-frame::before,
.bracket-frame::after,
.bracket-frame > .bl,
.bracket-frame > .br {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: #ADFF00;
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 5;
}
.bracket-frame::before { top: -6px; left: -6px; border-top-width: 4px; border-left-width: 4px; }
.bracket-frame::after { top: -6px; right: -6px; border-top-width: 4px; border-right-width: 4px; }
.bracket-frame > .bl { bottom: -6px; left: -6px; border-bottom-width: 4px; border-left-width: 4px; }
.bracket-frame > .br { bottom: -6px; right: -6px; border-bottom-width: 4px; border-right-width: 4px; }

@media (min-width: 768px) {
  .bracket-frame::before, .bracket-frame::after,
  .bracket-frame > .bl, .bracket-frame > .br { width: 48px; height: 48px; border-width: 0; }
  .bracket-frame::before { border-top-width: 5px; border-left-width: 5px; }
  .bracket-frame::after { border-top-width: 5px; border-right-width: 5px; }
  .bracket-frame > .bl { border-bottom-width: 5px; border-left-width: 5px; }
  .bracket-frame > .br { border-bottom-width: 5px; border-right-width: 5px; }
}

/* Focus visível pra a11y */
:focus-visible {
  outline: 2px solid #ADFF00;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selection */
::selection { background: #ADFF00; color: #0f0518; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f0518; }
::-webkit-scrollbar-thumb { background: #2a1a3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ADFF00; }

/* Cursor blink no headline */
.cursor-blink::after {
  content: "_";
  color: #ADFF00;
  animation: blink 1.1s step-end infinite;
  margin-left: 0.05em;
}

/* Radial glow no hero */
.glow-radial {
  background: radial-gradient(ellipse at 50% 30%, rgba(173,255,0,0.15) 0%, transparent 60%);
}

/* Scanline animada dentro do bracket-frame */
.scanline-container { position: relative; overflow: hidden; }
.scanline-container::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ADFF00, transparent);
  box-shadow: 0 0 12px #ADFF00;
  animation: scan 4s linear infinite;
  z-index: 4;
  pointer-events: none;
}