/*------------------------------
  Joana Moreno - Nº3220549  
  Data: 04/05/2025
  Nome do Exercício: Website Portfólio  
  Época de Avaliação: Contínua (Durante as aulas)  
  Ano Letivo: 3º Ano, 2024-2025  
  Semestre: 2º  
  Unidade Curricular: Laboratório de Projeto II  
  Curso: Design Gráfico e Multimédia (DGM)  
  Escola: Escola Superior de Artes e Design das Caldas da Rainha (ESAD.CR)  
  Docente: Marco Heleno
------------------------------*/

/* FONTES */
/* Fonts - definição das fontes usadas no site */
@font-face {
  font-family: 'AlteHaasGrotesk'; /* Nome da fonte Balete Semibold */
  src: url('/fonts/AlteHaasGrotesk-Regular.woff') format('woff'); /* Localização do ficheiro da fonte */
  font-weight: normal; /* Peso normal */
  font-style: normal; /* Estilo normal */
  font-display: swap; /* Evita FOUT */
}

@font-face {
  font-family: 'BaleteSemibold'; /* Nome da fonte Balete Semibold */
  src: url('/fonts/BaleteTrial-Semibold.woff') format('woff'); /* Localização do ficheiro da fonte */
  font-weight: 600;  /* Semibold normalmente é 600 */
  font-style: normal; /* Estilo normal */
  font-display: swap; /* Evita FOUT */
}

@font-face {
  font-family: 'BaleteBoldItalic'; /* Nome da fonte Balete Bold Italic */
  src: url('/fonts/BaleteTrial-BoldItalic.woff') format('woff'); /* Localização do ficheiro da fonte */
  font-weight: 700; /* Bold = 700 */
  font-style: italic; /* Estilo itálico */
  font-display: swap; /* Evita FOUT */
}

@font-face {
  font-family: 'BaleteSemiBoldItalic'; /* Nome da fonte Balete SemiBold Italic */
  src: url('/fonts/BaleteTrial-SemiboldItalic.woff') format('woff'); /* Localização do ficheiro da fonte */
  font-weight: 600; /* Semibold = 600 */
  font-style: italic; /* Estilo itálico */
  font-display: swap; /* Evita FOUT */
}


/* COINTAINER */
/* Container principal que agrupa header, main e footer */
.container {
  width: 100%; /* Largura total */
  min-height: 100vh; /* Altura mínima igual à altura da viewport */
  display: flex; /* Usar flexbox para layout */
  flex-direction: column; /* Layout em coluna */
}


/* GERAL */
/* Estilo do main */
main {
  flex: 1; /* Expande para preencher espaço disponível */
  padding: 0.5rem; /* Espaçamento interno */
  box-sizing: border-box; /* Inclui padding na largura total */
  margin-top: 2.4rem; /* Espaço acima */
}

/* Estilos base do body */
body {
  background-color:#f3f3e5; /* Cor de fundo do body */
  font-family: 'AlteHaasGrotesk', Helvetica, sans-serif; /* Família de fontes principal */
  color: #2D262D; /* Cor do texto */
  cursor: url('cursor/mycursor.svg'), auto; /* Cursor personalizado */
}

/* Classe para cursor customizado */
.custom-cursor {
  cursor: url('cursor/mycursor.svg'), auto; /* Aplica cursor personalizado */
}

/* HEADER */
/* Estilo do header fixo */
header {
  width: 100%; /* Largura total */
  display: flex; /* Usar flexbox */
  justify-content: space-between; /* Espaço entre os itens */
  align-items: center; /* Alinhar verticalmente ao centro */
  padding: 1.2rem; /* Espaçamento interno */
  box-sizing: border-box; /* Inclui padding na largura */
  position: fixed; /* Fixo no topo */
  top: 0; /* Topo da viewport */
  left: 0; /* Esquerda da viewport */
  z-index: 10; /* Sobreposição acima de outros elementos */
  background:#f3f3e5; /* Cor de fundo */
}

/* LINKS */
/* Links do header com efeito hover */
header a:hover{
  text-decoration: underline; /* Sublinhado ao passar o rato */
}

