/*
  neon.css: o toque hacker dos sites das disciplinas (chuva de 0 e 1 e brilho neon, como no PyQuiz).
  versão 1 · 2026-10-26 · NESTE SITE (Fundamentos de Computação em Nuvem) o neon é azul-céu, com toques
  de lilás (a chuva alterna as duas). O link da disciplina na barra é o símbolo da disciplina, a nuvem
  com as trilhas de circuito (assets/img/nuvem-trilhas.svg). Não copie esta versão para os outros sites.

  Carregue depois do estilo.css e do disciplina.css.
*/

:root {
  --neon: #5ec8ff;
  --neon-brilho: rgba(94, 200, 255, .45);
  --neon-2: #b89cff;
  --neon-2-brilho: rgba(184, 156, 255, .4);
}

/* no claro, azul e lilás mais fechados, para dar leitura no fundo branco */
[data-tema="claro"] {
  --neon: #0a6a9e;
  --neon-brilho: rgba(10, 106, 158, .2);
  --neon-2: #6a3fc4;
  --neon-2-brilho: rgba(106, 63, 196, .2);
}

/* chuva de 0 e 1 atrás da abertura, sumindo embaixo */
.chuva-matrix {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .3;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}

[data-tema="claro"] .chuva-matrix {
  opacity: .16;
}


/* palavra em neon (ex.: "Python" no título) */
.neon {
  color: var(--neon);
  text-shadow:
    0 0 8px var(--neon-brilho),
    0 0 24px var(--neon-brilho);
}

[data-tema="claro"] .neon {
  text-shadow: none;
}

/* o logo flutuante ganha um halo na cor do neon */
.logo-flutua.neon-halo {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 0 0 1px rgba(0, 0, 0, .07),
    0 24px 50px -18px rgba(0, 0, 0, .7),
    0 0 40px -4px var(--neon-brilho);
}

/* o prompt e as etiquetas verdes da página também brilham de leve, em lilás */
.prompt b,
.etiqueta.verde {
  text-shadow: 0 0 10px var(--neon-2-brilho);
}


/* letra grossa e fechada, como a do logo do JS, nas palavras em neon e no link da barra */
.neon,
.marcas .marca-disc {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-stretch: 100%;
  letter-spacing: -.01em;
}

/* o símbolo da disciplina como botão da página inicial, na barra do topo */
.marcas .marca-disc.marca-logo {
  display: inline-flex;
  padding: 0;
  text-shadow: none;
}

.marca-logo img {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  box-shadow: 0 0 10px var(--neon-brilho);
  transition: box-shadow .2s, transform .2s;
}

.marca-logo:hover img,
.marca-logo:focus-visible img {
  box-shadow: 0 0 18px var(--neon-2-brilho), 0 0 4px var(--neon-2);
  transform: scale(1.06);
}

.pausado .marca-logo img {
  transition: none;
}