/* =========================================================
   Seção "Portfolio" — abaixo de "Services"
   Comportamento trazido do site modelo (framer), com a identidade
   visual da IronFox (preto, vermelho, DM Sans):
     - cabeçalho: eyebrow + subtítulo, reveal simples ao entrar na tela.
     - 4 cards de projeto, cada um ocupando a viewport inteira (100vh),
       empilhados em scroll vertical normal (sem scroll-jacking).
     - atrás dos cards, uma camada de fundo (imagem borrada + véu +
       grain) fica grudada no topo (position:sticky) durante toda a
       passagem pelos 4 cards, e troca (crossfade) pra foto do projeto
       ativo conforme ele cruza o centro da tela.
     - a imagem de cada card tem parallax: desliza verticalmente dentro
       da moldura enquanto o card atravessa a viewport.
   Ajustes de timing/threshold: ver js/portfolio-section.js
   ========================================================= */

.ifx-portfolio {
  position: relative;
  background: #000;
  padding-bottom: 120px;
}

/* ---- cabeçalho ----
   .ifx-portfolio-head sem width própria (só margin:0 8%) fica com width:auto,
   que no fluxo de bloco normal já absorve as margens sozinho e resulta numa
   caixa de exatamente v0→v3 (84% da seção) — isso continua valendo com
   display:flex, que só muda o layout dos FILHOS, não como o próprio
   container resolve width:auto. É dentro dessa caixa de 84% que as duas
   colunas (esquerda 33.3333% = v0→v1, marquee = resto = v1→v3) são
   porcentagens aninhadas de verdade, sem o problema de v0/v1 anterior (que
   era width E margin na MESMA caixa, calculados os dois contra a seção
   inteira em vez de um dentro do outro). */
.ifx-portfolio-head {
  margin: 0 8%;
  padding: 140px 0 90px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ifx-ease-spring), transform 1s var(--ifx-ease-spring);
}
.ifx-portfolio-head.ifx-portfolio-head-in { opacity: 1; transform: translateY(0); }

.ifx-portfolio-head-left {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  text-align: left;
}

.ifx-portfolio-head-left .ifx-orbit-eyebrow { justify-content: flex-start; margin-bottom: 22px; }

/* a coluna é estreita — o texto "[IF© ‒ PORTFÓLIO / PORTFOLIO]" não pode
   ficar preso em uma linha só (.ifx-orbit-eyebrow-text é nowrap por padrão,
   pensado pra colunas mais largas) ou ele vaza a coluna e cruza a linha v1 */
.ifx-portfolio-head-left .ifx-orbit-eyebrow-text { white-space: normal; }

.ifx-portfolio-subhead {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255,255,255,.6);
}

/* ---- marquee "Case studies." — colunas do meio + direita (v1→v3) ----
   Faixa deslizante infinita, direita → esquerda, alinhada com a linha do
   eyebrow. overflow:hidden recorta tudo o que passa da própria caixa (que
   termina em v3, a última linha do grid à direita — dali o texto "nasce" e
   desliza pra esquerda). 2 grupos idênticos lado a lado + animação
   translateX(0 → -50%) = loop contínuo sem costura visível. */
.ifx-portfolio-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-top: 6px;
}

.ifx-portfolio-marquee-track {
  display: flex;
  width: max-content;
  animation: ifx-portfolio-marquee 24s linear infinite;
}

.ifx-portfolio-marquee-group {
  display: flex;
  flex-shrink: 0;
}

.ifx-portfolio-marquee-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-right: 64px;
  white-space: nowrap;
}

.ifx-portfolio-marquee-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 8.4vw, 112px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}

.ifx-portfolio-marquee-year {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.4);
}

@keyframes ifx-portfolio-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- wrapper: fundo sticky + lista de cards ---- */
.ifx-portfolio-wrapper {
  position: relative;
  display: flex;
}

/* camada de fundo: absolute, altura = altura total da lista (irmã em fluxo normal) */
.ifx-portfolio-bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
  pointer-events: none;
}