/* Navegação de links no header */
nav.links {
  display: flex; /* Layout em linha */
  gap: 5rem; /* Espaçamento entre links */
}

/* Estilo dos links */
a,
a:visited {
  color: #2D262D; /* Cor dos links */
  text-decoration: none; /* Sem sublinhado */
  transition: color 0.2s; /* Transição suave na cor */
}

a:hover,
a:focus {
  text-decoration: none; /* Continua sem sublinhado ao hover ou foco */
}


/* HOMEPAGE */
/* Estilos específicos para a homepage */
body.home {
  overflow: hidden; /* Esconde scroll */
  background-color: #B6B1EF; /* Cor de fundo especial para homepage */
}

body.home header {
  background-color: #B6B1EF; /* Cor de fundo do header na homepage */
}

body.home h1 {
  margin-top: -0.1rem; /* Margem superior negativa para ajustar posição */
  font-size: 62.9px; /* Tamanho da fonte maior */
  font-weight: 200; /* Peso da fonte leve */
  letter-spacing: -1.4px; /* Espaçamento negativo entre letras */
  line-height: 0.96; /* Altura da linha */
}

/* Classe para tipografia Joana */
.JoanaTypo {
  font-family: 'BaleteSemiBoldItalic', serif; /* Fonte personalizada Joana */
  font-size: 67px; /* Tamanho grande */
  font-weight: normal; /* Peso normal */
  letter-spacing: 1.2px; /* Espaçamento entre letras */
}

.illustration-background {
  position: fixed;
  top: 60px;
  left: -100px;
  width: 100vw;
  height: 100vh;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* garante que fica atrás de tudo */
}

.illustration-background img {
  width: 115vw; /* <--- AJUSTA O TAMANHO AQUI */
  height: auto;

  max-height: 100vh;
  object-fit: contain;
}
/* PÁGINA WORK */
/* Seção Work (trabalhos/projetos) */
.work-section {
  position: relative; /* Posicionamento relativo para filhos */
  background: #f1ebf6; /* Cor de fundo da secção */
}


.projects {
  width: 100%; /* Largura total */
  margin-top: 50px; /* Espaço acima */
  margin-left: 0px;
  display: flex; /* Layout flexível */
  flex-direction: column; /* Organiza em coluna */
  gap: 2rem; /* Espaçamento vertical entre projetos */
}

.project {
  width: 100%; /* Largura total do projeto */
}

.project-row {
  width: 100%; /* Largura total */
  display: flex; /* Layout flexível */
  gap: 1.2rem; /* Espaçamento entre elementos na linha */
  height: 65px; /* Altura fixa da linha do projeto */
}

.project-row .BaleteTypo {
  font-size: 67px; /* Tamanho da fonte */
  font-family: 'BaleteSemibold', serif; /* Fonte Balete Semibold */
  line-height: 0.3; /* Altura da linha compacta */
  white-space: nowrap; /* Não quebra linha */
  margin-right: -0.2rem; /* Margem negativa à direita para ajuste */
}

.project-row .category {
  font-size: 1rem; /* Tamanho da fonte da categoria */
  text-align: left; /* Alinhamento do texto à esquerda */
  flex-shrink: 0; /* Não encolher na flexbox */
}

/* Efeito hover para o texto BaleteTypo */
.BaleteTypo:hover {
  font-family: 'BaleteBoldItalic', serif; /* Fonte em itálico negrito */
  font-weight: bold; /* Peso negrito */
  font-size: 69px; /* Mesmo tamanho */
}

/* Preview do projeto (normalmente imagem ou vídeo) */
#project-preview {
  display: none; /* Inicialmente escondido */
  position: fixed; /* Posicionado fixamente na viewport */
  top: 83px; /* Distância do topo */
  right: -15px; /* Distância da direita */
  width: 620px; /* Largura fixa */
  height: 770px; /* Altura fixa */

  overflow: hidden; /* Esconde overflow */
  z-index: 1000; /* Sobreposição alta */
  pointer-events: none; /* Não permite interações */
  opacity: 0; /* Transparente */
  transition: opacity 0.18s; /* Transição suave na opacidade */
}

