* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #E8D5BC;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: Georgia, serif;
}

.scene {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* ── HEADER VOLTAR ──
   o botaozinho de voltar la em cima
   simples e direto, sem frescura */
.header-voltar {
  position: relative;
  z-index: 20;
  padding: 18px 30px;
  border-bottom: 2px solid #c4a96b;
  background-color: #E8D5BC;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-voltar a {
  text-decoration: none;
  color: #3a2010;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.2s;
}

.header-voltar a:hover {
  color: #c0392b;
}

/* ── FAÇA PARTE! ──
   Estilo de selo/ticket perfurado, coladinho torto na tela
   como o bilhete e as polaroids. Parado em repouso — só reage
   ao toque: levanta como papel sendo pego, traço dourado desenha
   embaixo do texto no hover, e no clique estoura um anel de tinta
   a partir do ponto tocado, como batendo um carimbo. */
.btn-faca-parte {
  position: relative;
  display: inline-block;
  padding: 9px 22px;
  background: #8c3b3b;
  color: #fffdf7 !important;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px dashed rgba(255, 253, 247, 0.55);
  border-radius: 3px;
  box-shadow: 0 5px 14px rgba(140, 59, 59, 0.4);
  transform: rotate(-2deg);
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease, background 0.25s ease;
  overflow: hidden;
}

.btn-faca-parte::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 5px;
  height: 2px;
  background: #c4a96b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.btn-faca-parte:hover {
  background: #6a2c2c !important;
  color: #fffdf7 !important;
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 12px 24px rgba(140, 59, 59, 0.55);
}

.btn-faca-parte:hover::after {
  transform: scaleX(1);
}

.btn-faca-parte.carimbando {
  animation: faca-parte-bater 0.4s ease;
}

@keyframes faca-parte-bater {
  0% {
    transform: rotate(0deg) translateY(-3px) scale(1);
  }

  35% {
    transform: rotate(0deg) translateY(0) scale(0.93);
  }

  100% {
    transform: rotate(0deg) translateY(-3px) scale(1);
  }
}

/* anel de tinta: nasce no ponto do clique (posição via JS)
   e estoura pra fora, sumindo — efeito de carimbo batendo */
.carimbo-anel {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 247, 0.75) 0%, rgba(255, 253, 247, 0) 70%);
  pointer-events: none;
  animation: carimbo-estourar 0.55s ease-out forwards;
}

@keyframes carimbo-estourar {
  from {
    transform: scale(0.4);
    opacity: 1;
  }

  to {
    transform: scale(7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .btn-faca-parte.carimbando,
  .carimbo-anel {
    animation: none;
  }
}

/* ── LUA ──
   a lua grandona no canto superior direito
   metade dela fica pra fora da tela e isso eh intencional
   da aquele efeito de "espiando" sabe? */
.moon {
  position: absolute;
  top: -230px;
  right: -200px;
  width: clamp(600px, 22vw, 600px);
  pointer-events: none;
}

.moon img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── LIVROS ──
   pilha de livros no canto inferior direito
   espelhado com scaleX(-1) pq ficava melhor assim
   Davi que teve a ideia de espelhar e admito que ficou bom */
.books {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 350px !important;
  pointer-events: none;
  transform: scaleX(-1);
}

.books img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── BILHETE ──
   o bilhete centralizado com aquela inclinaçãozinha
   parece um recado colado na parede */
.note {
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: clamp(220px, 28vw, 380px);
  pointer-events: none;
  z-index: 2;
}

.note img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── COMPONENTE DE PEGADA ──
   as pegadas que levam pros topicos
   cada uma gira num angulo diferente
   parece que alguem andou de verdade na pagina kkk
   nem teve graça, to ficando maluco */
.footprint-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  z-index: 3;
}

.feet {
  width: clamp(110px, 11vw, 125px);
  pointer-events: none;
}

.feet img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(90deg);
}

/* ── ETIQUETA ──
   as etiquetas com nome de cada topico
   ficam em cima das pegadas e tem hover animado
   TA UMA PORRA ISSO AQUI
   
   Arrumei :) depois de dias? sim mas arrumei*/
.tag-group {
  position: absolute;
  display: block;
  text-decoration: none;
  z-index: 4;
  transition: transform 0.35s cubic-bezier(.22, .68, 0, 1.4);
}

.tag-img-wrap {
  position: relative;
  width: clamp(160px, 5.5vw, 68px);
}

.tag-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.22));
}

