/* ==========================================================================
   Home — 3 colunas de 1/3 (logo | projetos | copyright) + preview por trás.
   REGRA: é também o footer de cada página de projeto (.home--footer).
   Tudo o que mudar aqui muda nos dois. Não criar estilos só para a index.
   ========================================================================== */

.home {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 33% cada */
  place-items: center;                     /* cada elemento ao centro da sua coluna */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Logo e copyright ---------- */

.home__logo,
.home__copyright {
  position: relative;
  z-index: 10;
  margin: 0;
}
.home__copyright {
  text-align: center;
}

/* ---------- Lista ---------- */

.project-list {
  position: relative;
  z-index: 2;
  width: var(--list-w);           /* largura = distância entre projeto e marca */
  font-size: var(--fs-base);
  line-height: var(--lh-list);
}

.project-list__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.project-list__client {
  text-align: right;
  white-space: nowrap;
  color: var(--color-muted);     /* marca como detalhe */
}

/* "abrir": título e marca afastam-se 10px cada no projeto ativo */
.project-list__title,
.project-list__client {
  display: inline-block;
  transition: transform 0.5s var(--ease), color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}
.project-list__link.is-active .project-list__title  { transform: translateX(-10px); }
.project-list__link.is-active .project-list__client { transform: translateX(10px); }

.project-list.is-hovering .project-list__link { opacity: 0.28; }
.project-list.is-hovering .project-list__link.is-active { opacity: 1; }

/* projeto ativo: título e cliente na cor do texto, com um leve glow */
.project-list__link.is-active .project-list__title,
.project-list__link.is-active .project-list__client {
  color: var(--color-text);
  text-shadow: 0 0 12px rgba(248, 237, 209, 0.45);   /* brilho no creme do texto */
}


/* ---------- Preview (full frame, ocupa todo o fundo) ---------- */

.home__preview {
  position: fixed;
  inset: 0;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
/* camada preta full frame a 50%, entre as imagens e os projetos */
.home__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
.home__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.35s var(--ease), transform 0.6s var(--ease);
}
.home__preview img.is-visible { opacity: 1; transform: none; }

/* ---------- Animação de entrada ----------
   1. logo aparece num fade simples
   2. copyright
   3. projetos aparecem um a um, do primeiro ao último (--i definido em home.js)
   Fica em pausa até as fontes carregarem (home.js adiciona .is-ready à secção;
   no footer da página de projeto, só quando a secção entra no ecrã). */

@keyframes intro-opacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes intro-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.home__logo {
  animation: intro-opacity 3.6s var(--ease) 0.2s both;
}
.project-list__item {
  animation: intro-fade 2s var(--ease) both;
  animation-delay: calc(1.5s + var(--i, 0) * 80ms);
}
.home__copyright {
  animation: intro-fade 2.4s var(--ease) 0.7s both;
}

.home:not(.is-ready) .home__logo,
.home:not(.is-ready) .project-list__item,
.home:not(.is-ready) .home__copyright {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .home__logo,
  .project-list__item,
  .home__copyright { animation: none; }
}

/* ---------- Transição home → projeto ----------
   (sequência controlada em home.js)
   .is-freezing    0. desliga as animações de entrada (senão bloqueiam as
                      transições de saída)
   .is-leaving     1. a imagem do hover desaparece; a linha escolhida vai para
                      o centro vertical; logo, copyright e restantes projetos
                      saem para a lateral mais próxima em fade
   .is-opening     2. título e cliente afastam-se até às margens e, ainda a
                      meio, a linha sobe até --project-top (home.js)
   No fim navega para project.html, que começa exatamente neste estado. */

.is-freezing .home__logo,
.is-freezing .home__copyright,
.is-freezing .project-list__item { animation: none; }

.is-leaving .home__logo,
.is-leaving .home__copyright,
.is-leaving .project-list__item,
.is-leaving .project-list__title,
.is-leaving .project-list__client {
  transition:
    transform 0.9s var(--ease-in-out),
    opacity 0.7s var(--ease),
    color 0.6s var(--ease),
    text-shadow 0.6s var(--ease);
}

/* logo sai pela esquerda, copyright pela direita */
.is-leaving .home__logo      { transform: translateX(-30vw); opacity: 0; }
.is-leaving .home__copyright { transform: translateX(30vw);  opacity: 0; }

/* outros projetos: título para a esquerda, cliente para a direita */
.is-leaving .project-list__item:not(.is-selected) .project-list__title  { transform: translateX(-30vw); opacity: 0; }
.is-leaving .project-list__item:not(.is-selected) .project-list__client { transform: translateX(30vw);  opacity: 0; }

/* passo 2: o projeto escolhido perde o brilho do hover e fica como na página de projeto */
.is-opening .project-list__link.is-active .project-list__title  { color: var(--color-text); text-shadow: none; }
.is-opening .project-list__link.is-active .project-list__client { color: var(--color-text); text-shadow: none; }

.is-leaving .home__preview img.is-visible {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

/* ---------- Transição logo → About ----------
   .is-to-about: tudo desaparece menos o logo, que sobe até --about-top
   (translateY em home.js). A About começa com o logo nessa posição. */

.is-to-about .project-list__item,
.is-to-about .home__copyright,
.is-to-about .home__preview img.is-visible {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.is-to-about .home__logo {
  transition: transform 1.1s var(--ease-in-out) 0.2s;
}

/* ---------- Como footer da página de projeto ----------
   A capa do hover ocupa a secção (que tem a altura do ecrã), em vez de ficar
   fixa por cima de todo o conteúdo do projeto. */
.home--footer .home__preview { position: absolute; }

/* ---------- Mobile / touch: logo, lista e copyright empilhados ao centro ---------- */

@media (max-width: 767px), (hover: none) {
  .home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;   /* logo em cima, lista ao centro, copyright em baixo */
    gap: 64px;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    /* no mobile a distância à borda do desktop passa para o topo e a base */
    padding: var(--site-edge) var(--site-margin);
  }
  .home__preview { display: none; }


  .project-list { width: min(100%, 330px); }
  .project-list.is-hovering .project-list__link { opacity: 1; }
  .project-list__link.is-active .project-list__title,
  .project-list__link.is-active .project-list__client { transform: none; }

  .home__copyright { text-align: center; }

  /* ordem da entrada no mobile: logo → projetos → copyright */
  .project-list__item { animation-delay: calc(0.7s + var(--i, 0) * 80ms); }
  .home__copyright { animation-delay: 1.5s; }
}