/* DataRain — background interativo · IDV Estúdio RDC
   Linhas em azul sobre fundo #131313 / azul-marinho. Ajuste as cores aqui. */
:root {
  --dr-bg-0: #0a0b14;
  --dr-bg-1: #0d0f24;
  --dr-bg-2: #131313;
  --dr-calm: #3a6bff;   /* azul elétrico — linhas em repouso */
  --dr-mid: #6a9bff;    /* azul médio — linhas aceleradas */
  --dr-hot: #bcd6ff;    /* azul claro — linhas mais rápidas + halo do cursor */
  --dr-core: #ffffff;   /* faíscas na ponta das linhas */
  --dr-intensity: 2.4;  /* brilho das linhas (original: 1.3) */
  --dr-vignette: 0.62;
  --dr-grain: 0.05;
  --dr-bloom-blur: 10px;
  --dr-bloom-opacity: 0.9;
}

.dr-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--dr-bg-1) 0%, var(--dr-bg-0) 55%, var(--dr-bg-2) 100%);
  animation: dr-fade-in 1.2s ease-out both;
}

/* versão contida (ex.: só no hero) */
.dr-root--contained {
  position: absolute;
}

.dr-root canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.dr-bloom {
  filter: blur(var(--dr-bloom-blur));
  opacity: var(--dr-bloom-opacity);
  mix-blend-mode: screen;
  transform: translateZ(0);
}

.dr-main {
  mix-blend-mode: screen;
}

.dr-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, var(--dr-vignette)) 100%);
}

.dr-grain {
  position: absolute;
  inset: -50%;
  opacity: var(--dr-grain);
  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='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes dr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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