body { 
  background-image: url("imagens/935e5acde09fe1697d2018464282f101.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  background-color: black;
  color: #e6d8ff;
  font-family: "Press Start 2P", monospace;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* GIF como decoração, NÃO fundo */
.decoracao img {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;
  opacity: 0.7;
  pointer-events: none;
}

/* título grande e centralizado */
.titulo {
  font-size: 72px;
  margin-top: 120px;
  color: #c77dff;
  text-shadow: 0 0 10px #ff00ff, 0 0 30px purple;
}

/* caixa de texto estilo yume nikki */
.caixa-texto { 
  margin: 50px auto;
  width: 70%;
  border: 2px solid #a855f7;
  padding: 20px;
  background: rgba(20, 0, 40, 0.7);
  font-size: 14px;
}

/* página dos sonhos (portas) */
.dream {
  background-image: url("imagens/17d766fe0d189d4303f84e702311ec0b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* texto surreal da porta */
.porta-texto {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Press Start 2P", monospace;
  font-size: 48px;
  color: white;
  text-shadow: 2px 0 red, -2px 0 cyan, 0 0 10px purple;
  animation: flutuar 4s ease-in-out infinite;
}

/* animação lateral estilo sonho */
@keyframes flutuar {
  0% { transform: translate(-50%, -50%) translateX(-10px); }
  50% { transform: translate(-50%, -50%) translateX(10px); }
  100% { transform: translate(-50%, -50%) translateX(-10px); }
}/* camada de névoa */
.nevoa {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: url("https://i.imgur.com/8bKQZQF.png");
  opacity: 0.25;
  pointer-events: none;
  animation: nevoaMover 60s linear infinite;
  z-index: 10;
}

/* movimento da névoa */
@keyframes nevoaMover {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -50%);
  }
  #frase {
  font-size: 72px; /* tamanho gigante */
  font-family: 'VT323', monospace;
  color: #e6d8ff;
  text-align: center;
  opacity: 0; /* começa invisível */
  transition: 1s;
  text-shadow: 
    2px 0 red,
    -2px 0 cyan,
    0 0 15px purple;
  position: absolute;
  top: 50%;  
  left: 50%;
  
  
/* 🥞 PANQUECAS GRANDES NO CENTRO */
.panquecas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

.panquecas img {
  width: 500px; /* tamanho das panquecas */
}

/* 🪷 BUDA NO CANTO ESQUERDO */
.buda {
  position: fixed;
  bottom: 20px;
  left: 20px; /* canto esquerdo real */
  pointer-events: none;
  opacity: 0.85;
  z-index: 5;
}

.buda img {
  width: 150px; /* tamanho do buda */
}
/* container só do LEO's */
.leo-container {
  position: relative;
  display: inline-block;
}

/* olho surgindo lentamente */
.olho-leo {
  position: absolute;
  top: -70px; /* acima do texto */
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  opacity: 0;
  cursor: pointer;
  animation: surgirOlho 3s ease forwards;
  pointer-events: auto; /* permite clique */
  z-index: 10;
}

/* animação de surgimento do olho */
@keyframes surgirOlho {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* efeito de hover opcional (flutuação do olho) */
.olho-leo:hover {
  transform: translateX(-50%) translateY(0) scale(1.1);
  opacity: 1;
  transition: 0.3s;
}
/* fundo preto com névoa */
body {
  background-color: black;
  font-family: 'Press Start 2P', monospace;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #e6d8ff;
  overflow: hidden; /* evita barra de rolagem */
}

/* camada de névoa */
.nevoa {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: url("https://i.imgur.com/8bKQZQF.png");
  opacity: 0.25;
  pointer-events: none;
  animation: moverNevoa 60s linear infinite;
  z-index: 1;
}

@keyframes moverNevoa {
  0% { transform: translate(0,0); }
  100% { transform: translate(-50%, -50%); }
}

/* GIF no centro */
.gif-centro {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.gif-centro img {
  width: 500px; /* ajuste o tamanho que quiser */
  opacity: 0.6;
  animation: flutuarGif 6s ease-in-out infinite;
}

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

/* FRASE GIGANTE */
.frase-gigante {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px; /* pode aumentar ainda mais se quiser */
  color: #e6d8ff;
  text-align: center;
  text-shadow: 2px 0 red, -2px 0 cyan, 0 0 20px purple;
  max-width: 80%;
  z-index: 5;
  opacity: 0;
  animation: surgirFrase 3s ease forwards;
}

/* animação da frase surgindo devagar */
@keyframes surgirFrase {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
/* portas */
.doors {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;

/* gif decorativo no centro */