/* Variáveis globais do projeto */
:root {
  --bg-cor:   #080b14;
  --acento:   #00e5ff;
  --acento2:  #7c4dff;
  --texto:    #e0f7ff;
  --subtexto: #7bafc4;
  --fonte-d:  'Orbitron', sans-serif;
  --fonte-c:  'Exo 2', sans-serif;
}

/* Reset base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  background: var(--bg-cor);
  color: var(--texto);
  font-family: var(--fonte-c);
}

/* Container fixo que cobre toda a tela */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Grade de perspectiva animada no chão */
.bg-grid {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%) perspective(600px) rotateX(60deg);
  width: 200%;
  height: 70%;
  background-image:
    linear-gradient(rgba(0,229,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: bgGridMove 12s linear infinite;
}

@keyframes bgGridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* Aurora — cor definida por tema abaixo */
.bg-aurora {
  position: absolute;
  inset: 0;
  animation: bgAuroraShift 14s ease-in-out infinite alternate;
}

@keyframes bgAuroraShift {
  0%   { opacity: 0.7; }
  100% { opacity: 1.0; }
}

/* Anéis orbitais — base comum */
.bg-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
}

/* Ponto de luz que gira na borda do anel */
.bg-orbit .dot {
  position: absolute;
  top: -4px;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Anel interno — mais rápido, cyan */
.bg-orbit.o1 {
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-color: rgba(0,229,255,0.15);
  animation: bgSpin 18s linear infinite;
}
.bg-orbit.o1 .dot {
  width: 8px;
  height: 8px;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento), 0 0 30px var(--acento);
}

/* Anel médio — sentido inverso, roxo */
.bg-orbit.o2 {
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-color: rgba(124,77,255,0.12);
  animation: bgSpin 28s linear infinite reverse;
}
.bg-orbit.o2 .dot {
  width: 6px;
  height: 6px;
  top: -3px;
  background: var(--acento2);
  box-shadow: 0 0 10px var(--acento2), 0 0 24px var(--acento2);
}

/* Anel externo — bem lento, quase invisível */
.bg-orbit.o3 {
  width: 860px;
  height: 860px;
  margin: -430px 0 0 -430px;
  border-color: rgba(0,229,255,0.06);
  animation: bgSpin 42s linear infinite;
}
.bg-orbit.o3 .dot {
  width: 5px;
  height: 5px;
  top: -2.5px;
  background: rgba(0,229,255,0.7);
  box-shadow: 0 0 8px var(--acento);
}

@keyframes bgSpin {
  to { transform: rotate(360deg); }
}

/* Estrelas geradas via bg-scene.js */
.bg-stars {
  position: absolute;
  inset: 0;
}

.bg-stars span {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: bgTwinkle var(--d, 5s) ease-in-out infinite alternate;
}

@keyframes bgTwinkle {
  from { opacity: 0.1; transform: scale(0.8); }
  to   { opacity: 0.9; transform: scale(1.2); }
}

/* Hexágonos flutuantes decorativos */
.bg-hexfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-hexfield .hex {
  position: absolute;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  opacity: 0;
  animation: bgHexFloat 12s ease-in-out infinite;
}

/* Posições e tamanhos individuais de cada hexágono */
.bg-hexfield .h1 { width: 60px; height: 60px; background: rgba(0,229,255,0.06);  top: 15%; left: 8%;   animation-delay: 0s;   animation-duration: 14s; }
.bg-hexfield .h2 { width: 40px; height: 40px; background: rgba(124,77,255,0.08); top: 65%; left: 12%;  animation-delay: 3s;   animation-duration: 10s; }
.bg-hexfield .h3 { width: 80px; height: 80px; background: rgba(0,229,255,0.04);  top: 30%; right: 6%;  animation-delay: 5s;   animation-duration: 18s; }
.bg-hexfield .h4 { width: 30px; height: 30px; background: rgba(124,77,255,0.10); top: 75%; right: 15%; animation-delay: 1.5s; animation-duration: 12s; }
.bg-hexfield .h5 { width: 50px; height: 50px; background: rgba(0,229,255,0.05);  top: 8%;  right: 25%; animation-delay: 7s;   animation-duration: 16s; }

@keyframes bgHexFloat {
  0%   { opacity: 0;   transform: translateY(20px)  rotate(0deg);  }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(-40px) rotate(30deg); }
}

/* Reduz anel externo em telas menores */
@media (max-width: 1366px) {
  .bg-orbit.o3 { width: 720px; height: 720px; margin: -360px 0 0 -360px; }
}

/* Mobile: esconde elementos pesados desnecessários */
@media (max-width: 768px) {
  .bg-orbit.o1 { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .bg-orbit.o2 { width: 430px; height: 430px; margin: -215px 0 0 -215px; }
  .bg-orbit.o3 { display: none; }
  .bg-hexfield .h3,
  .bg-hexfield .h5 { display: none; }
}