/* RESET */

body{
  margin:0;
  background:#0b0a07;
  overflow:hidden;
  font-family:serif;
}

/* CENA */

.scene{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PALCO CENTRAL (controla tudo) */

.stage{
  position:relative;
  width:min(92vw,1200px);
  aspect-ratio:4/3;
}

/* MAPA NÃO DISTORCE MAIS */

.map-bg{
  position:absolute;
  inset:0;
  background:url('/assets/bg-atlas.webp') center/contain no-repeat;
}

/* TRONO POSICIONADO NO DF (coordenada real da arte) */

.trono{
  position:absolute;
  width:14%;
  left:49.2%;
  top:56.8%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
  z-index:5;
}

/* LOGO FLUTUANDO ACIMA */

.portal{
  position:absolute;
  left:49.2%;
  top:22%;
  transform:translate(-50%,-50%);
  z-index:6;
}

.logo{
  width:110px;
  cursor:pointer;
  animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(120,200,255,.45));
}

@keyframes float{
  0%{transform:translate(-50%,-50%) translateY(0);}
  50%{transform:translate(-50%,-50%) translateY(-10px);}
  100%{transform:translate(-50%,-50%) translateY(0);}
}

/* FEIXE CONECTANDO */

.beam{
  position:absolute;
  left:49.2%;
  top:26%;
  height:30%;
  width:.6%;
  transform:translateX(-50%);
  background:linear-gradient(to top,#ffd27a,transparent);
  filter:blur(6px);
  opacity:.8;
  z-index:4;
}