/* 14/11 · nebulosas: nuvens de galáxia atrás do conteúdo, por cima da poeira.
   a forma vem de uma textura (máscara); a cor é variável e muda de seção em
   seção (nebula.js). as bordas da textura já somem, a caixa nunca aparece. */
#nebula { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
#nebula i { position: absolute; left: 50%; top: 50%; width: 185vmax; height: 185vmax; margin: -92.5vmax 0 0 -92.5vmax; will-change: transform;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
#nebula i { opacity: calc(var(--o) * (1 - var(--img, 0) * .75)); }
#nebula .nb-a { --o: .5; background: rgb(var(--nb1, 50 95 180)); -webkit-mask-image: url(assets/nebula/a.webp); mask-image: url(assets/nebula/a.webp);
  transform: translate(var(--ax, 0), var(--ay, 0)) rotate(var(--ar, 0deg)); }
#nebula .nb-b { --o: .4; background: rgb(var(--nb2, 30 130 150)); -webkit-mask-image: url(assets/nebula/b.webp); mask-image: url(assets/nebula/b.webp);
  transform: translate(var(--bx, 12vw), var(--by, 0)) rotate(var(--br, 140deg)) scale(.8); }
body.bang-off #nebula { visibility: hidden !important; }
@media (max-width: 760px) { #nebula i { width: 230vmax; height: 230vmax; margin: -115vmax 0 0 -115vmax; } #nebula .nb-a { --o: .56; } }
/* o shader (nebula.js): quando ele sobe, as nuvens de CSS saem */
/* a nebulosa fica POR CIMA do quadro da poeira (que é opaco), somando luz em "tela":
   o gás aparece sempre e a poeira continua acesa por cima dele, como se o gás estivesse atrás */
canvas.nb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; mix-blend-mode: screen; }
#universe canvas:not(.nb) { position: relative; z-index: 1; }
#nebula.gl i { display: none; }

/* ══ o tom do céu (14/11, noite): manchas lisas de azul-petróleo, sem fumaça ══
   a camada é um ladrilho de 170% da altura da tela, repetido na vertical; cada mancha fica longe das bordas
   do ladrilho para a emenda não aparecer. --sg (nebula.js) desloca o ladrilho com o scroll */
.sky-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background-image:
    radial-gradient(38% 26% at 74% 22%, rgba(46, 98, 140, 0.41) 0, rgba(46, 98, 140, 0.18) 45%, transparent 78%),
    radial-gradient(34% 22% at 18% 42%, rgba(36, 80, 122, 0.33) 0, rgba(36, 80, 122, 0.13) 45%, transparent 78%),
    radial-gradient(30% 18% at 56% 58%, rgba(40, 88, 128, 0.25) 0, transparent 75%),
    radial-gradient(40% 24% at 86% 76%, rgba(34, 78, 120, 0.34) 0, rgba(34, 78, 120, 0.13) 45%, transparent 78%),
    radial-gradient(32% 20% at 30% 86%, rgba(42, 84, 126, 0.28) 0, transparent 76%);
  background-size: 100% 170vh; background-repeat: repeat-y; background-position: 0 calc(var(--sg, 0px) * -1); }
#nebula .sky-glow { position: absolute; inset: 0; mix-blend-mode: normal; }
canvas.nb { display: none !important; }

/* 14/11: com o céu da própria imagem da abertura como fundo, as manchas de gradiente saem */
.sky-glow { display: none !important; }