/* o elemento sticky de verdade: gruda no topo por 100vh enquanto os 4
   cards de 100vh cada rolam por cima */
.ifx-portfolio-bg-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  flex: 1 0 0;
  overflow: hidden;
}

.ifx-portfolio-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.ifx-portfolio-bg-slide.is-active { opacity: 1; }

.ifx-portfolio-bg-slide img {
  position: absolute;
  inset: -10%;
  width: 120%;
  max-width: none; /* reset global (img,video{max-width:100%} em style.css) prendia
    a imagem em 100% de largura mesmo pedindo 120%, sobrando uma faixa preta
    à direita (a altura não sofria, só a largura tem max-width no reset) */
  height: 120%;
  object-fit: cover;
  /* brightness baixa o tom de fotos claras (ex.: embalagem creme do projeto 01)
     antes do véu, pra texto branco manter contraste sem perder a foto */
  filter: blur(14px) brightness(.85) saturate(1.1);
  z-index: 0;
}

.ifx-portfolio-bg-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: url('../assets/noise.jpg') repeat;
  opacity: .12;
  mix-blend-mode: overlay;
  z-index: 2;
}

.ifx-portfolio-bg-scrim {
  position: absolute;
  inset: 0;
  /* z-index explícito: no HTML a <img> vem depois do véu e do grain e, sem
     isso, ficava por cima dos dois (véu nunca aparecia) */
  z-index: 1;
  /* véu em camadas: vinheta nas bordas + reforço em cima (meta) e embaixo
     (título/tags), onde o texto branco fica; o meio é coberto pela imagem do card */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.82) 100%);
}

/* ---- lista de cards (fluxo normal, define a altura total do wrapper) ---- */
.ifx-portfolio-list {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ifx-portfolio-item {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 90px 0;
}

.ifx-portfolio-item-inner {
  width: 100%;
  margin: 0 8%;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s var(--ifx-ease-spring), transform .9s var(--ifx-ease-spring);
}
.ifx-portfolio-item.ifx-portfolio-item-in .ifx-portfolio-item-inner { opacity: 1; transform: translateY(0); }

/* meta: índice / ano / cliente, nas 3 colunas do grid do site (v0→v1, v1→v2, v2→v3).
   O índice é só o número em cinza (não tem rótulo fixo em cima dele). Ano e
   cliente têm um rótulo fixo em cinza ("YEAR", "CLIENT") ao lado — não em
   cima — da resposta (o valor de verdade do projeto), essa em branco. */
.ifx-portfolio-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  margin: 0 0 28px;
  padding: 0 4px;
  align-items: center;
}

.ifx-portfolio-index {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.4);
}

.ifx-portfolio-meta-col {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ifx-portfolio-meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.ifx-portfolio-year,
.ifx-portfolio-client {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}

/* imagem do card: full-bleed dentro do container (v0→v3), com parallax
   aplicado via GSAP na .ifx-portfolio-media-img (ver js).
   3 camadas dentro de .ifx-portfolio-media:
   - .ifx-portfolio-media-frame: só recorta (overflow hidden), não anima —
     é o que garante que nada encolhe e mostra o fundo preto atrás.
   - .ifx-portfolio-media-zoom: leva o zoom via CSS (scale). Nasce em zoom-in
     (>1, sempre maior que a moldura) e recua pra 1 no hover ("zoom-out") —
     como nunca fica menor que a moldura, não sobra espaço preto na borda.
   - .ifx-portfolio-media-img: só o parallax do GSAP (translateY via yPercent).
     Fica isolado num elemento próprio pra não brigar com o transform:scale
     acima — GSAP reescreve `transform` inteiro a cada tick do scrub. */
.ifx-portfolio-media {
  position: relative;
  height: min(65vh, 620px);
  overflow: hidden;
  margin-bottom: 32px;
  background: #0b0b0c;
}

.ifx-portfolio-media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ifx-portfolio-media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0);
  transition: background .6s ease;
}
.ifx-portfolio-media:hover .ifx-portfolio-media-frame::after { background: rgba(0,0,0,.4); }

