/*
 * s1stema — o site: o núcleo do "em poucas linhas" e os cabos que ligam
 * ele a cada linha. Os cabos são desenhados pelo `cabos.js` num SVG que
 * cobre a seção inteira; aqui moram só a aparência e o movimento.
 */

/* ---------- o núcleo ---------- */

.nucleo {
  position: relative;
  display: none;
  width: 5.5rem;
  height: 5.5rem;
}

.js .nucleo {
  display: block;
}

.nucleo > span {
  position: absolute;
  border-radius: 50%;
}

.nucleo__anel {
  inset: 0;
  border: 1px solid var(--fio-forte);
  background: radial-gradient(circle at 50% 50%, rgba(9, 43, 128, 0.55), rgba(2, 6, 15, 0) 70%);
}

/* Um quarto do anel aceso, girando devagar: o sistema está ligado. */
.nucleo__arco {
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: var(--neon);
  border-right-color: rgba(var(--neon-rgb), 0.35);
  animation: nucleo-gira 7s linear infinite;
}

.nucleo__miolo {
  inset: 34%;
  background: radial-gradient(
    circle at 50% 45%,
    var(--neon-forte),
    var(--neon) 45%,
    rgba(var(--neon-rgb), 0) 72%
  );
  animation: nucleo-respira 3.2s ease-in-out infinite;
}

/* A onda que sai do núcleo quando uma linha abre (o JS dispara). */
.nucleo__onda {
  inset: 0;
  border: 1px solid var(--neon);
  opacity: 0;
}

/* A porta de onde os cabos saem, na borda direita. */
.nucleo__porta {
  top: calc(50% - 0.25rem);
  right: -0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--neon);
  background: var(--vazio);
}

@keyframes nucleo-gira {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nucleo-respira {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- os cabos ---------- */

.cabos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.cabo__fio,
.cabo__luz,
.cabo__pulso {
  fill: none;
  stroke-linecap: round;
}

.cabo__fio {
  stroke: var(--fio-forte);
  stroke-width: 1;
}

.cabo__luz {
  stroke: var(--neon);
  stroke-width: 1.25;
  opacity: 0;
  transition: opacity 280ms var(--saida);
}

.cabo__pulso {
  stroke: var(--neon-forte);
  stroke-width: 2;
  opacity: 0;
}

.cabo__ponta {
  fill: var(--vazio);
  stroke: var(--fio-forte);
  stroke-width: 1;
  transition:
    stroke 280ms var(--saida),
    fill 280ms var(--saida);
}

.cabo[data-perto] .cabo__luz {
  opacity: 0.45;
}

.cabo[data-aceso] .cabo__luz {
  opacity: 1;
}

.cabo[data-aceso] .cabo__ponta {
  fill: var(--neon);
  stroke: var(--neon);
}

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

/* No celular a lista ocupa a largura inteira: sem espaço para cabos. */
@media (max-width: 860px) {
  .js .nucleo,
  .cabos {
    display: none;
  }
}