/* ===================================================================
   Apkallu — o fundo, em camadas

   Tudo aqui e visivel PARADO. Movimento e enfeite: quem tem
   prefers-reduced-motion ligado (ou uma maquina fraca) continua vendo
   a mesma cena, so sem ela respirar.

   Da base para a frente:
     1. profundidade   gradiente de horizonte
     2. aurora         manchas de luz que dao cor
     3. malha          grade em perspectiva — o "chao de dados"
     4. feixe          a luz que desce (identidade do logo)
     5. trilhas        canvas com as particulas
     6. grao           textura, tira o digital chapado
     7. vinheta        escurece as bordas e foca o centro
   =================================================================== */

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

/* -- 1. profundidade ------------------------------------------------ */
.cena-profundidade {
  background:
    radial-gradient(120% 78% at 50% -12%, #123243 0%, #0a2130 26%, transparent 62%),
    radial-gradient(90% 60% at 50% 108%, #0b2836 0%, transparent 60%),
    linear-gradient(180deg, #041018 0%, #030b10 45%, #020810 100%);
}

/* -- 2. aurora: manchas de luz difusas ------------------------------ */
.cena-aurora > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.cena-aurora > i:nth-child(1) {
  width: 52vw; height: 52vw;
  top: -16vw; left: 50%;
  margin-left: -26vw;
  background: radial-gradient(circle, rgba(78, 200, 221, 0.34), transparent 66%);
  animation: auraDeriva1 26s ease-in-out infinite;
}
.cena-aurora > i:nth-child(2) {
  width: 40vw; height: 40vw;
  top: 26vh; left: -12vw;
  background: radial-gradient(circle, rgba(47, 147, 173, 0.26), transparent 68%);
  animation: auraDeriva2 32s ease-in-out infinite;
}
.cena-aurora > i:nth-child(3) {
  width: 36vw; height: 36vw;
  bottom: -10vh; right: -8vw;
  background: radial-gradient(circle, rgba(37, 109, 143, 0.28), transparent 68%);
  animation: auraDeriva3 29s ease-in-out infinite;
}

/* deriva organica: alem de mover, o blob MUDA de forma (Material 4) */
@keyframes auraDeriva1 {
  0%,100% { transform: translate(0,0) scale(1);        border-radius: 50%; }
  33%     { transform: translate(6%, 4%) scale(1.14);  border-radius: 42% 58% 62% 38% / 46% 42% 58% 54%; }
  66%     { transform: translate(-5%, 8%) scale(0.92); border-radius: 58% 42% 38% 62% / 54% 58% 42% 46%; }
}
@keyframes auraDeriva2 {
  0%,100% { transform: translate(0,0) scale(1.06);     border-radius: 50%; }
  50%     { transform: translate(9%, -6%) scale(0.9);  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(-8%, -5%) scale(1.16);border-radius: 38% 62% 55% 45% / 58% 40% 60% 42%; }
}

/* -- 3. malha em perspectiva --------------------------------------- */
/* Desenhada no canvas (efeitos.js), nao aqui: rotateX com perspective
   projetava o plano numa faixa de 84px colada no rodape. No canvas a
   geometria e explicita e previsivel. */

/* -- 6. grao: textura fina, tira o digital chapado ------------------ */
.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.085;
  mix-blend-mode: overlay;
}

/* -- 7. vinheta ----------------------------------------------------- */
.cena-vinheta {
  background: radial-gradient(125% 92% at 50% 42%, transparent 42%, rgba(2, 8, 14, 0.62) 100%);
}

/* o canvas das trilhas fica entre a malha e o grao */
.material-bg-canvas { z-index: 1; }
.cena-grao, .cena-vinheta { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  /* a cena continua inteira; so para de respirar */
  .cena-aurora > i, .cena-malha { animation: none; }
}

@media (max-width: 720px) {
  .cena-malha { height: 46vh; background-size: 46px 46px; }
  .cena-aurora > i { filter: blur(64px); }
}