/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* === Estrutura geral === */
body {
  background-color: #000;
  color: #f5f2e9;
  font-family: 'Courier Prime', monospace;
  margin: 0;
  text-align: center;
  padding-top: 50px;
  min-height: 100vh;
}

/* Aplica overflow:hidden só na home */
body.home {
  overflow: hidden;
}

/* === Logo === */
.logo {
  margin-top: 120px;
  width: 420px; /* ajuste conforme o tamanho desejado */
  opacity: 1;
  transition: filter 2s ease, opacity 2s ease 0.8s;
  filter: invert(0) brightness(1);
}

.logo:hover {
  filter: invert(1) brightness(1.6); /* inverte as cores, simulando negativo */
  opacity: 0.1;                      /* aos poucos, a imagem some */
}


/* === Manifesto === */
.manifesto {
  margin: 80px auto;
  width: 60%;
  font-size: 1.3em;       /* ligeiramente maior para destacar a citação */
  line-height: 1.8;
  opacity: 0.9;
  letter-spacing: 0.02em;
  font-style: italic;
}

.referencia {
  display: block;
  margin-top: 15px;
  font-size: 0.8em;
  opacity: 0.7;
  font-style: normal;
}

/* === Navegação === */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  padding: 50px 0;
  text-align: center;
  z-index: 1000;
  border: none; /* remove a linha inferior */
}

nav a {
  color: #f5f2e9;
  text-decoration: none;
  margin: 0 20px;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

nav a:hover {
  opacity: 0.6;
}

/* === Rodapé === */
footer {
  font-size: 0.9em;
  opacity: 0.5;
  margin-bottom: 40px;
}

/* === Efeito de aparição etérea === */
@keyframes fadeFloat {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(5px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.manifesto {
  animation: fadeFloat 4s ease-out both;
}

.textos {
  width: 50%;
  margin: 100px auto;
  text-align: left;
  color: #f5f2e9;
}

.textos h1 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

.intro {
  text-align: center;
  font-size: 1em;
  opacity: 0.8;
  margin-bottom: 60px;
}

/* === Caixa de nota com scroll === */
.nota {
  margin: 0 auto 80px auto;
  width: 85%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 25px 25px 25px 45px; /* espaço extra para a margem vermelha */
  color: #1a1a1a;
  background-color: #f7f6f3; /* base clara principal */

  /* Camadas de fundo */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 22px,
      transparent 25px
    ), /* linhas horizontais */
    linear-gradient(
      to right,
      rgba(180, 30, 30, 0.3) 40px,
      transparent 42px
    ), /* margem vermelha */
    url('https://www.transparenttextures.com/patterns/paper-fibers.png'); /* textura */

  background-blend-mode: multiply;
  background-repeat: repeat, no-repeat, repeat;
  background-size: auto, 100% 100%, 400px 400px;

  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.08),
    inset 0 -4px 6px rgba(0, 0, 0, 0.05),
    0 0 25px rgba(255, 255, 255, 0.08);

  transition: box-shadow 0.6s ease, border-color 0.6s ease;
  backdrop-filter: blur(1px);
}



.nota:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 -4px 6px rgba(0, 0, 0, 0.07),
    0 0 40px rgba(255, 255, 255, 0.1);
}

/* Estilo sutil da barra de rolagem */
.texto-scroll::-webkit-scrollbar {
  width: 6px;
}
.texto-scroll::-webkit-scrollbar-thumb {
  background: #f5f2e930;
  border-radius: 3px;
}
.texto-scroll::-webkit-scrollbar-thumb:hover {
  background: #f5f2e970;
}

.data {
  font-size: 0.8em;
  opacity: 0.6;
  display: block;
  margin-top: 15px;
  text-align: right;
  font-style: italic;
}

/* Caixas de anotações */
.nota {
  margin: 0 auto 80px auto;
  width: 85%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 25px 25px 25px 45px; /* espaço para a linha vermelha */
  color: #1a1a1a;
  background-color: #f8f7f4; /* off-white limpo */

  /* Linhas horizontais e linha vermelha lateral */
  background-image:
    /* linha vermelha única */
    linear-gradient(
      to right,
      rgba(200, 40, 40, 0.4) 5px,
      transparent 54px
    );

  background-repeat: repeat, no-repeat;
  background-size: auto, 100% 100%;

  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 -3px 6px rgba(0, 0, 0, 0.04),
    0 0 20px rgba(255, 255, 255, 0.05);

  transition: box-shadow 0.6s ease, border-color 0.6s ease;
  backdrop-filter: blur(0.5px);
}

