/* ===================================================================
   Apkallu — o fundo Material 2 (Camadas, Estrelas e Feixe Radiante)

   Da base para a frente:
     1. profundidade   fundo negro cosmico (#0a0a12) com degradê profundo
     2. aurora         manchas de luz difusas (roxo #a855f7, violeta #d8ccff, ciano)
     3. feixe-luz      o feixe vertical radiante de Material 2
     4. canvas         motor WebGL/2D de estrelas em movimento e malha
     5. grao           textura sutil
     6. vinheta        escurece bordas
   =================================================================== */

.cena {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #0a0a12;
}
.cena > * { position: absolute; inset: 0; }

/* -- 1. profundidade ------------------------------------------------ */
.cena-profundidade {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(168, 85, 247, 0.18) 0%, rgba(15, 15, 25, 0.4) 35%, transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(126, 226, 245, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #0a0a12 0%, #06060c 50%, #030308 100%);
}

/* -- 2. aurora: manchas de luz difusas ------------------------------ */
.cena-aurora > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.cena-aurora > i:nth-child(1) {
  width: 55vw; height: 55vw;
  top: -18vw; left: 50%;
  margin-left: -27.5vw;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.32), transparent 68%);
  animation: auraDeriva1 28s ease-in-out infinite;
}
.cena-aurora > i:nth-child(2) {
  width: 44vw; height: 44vw;
  top: 24vh; left: -14vw;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.25), transparent 70%);
  animation: auraDeriva2 34s ease-in-out infinite;
}
.cena-aurora > i:nth-child(3) {
  width: 38vw; height: 38vw;
  bottom: -12vh; right: -10vw;
  background: radial-gradient(circle, rgba(126, 226, 245, 0.22), transparent 68%);
  animation: auraDeriva3 30s ease-in-out infinite;
}

@keyframes auraDeriva1 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
  33%      { transform: translate(5%, 4%) scale(1.12); border-radius: 42% 58% 62% 38% / 46% 42% 58% 54%; }
  66%      { transform: translate(-4%, 7%) scale(0.94); border-radius: 58% 42% 38% 62% / 54% 58% 42% 46%; }
}
@keyframes auraDeriva2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); border-radius: 50%; }
  50%      { transform: translate(8%, -5%) scale(0.92); border-radius: 60% 40% 45% 55% / 40% 55% 45% 60%; }
}
@keyframes auraDeriva3 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
  50%      { transform: translate(-7%, -6%) scale(1.14); border-radius: 38% 62% 55% 45% / 58% 40% 60% 42%; }
}

/* -- 5. grao: textura fina ------------------------------------------ */
.cena-grao {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
}

/* -- 6. vinheta ----------------------------------------------------- */
.cena-vinheta {
  background: radial-gradient(125% 92% at 50% 42%, transparent 40%, rgba(5, 5, 10, 0.72) 100%);
}

.material-bg-canvas { z-index: 1; }
.cena-grao, .cena-vinheta { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .cena-aurora > i { animation: none; }
}

@media (max-width: 720px) {
  .cena-aurora > i { filter: blur(64px); }
}