/* css/hub-fundo.css — fundo do login e do Hub (visual de 13/10/2026).
   Malha de projeto fina, brilho laranja que "respira" e quatro linhas de
   corrente correndo sobre a malha. Quando uma corrente horizontal e uma
   vertical passam juntas por um cruzamento, js/hub-fundo.js acende um ponto
   ali. Tudo em CSS; o JS só move os pulsos (4 elementos) e cria o brilho.
   Usado por login.html e index.html. Não depende de styles.css. */

.hf-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0b111d; }
.hf-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(196, 210, 235, 0.09) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(196, 210, 235, 0.09) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 20%, transparent 75%);
  opacity: 0.8;
}
.hf-glow {
  position: absolute; width: 900px; height: 900px; left: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 90, 30, 0.22) 0%, rgba(235, 90, 30, 0.07) 38%, transparent 68%);
  animation: hf-breathe 14s ease-in-out infinite;
}
.hf-bg.hf-hub .hf-glow { left: 40%; top: -560px; }

/* Linhas de corrente: sempre em múltiplos de 48px, em cima da malha */
.hf-h { position: absolute; height: 1px; left: 0; right: 0; overflow: hidden; }
.hf-v { position: absolute; width: 1px; top: 0; bottom: 0; overflow: hidden; }
.hf-h.h1 { top: 192px; }
.hf-h.h2 { top: 480px; }
.hf-v.v1 { left: 192px; }
.hf-v.v2 { left: 816px; }
.hf-h i, .hf-v i { position: absolute; top: 0; left: 0; will-change: transform; }
.hf-h i { width: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(235, 90, 30, 0.75), transparent); transform: translateX(-100vw); }
.hf-v i { width: 1px; height: 22%; background: linear-gradient(180deg, transparent, rgba(235, 90, 30, 0.7), transparent); transform: translateY(-100vh); }

.hf-flash {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2d1 0, rgba(235, 90, 30, 0.95) 32%, rgba(235, 90, 30, 0) 70%);
  box-shadow: 0 0 22px 7px rgba(235, 90, 30, 0.40);
  animation: hf-flash 1.3s ease-out forwards;
}

@keyframes hf-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes hf-flash { 0% { transform: scale(.3); opacity: 0; } 14% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

@media (max-width: 820px) {
  .hf-h, .hf-v { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-glow { animation: none; }
  .hf-h, .hf-v { display: none; }
}