#project-preview.active {
  display: block; /* Mostrar o preview quando ativo */
  opacity: 1; /* Tornar opaco */
}

#project-preview img,
#project-preview video {
  width: 80%; /* Preencher largura do container */
  height: 80%; /* Preencher altura do container */
  object-fit: cover; /* Cobre toda a área, mantém proporções */
}


/* PÁGINA DE DETALHES DO WORK */
/* Container principal da página de detalhe do projeto */
.project-detail-main {
  width: 100%; /* Largura total */
  box-sizing: border-box; /* Inclui padding e bordas */
  margin-left: 1px; /* Margem à esquerda pequena */
  margin-top: 2rem; /* Espaço no topo para header */
}

/* Detalhes do projeto */
.project-detail {
  width: 30%; /* Ocupa 30% da largura */
  float: left; /* Flutua para a esquerda */
  display: flex; /* Flexbox para alinhamento */
  flex-direction: column; /* Coluna vertical */
  align-items: flex-start; /* Alinhamento à esquerda */
  text-align: left; /* Texto alinhado à esquerda */
  gap: 1.5rem; /* Espaçamento vertical */
  background: transparent; /* Fundo transparente */
}

.project-detail .BaleteTypo {
  font-family: 'BaleteSemibold', serif; /* Fonte Balete Semibold */
  font-size: 40px; /* Tamanho da fonte */
  line-height: 0.9; /* Altura da linha */
  margin: 0; /* Sem margens */
  font-weight: normal; /* Peso normal */
  margin-bottom: -1.7rem; /* Margem inferior negativa para ajuste */
}

.project-detail .year {
  font-size: 1rem; /* Tamanho da fonte */
  margin-bottom: 0rem; /* Sem margem inferior */
  background: transparent; /* Fundo transparente */
}

.project-detail .category {
  font-size: 1rem; /* Tamanho da fonte */
  line-height: 1.1; /* Altura da linha */
  white-space: pre-line; /* Preserva quebras de linha */
  margin-bottom: -0.65rem; /* Margem inferior negativa */
  background: transparent; /* Fundo transparente */
}

.project-detail .description {
  font-size: 1rem; /* Tamanho da fonte */
  line-height: 1.3; /* Altura da linha */
  margin-bottom: 0rem; /* Sem margem inferior */
}

/* Conteúdo fixo no topo */
.fixed-content {
  position: fixed; /* Fixo na viewport */
  top: 0; /* No topo */
  left: 0; /* À esquerda */
  box-sizing: border-box; /* Inclui padding/bordas */
  overflow: hidden; /* Esconde overflow */
  z-index: 10; /* Sobreposição */
  display: flex; /* Flexbox */
  flex-direction: column; /* Em coluna */
  justify-content: flex-start; /* Justificar ao topo */
  background: transparent; /* Fundo transparente */
}

/* Container para as imagens do projeto */
.work-image-container {
  position: fixed; /* Fixo na viewport */
  top: 62px; /* Distância do topo */
  bottom: 3px; /* Distância de baixo*/
  right: 18px; /* Distância da direita */
  width: 70vw; /* Largura relativa à viewport */
  height: 100vh; /* Altura da viewport */
  overflow-y: auto; /* Scroll vertical automático */
  background: transparent; /* Fundo transparente */
  padding: 1.2rem; /* Sem padding */
  box-sizing: border-box; /* Inclui padding e bordas */
  display: flex; /* Flexbox */
  flex-direction: column; /* Coluna */
  align-items: flex-end; /* Alinhado à direita */
  z-index: 5; /* Sobreposição */
}

.work-image {
  width: 100%; /* Largura total */
  max-width: none; /* Sem limite máximo */
  margin-bottom: 4rem; /* Espaço abaixo da imagem */
  display: block; /* Display em bloco */
}

/* PÁGINA ABOUT */
/* Página About (Sobre mim) */
.intro-text {
  font-family: 'Alte Haas Grotesk', Arial, sans-serif;
  text-align: center;/* Texto Centrado */
  font-size: 2.5rem;/* Tamanho fonte */
  letter-spacing: -0.3px; /* Espaçamento negativo entre letras */
  line-height: 45px; /* Altura da linha */
  max-width: 2000px;
  margin: 160px;
  margin-top: 180px;
}

