@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Inter:wght@300;400&display=swap');

@font-face {
  font-family: 'garamondt';

  src: url('../assets/fonts/Garamondt-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* =========================================
   1. RESET E GLOBAIS
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f8f8f8; /* Cinza Original */
  color: #4a4848;
  font-family: 'Inter', sans-serif;
  cursor: none; /* Cursor personalizado ativo */
  padding-top: 140px;
  padding-bottom: 26px;
}

/* Background específico da Home */
body.home-bg {
  background: #fbddf6;
}

h1 {
  font-family: 'garamondt', serif;
  font-size: 64px;
  margin-bottom: 16px;
}

/* =========================================
   2. CURSOR PERSONALIZADO
   ========================================= */
.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 1px solid #578d6f;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

.cursor-symbol {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  color: #f4b2decf;
  transform: translate(-50%, -50%);
  animation: symbolFade 1.2s ease-out forwards;
  z-index: 9998;
}

@keyframes symbolFade {
  from { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  to { opacity: 0; transform: translate(-50%, -50%) translateY(-24px); }
}
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/sports/spo-1/spo26.cur), auto !important;} /* End https://www.cursors-4u.com */
/* =========================================
   3. HEADER & NAVEGAÇÃO
   ========================================= */
header {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 100;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Caixa "Seleção" do Menu */
.menu-selection {
  position: relative;
  border: 1px solid #000;
  background-color: #fcfcfc;
  padding: 8px 16px;
  display: inline-block;
}

.menu-selection nav a {
  margin-right: 16px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  opacity: 0.6;
  line-height: 1;
}

.menu-selection nav a:last-child { margin-right: 0; }
.menu-selection nav a.active,
.menu-selection nav a:hover { opacity: 1; }

/* Handles (Quadradinhos nos cantos) */
.handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border: 1px solid #2f80ed;
  z-index: 101;
}

.handle.top-left { top: -4px; left: -4px; }
.handle.top-right { top: -4px; right: -4px; }
.handle.bottom-left { bottom: -4px; left: -4px; }
.handle.bottom-right { bottom: -4px; right: -4px; }

/* Subtítulo abaixo do header */
.header-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2c2a2a;
  max-width: 380px;
  line-height: 1.4;
  opacity: 0.8;
  margin: 8px 0 0 260px; /* topo | direita | base | esquerda */
}

/* =========================================
   4. SEÇÃO: HOME
   ========================================= */
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10vw;
}

.intro {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.8;
}

.home-end {
  margin-top: 20vh;
  padding-left: 3vw;
  padding-bottom: 40px;
  opacity: 0.7;
}

.home-end p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================
   5. SEÇÃO: WORKS (GRID & FILTROS)
   ========================================= */
.works {
  padding-left: 6vw;
  padding-right: var(--content-x, 6vw);
  padding-bottom: 12vh;
  margin-top: -50px;
}

/* 1. ESTADO INICIAL (Com Borda e Glow Cinza Discreto) */
.filters button {
  background: transparent;
  border: 1px solid rgba(74, 72, 72, 0.3); 
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
  text-transform: lowercase;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.4s ease;
  color: #575151; /* Texto sempre preto */
  margin-right: 10px;
  margin-bottom: 20px;
  outline: none;
  border-radius: 1px;
  
  /* Brilho cinza inicial bem sutil */
  text-shadow: 0 0 5px rgba(40, 37, 37, 0.1);
}

/* 2. AO PASSAR O MOUSE (Borda some, Glow Rosa Gigante) */
.filters button:hover {
  color: #3d3535; /* Garante que o texto continue preto */
  border-color: transparent;

  /* GLOW ROSA COM RADIUS AMPLIADO */
  /* Criamos várias camadas de rosa para o brilho ir longe */
  text-shadow: 
    0 0 10px #fbddf6,   /* Camada interna clara */
    0 0 20px #ff00ea,   /* Rosa choque médio */
    0 0 40px #ff00ea,   /* Rosa choque expandido */
    0 0 70px #ff00ea,   /* Brilho de longo alcance */
    0 0 100px #ff00ea;  /* Brilho máximo (Radius gigante) */
}

/* 3. BOTÃO ATIVO (Mesmo efeito do hover, fixo) */
.filters button.active {
  color: #4b4545;
  font-weight: bold;
  border-color: transparent;
  
  text-shadow: 
    0 0 15px #fbddf6,
    0 0 30px #ff00ea,
    0 0 60px #ff00ea,
    0 0 90px #ff00ea;
}

/* Grid Principal */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  width: 100%;
}