.nota:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.06),
    0 0 30px rgba(255, 255, 255, 0.1);
}

/* === Responsividade === */

/* Tablets e notebooks pequenos */
@media (max-width: 1024px) {
  .textos {
    width: 70%;
  }
  .nota {
    width: 90%;
  }
}

/* Celulares */
@media (max-width: 600px) {
  .textos {
    width: 90%;
  }
  .nota {
    width: 100%;
    padding: 20px;
  }
  .texto-scroll {
    max-height: 150px;
  }
}

/* === LOGO NA PÁGINA INICIAL === */
.header-home .logo {
  width: 270px;
  margin-top: 10px; /* antes era 40px */
  position: relative;
  z-index: 10;
  opacity: 1;
}

/* === Logo fixo nas páginas internas (com mesmo efeito da home) === */
.header-interno .logo-fixo {
  position: fixed;
  top: 30px;
  left: 50px;
  width: 230px;
  opacity: 1;
  filter: invert(0);
  transition: filter 2.5s ease, opacity 2.5s ease;
  z-index: 10; /* aumenta pra garantir que esteja visível */
  mix-blend-mode: screen;
  user-select: none; /* impede seleção */
}

/* efeito de negativo fotográfico ao passar o mouse */
.header-interno .logo-fixo:hover {
  filter: invert(1) brightness(1.6);
  opacity: 0.1;
}


/* restaura suavemente ao retirar o mouse */
.header-interno .logo-fixo {
  transition: filter 2.5s ease, opacity 3.5s ease;
}


/* garante que o conteúdo fique acima do logo fixo */
main, section, article {
  position: relative;
  z-index: 2;
}

/* Responsivo: telas menores */
@media (max-width: 768px) {
  .header-interno .logo-fixo {
    width: 100px;
    top: 25px;
    left: 25px;
    opacity: 0.15;
  }
}


/* Em telas menores, reduz o tamanho */
@media (max-width: 768px) {
  .header-interno .logo-fixo {
    width: 100px;
    left: 25px;
    top: 25px;
  }
}

/* === Rastros === */
.rastros {
  width: 85%;
  margin: 100px auto;
  text-align: center;
  color: #f5f2e9;
}

.rastros h1 {
  font-size: 1.8em;
  margin-bottom: 15px;
}

.rastros .intro {
  font-size: 1em;
  opacity: 0.8;
  margin-bottom: 60px;
}

.mural {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.rastro-item {
  width: 280px;
  text-align: left;
}

.rastro-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
  transition: transform 0.6s ease;
}

.rastro-item img:hover {
  transform: scale(1.02);
}

.rastro-item p {
  font-size: 0.9em;
  opacity: 0.7;
  line-height: 1.5;
}

/* === Fontes para títulos e navegação === */
h1, h2, h3, nav a {
  font-family: 'EB Garamond', serif;
  letter-spacing: 0.05em;
}

/* === Centralização vertical apenas na página inicial === */
.header-home + main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 140px); /* reduz a altura útil para encaixar tudo na tela */
}

/* === Citação da página inicial (Solenoide) === */
.header-home + main .intro {
  font-size: 0.9em; /* antes provavelmente era 1em ou maior */
  line-height: 1.6;
  opacity: 0.85;
  max-width: 70%;
  margin: 0 auto;
}

/* === Correção final: logo visível sob o menu fixo === */
.header-interno .logo-fixo {
  position: fixed !important;
  top: 100px !important;       /* ajusta a posição abaixo do menu */
  left: 50px;
  width: 230px;
  opacity: 1;
  filter: invert(0);
  transition: filter 2.5s ease, opacity 2.5s ease;
  z-index: 10;
  mix-blend-mode: screen;
  user-select: none;
}

/* === Destaque do menu ativo === */
nav a.active {
  opacity: 1;
  border-bottom: 1px solid #f5f2e9; /* sublinhado sutil */
  padding-bottom: 4px;
}

