/* scroll-behavior: smooth removido de proposito: ele faz o navegador ANIMAR
   os ajustes de rolagem que o ScrollTrigger aplica ao fixar as secoes
   pinadas (Processo/Portfolio), causando a sensacao de a tela "andar
   sozinha". Tambem fazia as ancoras do menu atravessarem em camera lenta
   as secoes pinadas. */
  body { margin: 0; background: #070B14; }
  a { color: #EEF2FC; }
  a:hover { color: #6E96FF; }
  ::selection { background: #4D7DFF; color: #070B14; }
  @keyframes marqueeB2 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes marqueeB2r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes spinB2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes pulseGlowB2 { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } }
  @keyframes starDriftB2 { from { transform: translateY(0); } to { transform: translateY(-2000px); } }

/* Starfield background layer (behind all content). Dot positions live in
   --star-shadow (css/starfield.css); the ::after copy sits one animation
   cycle below the original so the drift loops seamlessly. The source export
   carried this second copy as a non-functional "style-after" HTML attribute
   (not real CSS), so previously the sky just drifted upward and emptied out
   after ~1 cycle instead of looping. */
.star-layer {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--star-shadow);
  animation: starDriftB2 var(--star-duration) linear infinite;
}
.star-layer::after {
  content: '';
  position: absolute;
  top: 2000px;
  left: 0;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--star-shadow);
}

/* Hover effects. The source export carried these as a non-functional
   "style-hover" HTML attribute with no matching CSS, so buttons/links never
   actually reacted on hover; promoted to real :hover rules below. */
.hoverfx-1:hover {
  background: rgba(77,125,255,0.15);
  color: #EEF2FC;
}
.hoverfx-2:hover {
  background: rgba(77,125,255,0.15);
  color: #EEF2FC;
}
.hoverfx-3:hover {
  background: rgba(77,125,255,0.15);
  color: #EEF2FC;
}
.hoverfx-4:hover {
  background: rgba(77,125,255,0.15);
  color: #EEF2FC;
}
.hoverfx-5:hover {
  background: #6E96FF;
  color: #070B14;
}
.hoverfx-6:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 40px rgba(77,125,255,0.45);
  color: #070B14;
}
.hoverfx-7:hover {
  background: #4D7DFF;
  padding-left: 36px;
  color: #070B14;
}
.hoverfx-8:hover {
  transform: scale(1.04);
}
.hoverfx-9:hover {
  transform: scale(1.04);
}
.hoverfx-10:hover {
  transform: scale(1.04);
}
.hoverfx-11:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(77,125,255,0.5);
  color: #070B14;
}
.hoverfx-12:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 rgba(77,125,255,0.8);
  border-color: #4D7DFF;
}
.hoverfx-13:hover {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 0 50px rgba(77,125,255,0.6);
  color: #070B14;
}
.hoverfx-14:hover {
  transform: scale(1.06);
  border-color: #4D7DFF;
  color: #6E96FF;
}