/* SPNV. demos — sistema visual compartilhado
   Regra: tudo P&B. O que está ativo "acende" (bloom). Cor só dentro da mídia quando há interação. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #050505;
  --bg-2: #0d0d0d;
  --ink: #f2f2ee;
  --dim: #8c8c88;
  --faint: #3a3a38;
  --line: rgba(242, 242, 238, 0.12);
  --accent: #ff5a1f; /* laranja-fogo das capas de out/2026. Só em variação P1 com acento. */
  --glow: 0 0 6px rgba(255,255,255,.85), 0 0 22px rgba(255,255,255,.45), 0 0 64px rgba(255,255,255,.25);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Tipografia */
.display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: .9;
  text-transform: uppercase;
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.mono b, .mono strong { color: var(--ink); font-weight: 500; }

/* Brilho da marca: luz vazando, como o avatar SUPERNOVA */
.glow { text-shadow: var(--glow); }
.bloom { position: relative; }
.bloom::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: #fff;
  filter: blur(14px);
  opacity: .7;
  pointer-events: none;
  transform: scaleX(1.04);
}

/* Linhas de TV antiga */
.scanlines::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* Grão global */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); }
  80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* Barra de demo (volta pro índice + código da demo) */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  z-index: 1000;
  pointer-events: none;
}
.demo-bar > * { pointer-events: auto; }
.demo-bar .brand { font-family: var(--display); font-variation-settings: 'wdth' 125; font-weight: 850; font-size: 15px; letter-spacing: -.01em; }
.demo-bar .brand:hover { text-shadow: var(--glow); }

@media (max-width: 640px) {
  .demo-bar { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}