/* === SOBRE === */
.sobre {
  width: 80%;
  margin: 100px auto;
  text-align: center;
  color: #f5f2e9;
}

.sobre h1 {
  font-family: 'EB Garamond', serif;
  font-size: 2em;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.sobre .intro {
  font-size: 1em;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.sobre .bio {
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 0.95em;
  opacity: 0.85;
}

.sobre a {
  color: #f5f2e9;
  text-decoration: none;
  border-bottom: 1px dotted rgba(245, 242, 233, 0.4);
}

.sobre a:hover {
  border-color: rgba(245, 242, 233, 0.9);
}

/* Cards do blog (reutiliza .nota) */
.blog-list {
  width: 65%;
  margin: 0 auto 60px auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.blog-card h2 {
  font-family: 'EB Garamond', serif;
  margin: 0 0 8px 0;
  font-size: 1.3em;
}

.blog-card .meta {
  font-size: 0.85em;
  opacity: 0.7;
  margin-bottom: 15px;
}

.blog-card .tags { opacity: 0.7; }

.blog-card .ler-mais {
  margin-top: 12px;
  background: transparent;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.3);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.blog-card .ler-mais:hover {
  background: rgba(0,0,0,0.06);
}

/* Overlay de leitura */
.post-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 10000;
}
.post-overlay.show { display: flex; }

.post-card {
  max-width: 800px;
  width: 90%;
  background: #f8f7f4;
  color: #1a1a1a;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 15px 60px rgba(0,0,0,0.6);
  max-height: 80vh;
  overflow: auto;
}

/* botão fechar */
#close-post {
  position: fixed;
  top: 40px;
  right: 50px;
  font-size: 1.8em;
  background: none;
  border: none;
  color: #f5f2e9;
  cursor: pointer;
  z-index: 1001; /* já está bom, mas vamos subir */
  transition: opacity 0.3s ease;
}

#close-post:hover {
  opacity: 0.7;
}