/* Garantir altura total para body e html */
body, html {
  height: 100%; /* Altura 100% da viewport */
}

/* Contatos fixos no ecrã */
.contacts {
  position: fixed; /* Fixo na viewport */
  padding: 0.6rem; /* Padding interno */
  bottom: 4px; /* Distância do fundo */
  display: flex; /* Flexbox */
  gap: 7rem; /* Espaçamento entre contactos */
  font-size: 24px; /* Tamanho do texto */
  z-index: 10; /* Sobreposição */
}


/* Efeito hover para links em contatos */
.contacts a:hover {
  text-decoration: underline; /* Sublinhado ao passar o rato */
}

/* Container para o email com botão */
#email_container {
  display: inline-block; /* Display inline-block para alinhar */
  
}

/* Botão escondido inicialmente */
#email_container button {
  position: absolute; /* Posicionado absolutamente */
  top: -12px; /* Acima do container */
  left: 9%; /* Pequena distância da esquerda */
  transform: none;
  width: 100px; 
  height: 35px; /* aumenta a altura */
  display: none; /* aparece só com hover */

/* Estilo do botão */
  background-color: #2D262D; /* muda a cor de fundo*/
  color: #f1ebf6; /* cor do texto */
  border-radius: 0px;
  border: 2px solid #2D262D; /* borda sólida da mesma cor do fundo */
  box-shadow: none;           /* remove sombras */
  background-image: none;     /* remove possíveis gradientes */
  outline: none; /* Sem Outline */
  cursor: pointer; /* cursor de mãozinha */
}

#email_container button:hover {
  background-color: #B6B1EF; /* verde escuro */
  border-color: #B6B1EF; /* borda verde escuro */
}

/* Camada fixa para a pilha de fotos */
.photo-stack {
  display: block; /* Define como elemento de bloco */
  position: fixed; /* Fixa ao ecrã */
  inset: 0; /* Ocupa todo o ecrã */
  width: 100vw; /* 100% da largura da janela do browser */
  height: 105vh; /* 105% da altura da janela (ligeiramente mais que o ecrã) */
  z-index: 2; /* Fica acima de outros elementos com z-index menor */
  display: flex; /* Usa layout flexível (sobrepõe o display: block anterior) */
  align-items: center; /* Alinha o conteúdo verticalmente ao centro */
  justify-content: center; /* Alinha o conteúdo horizontalmente ao centro */
}


/* Composição das fotos */
.composition {
  position: relative; /* Permite posicionar elementos filhos de forma absoluta */
  width: 1150px; /* Largura base da composição */
  height: 700px; /* Altura da composição */
  max-width: 95vw; /* Limita a largura para não ultrapassar 95% da janela do browser */
}

/* Foto */
.photo {
  position: absolute; /* Posicionamento absoluto para controle exato da foto */
  will-change: transform; /* Otimização para transformações futuras */
}
.photo img {
  width: 100%; /* A imagem ocupa 100% da largura do seu container */
  display: block; /* Remove espaço em branco abaixo da imagem */
  max-width: 400px; /* Limita a largura máxima da imagem */
}

/* RESPONSIVE PARA TELEMÓVEL */

/* PÁGINA WORK */
/* Estilos para telas maiores que 768px */
@media (min-width: 768px) {
  .project-preview-mobile {
    display: none; /* Esconde a pré-visualização mobile em telas maiores */
  }
}

