/* =============================================
   PÁGINA PROJETOS
   Carregada DEPOIS de style.css, que já traz fontes,
   tokens, reset, nav e overlay de contato.
   Aqui ficam só os overrides e o que é próprio da página.
   ============================================= */

/* A home trava o scroll (.fullpage controla as seções por JS).
   Esta página é de rolagem normal, então liberamos. */
html, body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: var(--color-blue-bright);
}

/* =============================================
   HERO
   ============================================= */
.proj-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* evita o pulo causado pela barra do navegador no mobile */
  overflow: hidden;
}

/* O topo da imagem é azul-escuro e a base é #0024AC (o mesmo fundo
   da página), então o hero se funde com a grade sem emenda visível.
   Por isso a base fica ancorada: em telas curtas o corte acontece no
   topo, preservando o azul de baixo que casa com o fundo. */
.proj-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.proj-hero-title {
  position: absolute;
  left: 1.7%;
  bottom: 4%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 17.27vw, 22rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-red);
  white-space: nowrap;
}

/* =============================================
   GRADE DE PROJETOS
   ============================================= */
.proj-grid {
  --proj-gap: clamp(8px, 1.2vw, 20px);

  display: grid;
  /* 6 colunas: a linha de 3 usa span 2 e a de 2 usa span 3 */
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 21vw, 400px);
  gap: var(--proj-gap);
  padding: var(--proj-gap) var(--proj-gap) 64px;
}

/* Ciclo de 5 itens: três (span 2) e depois dois (span 3).
   Assim o padrão 3-2-3-2 continua sozinho conforme
   novas imagens forem adicionadas à lista. */
.proj-item:nth-child(5n + 1),
.proj-item:nth-child(5n + 2),
.proj-item:nth-child(5n + 3) {
  grid-column: span 2;
}

.proj-item:nth-child(5n + 4),
.proj-item:nth-child(5n + 5) {
  grid-column: span 3;
}

.proj-item {
  position: relative;
  overflow: hidden;
}

.proj-item img,
.proj-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease, transform 0.4s ease;
}

/* Tipo de trabalho + cliente, centralizados sobre a imagem.
   O fundo (--color-blue-bright a 30%) dá contraste ao texto vermelho
   sobre o blur, melhorando a leitura em qualquer imagem de fundo. */
.proj-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  padding: 0 8%;
  text-align: center;
  background: rgba(0, 36, 172, 0.3); /* --color-blue-bright a 30% */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.proj-tipo {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.7vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-red);
}

.proj-cliente {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.75rem, 1.15vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-red);
}

@media (hover: hover) and (pointer: fine) {
  /* o scale acompanha o blur para não revelar as bordas borradas da imagem */
  .proj-item:hover img,
  .proj-item:hover video,
  .proj-item:focus-visible img,
  .proj-item:focus-visible video {
    filter: blur(10px);
    transform: scale(1.06);
  }

  .proj-item:hover .proj-info,
  .proj-item:focus-visible .proj-info {
    opacity: 1;
  }
}

/* =============================================
   CURSOR CUSTOMIZADO (+)
   ============================================= */
/* A classe só entra via JS: sem script, o cursor normal continua valendo */
body.has-proj-cursor .proj-item {
  cursor: none;
}

/* Dois elementos de propósito: o externo só posiciona (sem transição, para
   não arrastar atrás do ponteiro) e o interno faz a animação de entrada. */
.proj-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px; /* centraliza o círculo no ponteiro */
  z-index: 500;
  pointer-events: none;
  will-change: transform;
}

.proj-cursor-inner {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.proj-cursor.is-visible .proj-cursor-inner {
  opacity: 1;
  transform: scale(1);
}

.proj-cursor img {
  width: 100%;
  height: 100%;
  display: block;
}

/* =============================================
   LIGHTBOX
   ============================================= */
.proj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.proj-lightbox[hidden] {
  display: none;
}

.proj-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Mesmo ícone e giro do botão de fechar do vídeo Reels (mais_icon.svg
   rotacionado 45° vira um X) — mantém o padrão visual do site. */
.proj-lightbox-close {
  position: absolute;
  top: 28px;
  right: 48px;
  z-index: 1;
  width: 34px;
  height: 34px;
  transform: rotate(45deg);
  transition: opacity 0.2s;
}

.proj-lightbox-close img {
  width: 100%;
  height: 100%;
  display: block;
}

.proj-lightbox-close:hover {
  opacity: 0.7;
}

/* cover: preenche a tela inteira, sem barras pretas nas laterais */
.proj-lightbox img,
.proj-lightbox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.proj-lightbox img[hidden],
.proj-lightbox video[hidden] {
  display: none;
}

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 640px) {
  .proj-hero-title {
    left: 24px;
    font-size: clamp(2.2rem, 15.6vw, 22rem);
  }

  /* Uma imagem por linha: em 375px a grade de 3 ficaria ilegível */
  .proj-item:nth-child(5n + 1),
  .proj-item:nth-child(5n + 2),
  .proj-item:nth-child(5n + 3),
  .proj-item:nth-child(5n + 4),
  .proj-item:nth-child(5n + 5) {
    grid-column: span 6;
  }

  .proj-grid {
    grid-auto-rows: clamp(180px, 52vw, 320px);
    padding-bottom: 32px;
  }

  .proj-lightbox-close {
    top: 24px;
    right: 24px;
  }
}