/* Paginação */
.blog-pager {
  margin: 20px auto 80px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.blog-pager button {
  background: transparent;
  color: #f5f2e9;
  border: 1px solid rgba(245,242,233,0.3);
  padding: 6px 12px;
  cursor: pointer;
}
.blog-pager button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* === FILTROS DO BLOG === */
.filtros {
  width: 80%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 0;
}

.filtro-grupo h3 {
  font-family: 'EB Garamond', serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 1em;
  margin-bottom: 12px;
  color: #f5f2e9;
  opacity: 0.8;
}

.filtro-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-filtro {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f2e9;
  font-family: 'Courier Prime', monospace;
  font-size: 0.9em;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-filtro:hover,
.btn-filtro.ativo {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === Layout das notas === */
.notas-layout {
  display: grid;
  grid-template-columns: 220px 1fr; /* lateral + conteúdo */
  gap: 40px;
  width: 95%;
  margin: 60px auto;
  align-items: start;
}

/* === Filtros na lateral === */
.filtros-lateral {
  position: sticky;
  top: 100px; /* mantém fixo ao rolar */
  align-self: start;
  border-right: 1px solid rgba(255,255,255,0.1);
  padding-right: 20px;
}

.filtros-lateral h3 {
  font-family: 'EB Garamond', serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #f5f2e9;
  opacity: 0.8;
  margin-bottom: 10px;
}

.filtro-grupo {
  margin-bottom: 25px;
}

.filtro-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-filtro {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f2e9;
  font-family: 'Courier Prime', monospace;
  font-size: 0.85em;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-filtro:hover,
.btn-filtro.ativo {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === Lista de posts ajustada === */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* === Layout responsivo === */
@media (max-width: 800px) {
  .notas-layout {
    grid-template-columns: 1fr; /* uma coluna só */
  }
  .filtros-lateral {
    position: relative;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
  .filtro-opcoes {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* === Animação sutil ao aplicar filtros === */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.blog-list.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-list.fade-in {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* === Botões de filtro === */
.btn-filtro {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f2e9;
  font-family: 'Courier Prime', monospace;
  font-size: 0.85em;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.btn-filtro:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === Estado ativo com brilho fantasmático === */
.btn-filtro.ativo {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* brilho pulsante leve */
.btn-filtro.ativo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  animation: pulse-glow 2.8s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.15); }
  50% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.3); }
}

/* === Layout principal da seção Notas === */
.notas-layout {
  display: grid;
  grid-template-columns: 240px 1.4fr; /* filtros + conteúdo */
  gap: 30px;
  width: 90%;
  margin: 60px auto;
  align-items: start;
  max-width: 1400px;
}

/* === Coluna lateral de filtros === */
.filtros-lateral {
  position: sticky;
  top: 100px;
  align-self: start;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 20px;
}

.filtro-grupo {
  margin-bottom: 25px;
}

.filtros-lateral h3 {
  font-family: 'EB Garamond', serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #f5f2e9;
  opacity: 0.8;
  margin-bottom: 10px;
}

.filtro-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Botões de filtro === */
.btn-filtro {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f2e9;
  font-family: 'Courier Prime', monospace;
  font-size: 0.85em;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.btn-filtro:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === Estado ativo com brilho fantasmático === */
.btn-filtro.ativo {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.btn-filtro.ativo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  animation: pulse-glow 2.8s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.15); }
  50% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.3); }
}

/* === Lista de posts === */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.blog-list.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-list.fade-in {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* === Cada nota (folha de caderno minimalista) === */
.nota {
  margin: 0 auto 80px auto;
  width: 100%; /* ocupa mais largura */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 35px 40px 35px 55px; /* espaço para a linha vermelha */
  color: #111;
  background-color: #f9f8f6; /* off-white neutro */

  /* linha vermelha lateral em degradê */
  background-image: linear-gradient(
    to right,
    rgba(200, 40, 40, 0.25) 3px,
    rgba(200, 40, 40, 0.05) 30px,
    transparent 55px
  );

  background-repeat: no-repeat;
  background-size: 100% 100%;

  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.05),
    inset 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.6s ease, border-color 0.6s ease;
}

.nota:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.08),
    inset 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* === Títulos e botões de leitura === */
.nota h2 {
  font-family: 'EB Garamond', serif;
  font-size: 1.4em;
  color: #111;
  margin-bottom: 10px;
}

.nota p {
  font-family: 'Courier Prime', monospace;
  font-size: 0.95em;
  line-height: 1.6;
}

.ler-mais {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Courier Prime', monospace;
  font-size: 0.85em;
  padding: 6px 12px;
  margin-top: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ler-mais:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.6);
}

/* === Overlay de leitura individual === */
.post-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
  overflow-y: auto;
}

.post-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.post-card {
  position: relative; /* garante que o botão se alinhe a este bloco */
  background: #f8f7f4;
  color: #1a1a1a;
  border-radius: 8px;
  margin: 120px auto;
  padding: 40px;
  max-width: 720px;
  box-shadow: 0 0 30px rgba(255,255,255,0.05);
  z-index: 5100;
}

@keyframes aparecer {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* === Botão de fechar dentro do post === */
#close-post {
  position: absolute; /* agora dentro do post-card */
  top: 20px;
  right: 20px;
  font-size: 1.4em;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 20;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

#close-post:hover {
  opacity: 0.6;
  transform: scale(1.1);
}

/* === Responsividade === */
@media (max-width: 800px) {
  .notas-layout {
    grid-template-columns: 1fr;
    width: 92%;
  }

  .filtros-lateral {
    position: relative;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  .filtro-opcoes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nota {
    width: 100%;
  }
}

/* === Data das notas === */
.data {
  display: block;
  font-family: 'Courier Prime', monospace;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 8px;
  text-align: right;
  opacity: 0.7;
}

/* === Fundo com fantasmas pulsando === */
.grade-fantasma {
  position: relative;
  margin: 0;
  background-color: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fantasmas-container {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 40px;
  justify-items: center;
  align-items: center;
  z-index: 0;
}

.fantasma {
  width: 100px;
  opacity: 0.35;
  filter: brightness(1.2) contrast(1.1);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  animation: pulseFantasma 6s ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s));
}

@keyframes pulseFantasma {
  0%, 100% {
    opacity: 0.3;
    filter: brightness(1.1);
  }
  50% {
    opacity: 0.55;
    filter: brightness(1.4);
  }
}