/* Estilos para telas até 768px */
@media (max-width: 768px) {
  body {
    background-color: #f3f3e5; /* Cor de fundo para mobile */
  }
  
  nav.links {
    display: flex; /* Menu flexível */
    justify-content: flex-start; /* Alinha os links à esquerda */
    gap: 31px; /* Espaçamento entre links */
  }

  illustration-background {
  position: fixed;
  top: 90px;
  left: -100px;
  width: 100vw;
  height: 100vh;
  background-size: 100%;
  background-position: right;
  background-repeat: no-repeat;
  z-index: -1; /* garante que fica atrás de tudo */
}

.illustration-background img {
  width: 350vw; /* <--- AJUSTA O TAMANHO AQUI */
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}
  /* Esconder o preview de desktop no mobile */
  #project-preview {
    display: none !important; /* Força esconder mesmo se outro estilo tentar mostrar */
  }

  /* Layout mobile dos projetos */
  .projects {
    width: 100%; /* Ocupa toda a largura */
    margin-top: 15px; /* Espaço acima */
    display: flex; /* Flex container */
    flex-direction: column; /* Itens em coluna */
    gap: 2.5rem; /* Espaçamento entre projetos */
  }

  .project {
    display: flex; /* Flex container */
    flex-direction: column; /* Itens em coluna */
    gap: 1rem; /* Espaçamento interno */
    max-width: none; /* Remove limite de largura */
    width: 100%; /* Ocupa toda a largura */
  }

  .project-row {
    flex-direction: column; /* Itens em coluna */
    height: auto; /* Altura automática */
    gap: 0.1rem; /* Espaçamento entre elementos */
    margin-bottom: 0; /* Remove margem inferior */
  }

  .project-row .BaleteTypo {
    font-size: 32px; /* Tamanho da fonte maior */
    line-height: 1.1; /* Espaçamento entre linhas */
  }


  .project-preview-mobile {
    width: 100%; /* Largura total */
    height: 400px; /* Altura fixa */
    background-color: #ddd; /* Cor de fundo cinza claro */
    border-radius: 0px; /* Sem bordas arredondadas */
    overflow: hidden; /* Esconde conteúdo que ultrapassa o container */
    order: -1; /* Coloca este elemento antes dos irmãos na ordem do flex */
  }

  .project-preview-mobile img,
  .project-preview-mobile video {
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Cobre todo o container sem distorcer */
  }

  .project-preview-mobile:empty::after {
    content: "Image Preview"; /* Texto exibido quando não há conteúdo */
    display: flex; /* Flex container */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    height: 100%; /* Ocupa toda altura */
    color: #666; /* Cor cinza escura */
    font-size: 14px; /* Tamanho da fonte */
  }

  .category {
    font-size: 0.9rem; /* Tamanho da fonte */
    line-height: 1.2; /* Espaçamento entre linhas */
  }

  /* PÁGINA DE DETALHE DO WORK */
  .project-detail-main {
    display: flex; /* Flex container */
    flex-direction: column; /* Itens em coluna */
    box-sizing: border-box; /* Inclui padding e border no tamanho */
    margin-left: 1px; /* Pequena margem à esquerda */
    margin-top: 5rem; /* Espaço no topo */
  }

  .project-detail {
    display: flex; /* Flex container */
    flex-direction: column; /* Itens em coluna */
    align-items: flex-start; /* Alinha à esquerda */
    text-align: left; /* Texto alinhado à esquerda */
    gap: 1.4rem; /* Espaçamento entre elementos */
    background: transparent; /* Fundo transparente */
    width: 100%; /* Largura total */
  }
  /* Efeito hover para o texto BaleteTypo */
  .BaleteTypo:hover {
  font-family:'BaleteSemibold', serif; /* Fonte igual */
  font-weight: bold; /* Peso negrito */
  }

  .work-image-container {
    position: relative; /* Posicionamento relativo para posicionar filhos */
    width: 104%; /* Largura total */
    height: auto; /* Altura automática */
    padding-left: 30px; /* Desloca para direita */
    top: 12px; /* Desloca para baixo */
    min-height: 210px; /* Garante altura mínima para não colapsar */
  }
  

  .work-image {
    width: 100%; /* Largura total */
    height: auto; /* Altura automática */
    display: block; /* Remove espaço em branco */
    margin-bottom: 2rem; /* Espaço abaixo */
  }


  /* HOMEPAGE */
  body.home {
    overflow: auto; /* Permite scroll no telemóvel */
    padding: 0rem; /* Sem padding */
  }

  body.home h1 {
    margin-top: -0.3rem; /* Margem superior negativa para ajustar posição */
    font-size: 30px; /* Tamanho da fonte */
    font-weight: 200; /* Peso da fonte leve */
    letter-spacing: -1px; /* Espaçamento negativo entre letras */
    line-height: 1; /* Altura da linha */
  }

  .JoanaTypo {
    font-family: 'BaleteSemibold', serif; /* Fonte Balete Semibold */
    font-size: 33px; /* Tamanho da fonte */
    line-height: 1.2; /* Espaçamento entre linhas */
    letter-spacing: 0.2px; /* Espaçamento entre letras */
  }

  /* ABOUT */
  body.about {
    overflow: auto; /* Permite scroll no mobile */
    padding: 1rem; /* Espaço interno */
  }

  .intro-text {
    font-size: 20px; /* Reduz o tamanho do texto */
    letter-spacing: -0.1px; /* Espaçamento entre letras */
    line-height: 0.1; /* Espaçamento entre linhas */
    margin-top: 20px; /* Margem superior pequena */
    line-height: 1.3;
    max-width: 1000px;
    margin: 30px;
  }

  .contacts {
    position: fixed; /* Fixa no lugar */
    bottom: 0; /* Na parte inferior da tela */
    left: 0; /* Alinhado à esquerda */
    display: flex; /* Flex container */
    flex-direction: column; /* Itens em coluna */
    align-items: flex-start; /* Alinhados à esquerda */
    gap: 1rem; /* Espaçamento entre itens */
    font-size: 18px; /* Tamanho da fonte */
    padding: 1.5rem; /* Espaçamento interno */
    z-index: 10; /* Fica acima de outros elementos */

  }

  .photo-mobileabout {
    display: flex;
    flex-direction: column;
    justify-content: center; /* alinha verticalmente */
    height: 100%; /* ou um valor fixo, tipo 400px */
  }
  
  .photo-mobileabout img {
    position: static; /* Usa a posição padrão no fluxo do layout */
    left: auto; /* Valor padrão */
    top: auto; /* Valor padrão */
    width: 100%; /* Ocupa 100% da largura do elemento pai */
    max-width: 390px; /* Nunca ultrapassa 390px de largura */
    height: auto; /* Ajusta a altura automaticamente com base na largura */
    margin-top: 9px; /* Espaço de 9px acima da imagem */
  }
  
  .photo-stack {
    display: none; /* Esconde no mobile */
  }

}