.tag-label {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(6.5px, 0.8vw, 10.5px);
  color: #3a2010;
  line-height: 1.2;
  padding: 0 5px;
  pointer-events: none;
}

/* ── POSIÇÕES DAS PEGADAS (DESKTOP) ──
   cada pegada tem um top/left diferente
   espalhadas pela tela feito mapa do maroto */
.fp--1 {
  top: 9%;
  left: 13%;
}

.fp--2 {
  top: 7%;
  left: 46%;
}

.fp--3 {
  top: 42%;
  left: 7%;
}

.fp--4 {
  top: 41%;
  left: 67%;
}

.fp--5 {
  top: 70%;
  left: 13%;
}

.fp--6 {
  top: 65%;
  left: 44%;
}

/* Podcast — a pegada nova, ficou meio sozinha lá embaixo
   mas sobrou esse cantinho livre entre os livros e o bilhete */
.fp--7 {
  top: 84%;
  left: 62%;
}

/* ════════════════════════════════════════════ */
/* ROTAÇÃO DAS ETIQUETAS — DESKTOP               */
/* só funciona em tela > 768px                    */
/* mexe aqui pra mudar no computador              */
/* e reza pra nao quebrar nada                    */
/* ════════════════════════════════════════════ */

/*Poemas*/
.tag-group.fp--1 {
  transform: translate(-80px, 45px) rotate(1deg);
}

.tag-group.fp--1:hover {
  transform: translate(-100px, 35px) rotate(25deg) scale(1.15);
}

/*Filmes*/
.tag-group.fp--2 {
  transform: translate(-80px, 45px) rotate(1deg);
}

.tag-group.fp--2:hover {
  transform: translate(-100px, 35px) rotate(25deg) scale(1.15);
}

/*Livros*/
.tag-group.fp--3 {
  transform: translate(-40px, 45px) rotate(-10deg);
}

.tag-group.fp--3:hover {
  transform: translate(-90px, 35px) rotate(15deg) scale(1.15);
}

/*Desenho*/
.tag-group.fp--4 {
  transform: translate(-70px, 25px) rotate(6deg);
}

.tag-group.fp--4:hover {
  transform: translate(-100px, 15px) rotate(25deg) scale(1.15);
}

/*Musica*/
.tag-group.fp--5 {
  transform: translate(-90px, -15px) rotate(40deg);
}

.tag-group.fp--5:hover {
  transform: translate(-100px, 15px) rotate(25deg) scale(1.15);
}

/*Curiosidades*/
.tag-group.fp--6 {
  transform: translate(-90px, 40px) rotate(10deg);
}

.tag-group.fp--6:hover {
  transform: translate(-100px, 12px) rotate(25deg) scale(1.15);
}

/*Podcast*/
.tag-group.fp--7 {
  transform: translate(-90px, 40px) rotate(10deg);
}

.tag-group.fp--7:hover {
  transform: translate(-120px, 40px) rotate(25deg) scale(1.15);
}

/* ── POLAROIDS ──
   as fotinhas espalhadas pela pagina
   da pra arrastar elas (cursor: grab)
   nao serve pra nada mas eh legal demais */
.polaroid {
  position: absolute;
  width: clamp(110px, 13vw, 180px);
  cursor: grab;
  z-index: 5;
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.3));
  user-select: none;
  touch-action: none;
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.polaroid:active {
  cursor: grabbing;
}

.polaroid--1 {
  top: 10%;
  left: 74%;
  z-index: 0;
  transform: rotate(16deg);
}

.polaroid--2 {
  top: 70%;
  left: 25%;
  z-index: 0;
  transform: rotate(-26deg);
}

.polaroid--3 {
  top: 67%;
  left: 78%;
  z-index: 0;
  transform: rotate(16deg);
}

.polaroid--4 {
  top: 11%;
  right: 86%;
  z-index: 0;
  transform: rotate(-16deg);
}