/* === Polaroid Analógica: Revelação Irregular + Respiração === */
.foto-central {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foto-aparicao {
  position: relative;
  width: 280px;
  background: #fff;
  padding: 10px 10px 35px 10px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 15px 25px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 255, 255, 0.1);
  animation: respirar 9s ease-in-out infinite;
}

/* camada branca que cobre a foto */
.foto-aparicao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 50%, #fff 100%);
  z-index: 3;
  opacity: 1;
  animation: banhoQuimico 6s ease-in-out forwards;
}

/* imagem começa invisível e borrada */
.foto-aparicao img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: brightness(2.8) blur(14px) contrast(0.8);
  animation: revelarFotoIrregular 6.5s ease-in-out forwards;
  animation-delay: 0.8s;
}

/* === Ruído analógico sutil === */
.foto-aparicao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 2px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0, transparent 2px);
  mix-blend-mode: overlay;
  opacity: 0.15;
  animation: ruido 4s steps(2) infinite;
  z-index: 5;
}

@keyframes ruido {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}

/* camada branca que se dissolve irregularmente */
@keyframes banhoQuimico {
  0% { opacity: 1; transform: scale(1.02); }
  30% { opacity: 0.85; transform: scale(1); }
  70% { opacity: 0.4; }
  100% { opacity: 0; }
}

/* foto “ganha vida” como uma revelação química */
@keyframes revelarFotoIrregular {
  0% {
    opacity: 0;
    filter: brightness(2.8) blur(14px) contrast(0.8);
  }
  20% {
    opacity: 0.3;
    filter: brightness(2) blur(8px) contrast(0.9);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.4) blur(3px) contrast(1);
  }
  70% {
    opacity: 0.9;
    filter: brightness(1.1) blur(1px) contrast(1.05);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0) contrast(1.1);
  }
}

/* respiração suave */
@keyframes respirar {
  0%, 100% {
    transform: rotate(-1deg) scale(1);
    box-shadow:
      0 15px 25px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: rotate(-1deg) scale(1.03);
    box-shadow:
      0 25px 35px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(255, 255, 255, 0.15);
  }
}


/* === Player Spotify semioculto / efeito aparição === */
.spotify-bar {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  height: 90px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);
  transform: translateY(50px); /* começa mais abaixo */
  opacity: 0;
  transition: all 1.2s ease;
}

/* === estado ativo ao se aproximar === */
body:hover .spotify-bar {
  transform: translateY(0);
  opacity: 0.85;
}

.spotify-bar:hover {
  opacity: 1;
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

/* player interno */
.spotify-bar iframe {
  border-radius: 10px;
  width: 300px;
  height: 80px;
  filter: brightness(0.9) contrast(1.1) saturate(0.9);
  transition: filter 0.4s ease;
}

.spotify-bar:hover iframe {
  filter: brightness(1) contrast(1.2) saturate(1);
}

.mural-fantasma {
  background-color: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.fundo-fantasma {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 80%);
  animation: fundoRespira 10s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes fundoRespira {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.5; transform: scale(1.05); }
}

.mural {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.polaroid {
  position: relative;
  background: #fff;
  padding: 10px 10px 35px 10px;
  border-radius: 4px;
  width: 240px;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: revelar 3s ease forwards;
  animation-delay: var(--delay);
  cursor: pointer;
  transition: transform 1.2s ease, box-shadow 1.2s ease;
}

.polaroid:hover {
  transform: translate(var(--x), var(--y)) scale(1.05) rotate(0deg);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 255, 255, 0.2);
}

/* Teste visual — blocos coloridos */
.dummy {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #9f9f9f, #d4d4d4);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', monospace;
  color: #000;
  font-size: 2em;
  opacity: 0;
  animation: revelarFoto 4s ease forwards;
  animation-delay: calc(var(--delay) + 0.5s);
}

/* Corrigido: manter estado final da animação */
@keyframes revelar {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.95) rotate(var(--rot)); }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--rot)); }
}

@keyframes revelarFoto {
  0% { opacity: 0; filter: brightness(2.5) blur(12px); }
  40% { opacity: 0.4; filter: brightness(1.6) blur(5px); }
  80% { opacity: 0.9; filter: brightness(1.2) blur(2px); }
  100% { opacity: 1; filter: brightness(1) blur(0); }
}