/* Escala e posicionamento da composição em telas até 900px */
@media (max-width: 900px) {
  .composition {
    transform: scale(0.8); /* Reduz escala */
    margin: 110px 10px 20px -260px; /* Margem personalizada */
  }

  .intro-text {
    font-family: 'Alte Haas Grotesk', Arial, sans-serif; /* Fonte usada no texto */
    text-align: center; /* Texto alinhado ao centro */
    font-size: 1.4rem; /* Tamanho da fonte */
    letter-spacing: -0.3px; /* Espaçamento negativo entre letras */
    line-height: 28px; /* Altura da linha */
    max-width: 2000px; /* Largura máxima do bloco de texto */
    margin: 46px; /* Margem em todos os lados */
    margin-top: 100px; /* Margem superior específica */
  }  
}

/* Escala e posicionamento da composição em telas até 769px */
@media (max-width: 769px) {
  .composition {
    transform: scale(0.2); /* Reduz escala ainda mais */
    margin: -610px 10px 20px -120px; /* Margem personalizada */
  }
}

/* Estilos para telas maiores que 769px */
@media (min-width: 769px) {
  .project-detail-main {
    position: fixed; /* Fixa o container */
    top: 30px; /* No topo da tela */
    width: 80%; /* Ocupa 80% da largura */
    overflow: hidden; /* Remove scroll interno */
    z-index: 4; /* Fica acima de elementos padrão */
  }
}

/* Contactos do about responsivos */
@media (min-width: 769px) {
  .contacts {
    flex-wrap: wrap; /* Permite separar a linha se não couber */
    row-gap: 0.5rem; /* controla o espaço vertical entre linhas */
  }

  #email_container button {
    top: -28px; /* Acima do container */
    left: 1.5%; /* Pequena distância da esquerda */
    display: none; /* aparece só com hover */
  }
}