/* ╔════════════════════════════════════════════════╗ */
/* ║  DAQUI PRA BAIXO: SÓ MOBILE (TELA <= 768px)    ║ */
/* ║  tem UM @media só nesse arquivo inteiro         ║ */
/* ║  NAO COLE OUTRO @media - edita AQUI DENTRO      ║ */
/* ║  senao eu juro que vou chorar                    ║ */
/* ╚════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .scene {
    height: auto;
    /* a scene fica maior no mobile (1550px)
       pra caber todas as pegadas (agora 7!) com espaço entre elas
       sem esse min-height fica tudo amontoado e feio */
    min-height: 1550px;
    padding-bottom: 60px;
    overflow-x: hidden;
  }

  .moon {
    width: 510px;
    top: -140px;
    right: -175px;
  }

  .books {
    width: 95px;
    right: -38px;
    /* livro acompanha o fundo maior */
    bottom: 0;
  }

  .note {
    left: 30%;
    /* bilhete centralizado na tela maior */
    top: 40%;
    width: 68vw;
  }

  /* ── POSIÇÕES DAS PEGADAS NO MOBILE ──
     espalhadas em 7 fatias de ~12.5% cada
     alternando esquerda/direita pra parecer
     que alguem ta andando de verdade
     ficou lindo meu deus */
  .fp--1 {
    top: 4%;
    left: 45%;
  }

  .fp--2 {
    top: 16%;
    left: 60%;
  }

  .fp--3 {
    top: 28%;
    left: 70%;
  }

  .fp--4 {
    top: 41%;
    left: 70%;
  }

  .fp--5 {
    top: 54%;
    left: 60%;
  }

  .fp--6 {
    top: 67%;
    left: 45%;
  }

  .fp--7 {
    top: 80%;
    left: 40%;
  }

  /* ────────────────────────────────────────────
     ROTAÇÃO DAS PEGADAS — MOBILE
     precisa de !important pq o JS coloca rotate inline
     e sem isso o CSS perde a briga
     porra de especificidade
     ...vamo parar de xingar quando estivermos documentando
     ──────────────────────────────────────────── */
  .footprint-group.fp--1 {
    transform: rotate(45deg) !important;
  }

  .footprint-group.fp--2 {
    transform: rotate(70deg) !important;
  }

  .footprint-group.fp--3 {
    transform: rotate(85deg) !important;
  }

  .footprint-group.fp--4 {
    transform: rotate(97deg) !important;
  }

  .footprint-group.fp--5 {
    transform: rotate(120deg) !important;
  }

  .footprint-group.fp--6 {
    transform: rotate(120deg) !important;
  }

  .footprint-group.fp--7 {
    transform: rotate(100deg) !important;
  }

  /* ────────────────────────────────────────────
     ROTAÇÃO DAS ETIQUETAS — MOBILE
     mesma logica, ajusta a posição e rotação
     das etiquetas pra ficarem bonitinhas
     ──────────────────────────────────────────── */
  .tag-group.fp--1 {
    transform: translate(-95px, 30px) rotate(25deg);
  }

  .tag-group.fp--1:hover {
    transform: translate(-95px, 30px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--2 {
    transform: translate(-100px, 15px) rotate(25deg);
  }

  .tag-group.fp--2:hover {
    transform: translate(-95px, 20px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--3 {
    transform: translate(-100px, 20px) rotate(25deg);
  }

  .tag-group.fp--3:hover {
    transform: translate(-90px, 20px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--4 {
    transform: translate(-120px, 15px) rotate(25deg);
  }

  .tag-group.fp--4:hover {
    transform: translate(-110px, -10px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--5 {
    transform: translate(-110px, -10px) rotate(25deg);
  }

  .tag-group.fp--5:hover {
    transform: translate(-110px, -25px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--6 {
    transform: translate(-98px, -10px) rotate(25deg);
  }

  .tag-group.fp--6:hover {
    transform: translate(-110px, -10px) rotate(45deg) scale(1.1);
  }

  .tag-group.fp--7 {
    transform: translate(-100px, -10px) rotate(25deg);
  }

  .tag-group.fp--7:hover {
    transform: translate(-110px, -10px) rotate(45deg) scale(1.1);
  }

  /* ── POLAROIDS ──
     reposicionados pro mobile pra ficar bonito
     na tela maior do celular (scene de 1550px) */
  .polaroid--1 {
    top: 5%;
    left: 73%;
    z-index: 0;
    transform: rotate(16deg);
  }

  .polaroid--2 {
    top: 4%;
    left: 2%;
    z-index: 0;
    transform: rotate(-22deg);
  }

  .polaroid--3 {
    top: 84%;
    left: 62%;
    z-index: 0;
    transform: rotate(16deg);
  }

  .polaroid--4 {
    top: 70%;
    right: 78%;
    z-index: 0;
    transform: rotate(-14deg);
  }

}

/* ═══════ FIM — nao adicione NADA depois dessa linha
   se adicionar eu vou saber e vou ficar triste
   Davi eu to falando com vc tambem
   ta bom canso nao vo mexer aqui ca
   bom garoto <3 ═══════ */