/* Item do Grid */
.grid .item {
  position: relative;
  display: block;
  height: 180px;              /* Altura retangular corrigida */
  border: 1px solid #4a4848;  /* Stroke */
  padding: 0;                 /* Sem borda branca interna */
  background-color: transparent; 
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Imagem do Item */
.grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Texto/Legenda do Item (Com Hover) */
.grid .item span {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #4a4848;
  padding: 4px 8px;
  color: black;
  font-size: 13px;
  
  /* Efeito Hover */
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/* Interações do Grid */
.grid .item:hover span { opacity: 1; }
.grid .item:hover img { transform: scale(1.05); }

/* Classe utilitária para filtros JS */
.item.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Container básico para o texto fluir bem */
.bio-container {
    font-family: 'garamondt'; /* ou sua fonte preferida */
    line-height: 1;
    font-size: 10rem;
}

/* Defina a cor aqui se ainda não tiver */
:root {
    --links-color: #fda2e0; /* Um lilás soft, por exemplo */
}

.bio-container {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333; /* Cor do texto normal */
}

/* A classe que aplica o brilho */
.soft {
    text-decoration: none;
    color: inherit; /* Ou use var(--links-color) se quiser o texto colorido também */
    cursor: pointer;
    
    /* O estado inicial do brilho */
    text-shadow: 0 0 10px var(--links-color);
    
    /* A mágica da animação */
    animation: glow 3s ease-in-out infinite; 
    -webkit-animation: glow 3s ease-in-out infinite;
}

/* Efeito extra ao passar o mouse: o brilho fica intenso e estático */
.soft:hover {
    animation: none; /* Para a animação para focar */
    text-shadow: 0 0 25px var(--links-color), 0 0 5px var(--links-color);
    transition: text-shadow 0.3s ease;
}

/* A ANIMAÇÃO (Keyframes) */
@keyframes glow {
    0% { 
        text-shadow: 0 0 5px var(--links-color); 
        opacity: 0.8;
    }
    50% { 
        text-shadow: 0 0 20px var(--links-color); 
        opacity: 1;
    }
    100% { 
        text-shadow: 0 0 5px var(--links-color); 
        opacity: 0.8;
    }
}

@-webkit-keyframes glow {
    0% { text-shadow: 0 0 5px var(--links-color); opacity: 0.8; }
    50% { text-shadow: 0 0 20px var(--links-color); opacity: 1; }
    100% { text-shadow: 0 0 5px var(--links-color); opacity: 0.8; }
}

/* =========================================
   6. SEÇÃO: ABOUT
   ========================================= */
.page-about .about-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 64px;
  align-items: start;
}

.page-about .about-content { grid-column: 1 / 2; }

.page-about .about-layout .about-portrait {
  margin: 0;
  max-width: 65%;
}

.about-grid {
  margin-top: -50px;
  padding-left: 7.3vw;
  padding-right: 10vw;
  padding-bottom: 12vh;
  text-transform: lowercase;
  display: grid;
  row-gap: 10px;
}

.about-intro {
  max-width: 640px;
  margin-bottom: 2rem;
}

/* Tabela/Linhas do About */
.row {
  display: grid;
  grid-template-columns: 120px minmax(240px, 1fr) minmax(240px, 1fr) 100px;
  column-gap: 32px;
}
.row.section-start { margin-top: 10px; }

.col { font-size: 13.5px; line-height: 1.65; }
.label, .year { opacity: 0.6; }
.year { text-align: right; }
.span-3 { grid-column: 2 / 5; }

/* Preview de Imagem (Hover no About) */
.hover-preview {
  position: fixed;
  width: 320px;
  border: none;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
}
.hover-preview img {
  width: 100%;
  display: block;
  border: 1px solid #000;
  background: #fff;
}

/* =========================================
   7. SEÇÃO: CONTATO
   ========================================= */
.contact {
  padding: 40px 30px;
  padding-left: 24.3vw; 
  margin-top: -100px;
  padding-top: 44px;
  font-family: 'garamondt';
}

.contact p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* Caixa de Contato */
.menu-selection.contact-box-style {
  padding: 20px 24px;
  display: inline-block;
}

.info-lines p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4a4848;
  line-height: 1.8;
  margin: 0;
}