.ifx-portfolio-media-zoom {
  position: absolute;
  inset: 0;
  transform: scale(1.12);
  transition: transform .8s var(--ifx-ease-spring);
}
.ifx-portfolio-media:hover .ifx-portfolio-media-zoom { transform: scale(1); }

.ifx-portfolio-media-img {
  position: absolute;
  left: 0;
  top: -18%;
  width: 100%;
  height: 136%;
  object-fit: cover;
  will-change: transform;
  filter: grayscale(.1) contrast(1.05);
}

/* logo do cliente/projeto: some por padrão, aparece centralizada no hover */
.ifx-portfolio-media-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 17%;
  max-height: 17%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.88);
  transition: opacity .5s ease, transform .5s var(--ifx-ease-spring);
  pointer-events: none;
}
.ifx-portfolio-media:hover .ifx-portfolio-media-logo { opacity: 1; transform: scale(1); }

/* título ocupa a coluna do meio (v1→v2), tags a coluna da direita (v2→v3) —
   as mesmas 3 colunas da .ifx-portfolio-meta acima */
.ifx-portfolio-title-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  align-items: start;
  padding: 0 4px;
}

.ifx-portfolio-title {
  grid-column: 2;
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

/* palavra por palavra: cada palavra fica numa "janela" (overflow hidden) e a
   camada interna sobe + ganha opacidade com delay crescente por palavra.
   Dispara com um observer PRÓPRIO no título (.ifx-portfolio-title-in, ver js)
   — não reaproveita o .ifx-portfolio-item-in do card. O card inteiro (100vh)
   já cruzava 20% de visibilidade só com a meta/imagem no topo aparecendo, ou
   seja, a transição do título rodava (e terminava) inteira fora da tela,
   antes do título chegar a aparecer — por isso a animação nunca era vista. */
.ifx-portfolio-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.ifx-portfolio-word:not(:last-child) { margin-right: .28em; }

.ifx-portfolio-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity .5s var(--ifx-ease-spring), transform .5s var(--ifx-ease-spring);
}
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word-inner { opacity: 1; transform: translateY(0); }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(1) .ifx-portfolio-word-inner { transition-delay: .05s; }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(2) .ifx-portfolio-word-inner { transition-delay: .12s; }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(3) .ifx-portfolio-word-inner { transition-delay: .19s; }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(4) .ifx-portfolio-word-inner { transition-delay: .26s; }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(5) .ifx-portfolio-word-inner { transition-delay: .33s; }
.ifx-portfolio-title.ifx-portfolio-title-in .ifx-portfolio-word:nth-child(6) .ifx-portfolio-word-inner { transition-delay: .40s; }

/* tags mais apagadas — ocupam a coluna da direita do grid */
.ifx-portfolio-tags {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ifx-portfolio-tags li {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .ifx-portfolio-title { font-size: clamp(20px, 3.8vw, 27px); }
}

@media (max-width: 700px) {
  .ifx-portfolio-head { padding: 96px 0 64px; margin: 0 6%; flex-direction: column; gap: 40px; }
  .ifx-portfolio-head-left { flex-basis: auto; max-width: 100%; }
  .ifx-portfolio-marquee { width: 100%; }
  .ifx-portfolio-marquee-text { font-size: clamp(52px, 18vw, 76px); }
  .ifx-portfolio-item { padding: 56px 0; }
  .ifx-portfolio-item-inner { margin: 0 6%; }
  .ifx-portfolio-meta { grid-template-columns: repeat(3, 1fr); gap: 6px 10px; margin-bottom: 20px; }
  .ifx-portfolio-meta-label { font-size: 10px; }
  .ifx-portfolio-index, .ifx-portfolio-year, .ifx-portfolio-client { font-size: 11px; }
  .ifx-portfolio-media { height: 42vh; margin-bottom: 24px; }
  .ifx-portfolio-media-logo { max-width: 25%; max-height: 25%; }
  .ifx-portfolio-title-wrap { display: block; }
  .ifx-portfolio-title { margin-bottom: 16px; }
  .ifx-portfolio-tags { margin: 0; }
}