/* Fundo animado da tela de login: rede de pontos (canvas) + ícones de tecnologia flutuando. */

body.login {
  background: #0d1310;
}

.fundo-tech {
  position: fixed;
  inset: 0;
  z-index: 0;
  visibility: hidden; /* o JS move o fundo para o <body>, atrás da caixa de login */
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(55, 165, 46, .20), transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 85%, rgba(55, 165, 46, .14), transparent 70%),
    linear-gradient(160deg, #111a15 0%, #0b100d 100%);
}

body > .fundo-tech {
  visibility: visible;
}

/* Grade sutil, como uma placa de circuito */
.fundo-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(55, 165, 46, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 165, 46, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, transparent 20%, #000 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, #000 75%);
}

#fundo-rede {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Caixa de login sempre acima do fundo */
.login #container {
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(55, 165, 46, .25);
}

/* Ícones */
.fundo-tech .icone {
  position: absolute;
  width: 64px;
  height: 64px;
  fill: none;
  stroke: #37A52E;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .28;
  filter: drop-shadow(0 0 6px rgba(55, 165, 46, .55));
  animation: flutuar 14s ease-in-out infinite;
}

/* Lado esquerdo */
.i-servidor { top: 12%; left: 8%;  width: 78px; height: 78px; animation-duration: 16s; }
.i-wifi     { top: 42%; left: 4%;  animation-duration: 12s; animation-delay: -3s; }
.i-chip     { top: 70%; left: 12%; width: 72px; height: 72px; animation-duration: 18s; animation-delay: -6s; }
.i-fibra    { top: 26%; left: 22%; width: 90px; height: 90px; animation-duration: 20s; animation-delay: -9s; }
.i-codigo   { top: 86%; left: 30%; width: 52px; height: 52px; animation-duration: 13s; animation-delay: -2s; }

/* Lado direito */
.i-nuvem    { top: 10%; right: 10%; width: 86px; height: 86px; animation-duration: 17s; animation-delay: -4s; }
.i-globo    { top: 38%; right: 5%;  width: 76px; height: 76px; animation-name: girar-flutuar; animation-duration: 24s; }
.i-torre    { top: 66%; right: 14%; width: 80px; height: 80px; animation-duration: 15s; animation-delay: -7s; }
.i-escudo   { top: 22%; right: 25%; width: 54px; height: 54px; animation-duration: 11s; animation-delay: -5s; }
.i-roteador { top: 84%; right: 30%; width: 66px; height: 66px; animation-duration: 19s; animation-delay: -10s; }

@keyframes flutuar {
  0%, 100% { transform: translate(0, 0) rotate(0deg);      opacity: .22; }
  25%      { transform: translate(14px, -22px) rotate(3deg); opacity: .38; }
  50%      { transform: translate(-8px, -36px) rotate(-2deg); opacity: .28; }
  75%      { transform: translate(-16px, -12px) rotate(2deg); opacity: .40; }
}

@keyframes girar-flutuar {
  0%   { transform: translateY(0) rotate(0deg);      opacity: .25; }
  50%  { transform: translateY(-26px) rotate(180deg); opacity: .40; }
  100% { transform: translateY(0) rotate(360deg);    opacity: .25; }
}

/* Celular: a caixa ocupa a tela, deixa só alguns ícones */
@media (max-width: 767px) {
  .i-fibra, .i-codigo, .i-escudo, .i-roteador, .i-chip { display: none; }
  .fundo-tech .icone { width: 48px; height: 48px; }
}

/* Quem desativou animações no sistema vê o fundo parado */
@media (prefers-reduced-motion: reduce) {
  .fundo-tech .icone { animation: none; }
}