.info-lines a {
  color: #4a4848;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.info-lines a:hover { border-bottom: 1px solid #4a4848; }
/* =========================================
   9. MODAIS (ATUALIZADO PARA CAIXA)
   ========================================= */

/* ... (mantenha .modal, .modal-overlay, etc iguais) ... */

/* A CAIXA DO MODAL */
.project-box-style {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  
/* Tamanho e Formato */
  width: 80vh; /* Usando vh para tentar manter mais quadrado */
  height: 80vh; /* Altura igual a largura cria o quadrado */
  max-width: 900px;
  max-height: 900px;
  min-width: 320px;
  
/* STROKE (A Borda) */
  border: 1px solid #4a4848; 
  background-color: #fcfcfc;
  
  z-index: 1010;
  display: flex; /* Para garantir que o conteudo expanda */
  flex-direction: column;
}

/* Ajuste da Imagem de Título */
.modal-title-image {
  display: block;
  max-width: 100%;     /* Não estourar a largura */
  height: auto;        /* Manter proporção */
  max-height: 80px;    /* Limite de altura para não ocupar tudo */
  margin-bottom: 24px; /* Espaço entre título e texto */
  object-fit: contain;
  align-self: flex-start; /* Alinha a imagem à esquerda */
}

.project-content {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.project-text {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}

.project-img-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}


/* Mobile */
@media (max-width: 768px) {
  .project-box-style {
    width: 90vw;
    height: 80vh; /* No mobile pode ser retangular */
  }
  .project-content {
    flex-direction: column;
  }
  .project-img-wrapper {
    border-right: none;
    border-bottom: 1px solid #4a4848;
    height: 40%; /* Imagem ocupa menos espaço no mobile */
  }
}

/* =========================================
   10. MEDIA QUERIES (RESPONSIVIDADE)
   ========================================= */
@media (max-width: 768px) {
  /* Ajuste About */
  .page-about .about-layout {
    grid-template-columns: 1fr;
  }
  .page-about .about-layout .about-portrait {
    top: -20px;
    max-width: 80%;
  }

  /* Ajuste Modal Mobile */
  .project-content {
    flex-direction: column !important;
  }
  
  /* Ajuste do tamanho no celular para não ficar muito largo */
  .project-box-style {
      width: 90vw;
  }
}

/* =========================================
   CORREÇÃO DOS MODAIS (VISIBILIDADE)
   ========================================= */

/* 1. O Modal deve começar escondido */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  
  /* Esconde visualmente e do mouse */
  opacity: 0;
  visibility: visible;
  pointer-events: none; 
  
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Fonte exclusiva do modal de projetos */
#projectModal,
#projectModal * {
  font-family: 'inter', sans-serif;
  size: 6px;
}


/* 2. Quando o JS adicionar a classe 'show', o modal aparece */
.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* MUDANÇA AQUI: Deixe transparente e sem blur */
  background: transparent; 
  backdrop-filter: none;
  
  z-index: 1000;
}

/* 4. Botão de Fechar (O "X") */
.close-modal,
.close-project-modal {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 20px;
  cursor: pointer;
  color: #4a4848;
  z-index: 2000; /* Garante que fique acima de tudo na caixa */
  font-family: sans-serif;
  line-height: 1;
}

.close-modal:hover,
.close-project-modal:hover {
  color: #000;
}

/* =========================================
   CORREÇÃO ESPECÍFICA DO MODAL DE CONTATO
   ========================================= */

/* Em style.css */
.modal-container {
  position: absolute; 
  z-index: 2000;
  display: inline-block;
  
  /* IMPORTANTE: Removemos o top/left 50% fixo daqui, 
     pois o JS vai controlar isso. Ou deixamos 0 como padrão */
  top: 0;
  left: 0;
  transform: none; /* Garante que não haja deslocamento extra */
}

/* O fundo escuro/branco atrás */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Aumentei a opacidade para teste */
  z-index: none; /* Menor que o modal-container */
 
}

/* =========================================
   BOTÃO DE ÁUDIO (NOVO)
   ========================================= */
.audio-btn {
  position: fixed;
  top: 30px;      /* Alinhado com o header */
  right: 30px;    /* Canto direito */
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #4a4848; /* Mesma borda do site */
  cursor: pointer; /* Cursor personalizado funcionará aqui */
  z-index: 9999; /* Acima de stickers e imagens */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #4a4848;
}

.audio-btn:hover {
  background-color: #fcfcfc;
}

/* Lógica visual dos ícones */
.audio-btn:not(.muted) .icon-mute {
  display: none;
}
.audio-btn.muted .icon-sound {
  display: none;
}
#bgVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -10; /* Garante que fique atrás de TUDO */
  object-fit: cover; /* Garante que cubra a tela sem distorcer */
  
  /* Opcional: Filtros para dar o visual "raw" */
  filter: contrast(1.1) saturate(1.1); 
  /* ou opacity: 0.8 se quiser misturar com a cor de fundo do body */
}