/* Secao portfolio inteira. Tudo com prefixo pf-. Traz o proprio
   prefers-reduced-motion no fim. */

/* ============================================================
   SEÇÃO PORTFÓLIO — tudo com prefixo pf-, porque .cena, .palco,
   .titulo e .aberto já existem no hero acima.
   ============================================================ */
.pf-cena{
  position:relative; width:100%;
  height:100vh; height:100svh;
  overflow:hidden; background:var(--carvao); isolation:isolate;
}

/* ---------- cenário ---------- */
.pf-c-cenario{position:absolute;inset:0;z-index:1;pointer-events:none}
.pf-c-cenario img{position:absolute}
.pf-grupo{position:absolute;inset:0;animation:pf-respirar 52s ease-in-out infinite;will-change:transform}
/* respiração + deriva lenta: a escala base de 1.02 garante margem para o
   deslocamento sem abrir vão nas bordas */
@keyframes pf-respirar{
  0%   {transform:scale(1.02) translate3d(-6px, 4px, 0)}
  35%  {transform:scale(1.035) translate3d(4px, -3px, 0)}
  65%  {transform:scale(1.045) translate3d(6px, -6px, 0)}
  100% {transform:scale(1.02) translate3d(-6px, 4px, 0)}
}

/* luz verde nos olhos: elipse com a inclinação do olho, brilho contido */
.pf-olho{
  position:absolute; display:block;
  width:var(--olho-w,22px); height:var(--olho-h,9px);
  margin:calc(var(--olho-h,9px) / -2) 0 0 calc(var(--olho-w,22px) / -2);
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(120,214,152,.88) 0 22%,
    rgba(34,168,96,.60) 52%,
    rgba(12,92,52,.24) 78%,
    transparent 100%);
  filter:blur(.6px);
  mix-blend-mode:screen;
  animation:pf-piscar 6s ease-in-out infinite;
  pointer-events:none;
}
.pf-olho--e{left:var(--olho-ex,47.7%); top:var(--olho-ey,39.3%); transform:rotate(-11deg)}
.pf-olho--d{left:var(--olho-dx,51.3%); top:var(--olho-dy,39.2%); transform:rotate(11deg)}
@keyframes pf-piscar{
  0%,100%{opacity:.34}
  14%{opacity:.82} 22%{opacity:.42} 30%{opacity:.70}
  40%{opacity:.36} 62%{opacity:.34}
  70%{opacity:.86} 78%{opacity:.44} 86%{opacity:.62}
}


/* ---------- atmosfera ---------- */
.pf-sol{
  position:absolute; z-index:2; pointer-events:none;
  width:46%; aspect-ratio:1; left:54%; top:var(--sol-y,24%); margin:-23% 0 0 -23%;
  background:radial-gradient(closest-side, rgba(255,196,120,.24), rgba(255,130,40,.09) 46%, transparent 72%);
  animation:pf-pulsar 12s ease-in-out infinite;
}
@keyframes pf-pulsar{0%,100%{opacity:.65}50%{opacity:1}}

/* fumaça: placas reais em screen, repetidas na horizontal.
   A faixa tem 200% de largura e desliza exatamente uma peça, então o loop
   não tem emenda (as bordas das placas já morrem em preto). */
.pf-fumaca{
  position:absolute; z-index:2; left:0; right:0;
  pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
  contain:paint;
  transform:translateZ(0);
}
/* O ladrilho tem largura propria (--fumaca-w, escrita pelo layout()) em vez de
   acompanhar a secao. Antes era 50% de uma faixa de 200%, ou seja, um ladrilho =
   largura da tela: no celular isso espremia a placa de 1600px em 375 e a fumaca
   sumia. A faixa continua com dois ladrilhos e desliza exatamente um, sem emenda. */
.pf-fumaca i{
  position:absolute; inset:0 auto 0 0;
  width:calc(var(--fumaca-w,50vw) * 2);
  background-repeat:repeat-x;
  background-size:var(--fumaca-w,50vw) 100%;
  animation:pf-derivar var(--vel,110s) linear infinite;
  will-change:transform;
}
@keyframes pf-derivar{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* névoa rasteira, na base da tela */
.pf-fumaca--chao{
  bottom:0; height:var(--fumaca-chao,30%);
  -webkit-mask-image:linear-gradient(transparent, #000 38%);
          mask-image:linear-gradient(transparent, #000 38%);
}
/* Os fundos em CSS nao aceitam loading="lazy": ficam desligados ate a secao se
   aproximar (.pf-perto, ligada pelo JS), senao baixam no arranque com a secao
   ainda duas telas abaixo. */
.pf-perto .pf-fumaca--chao i{background-image:url("../assets/portfolio/fumaca-chao.jpg")}
.pf-fumaca--chao i:first-child{--vel:130s; opacity:.85}
.pf-fumaca--chao i:last-child{--vel:190s; opacity:.5; transform:scaleX(-1); animation-direction:reverse}

/* colunas subindo, a partir dos escombros */
.pf-fumaca--colunas{
  top:var(--fumaca-col-y,62%); height:var(--fumaca-col-h,34%);
  opacity:.55;
  -webkit-mask-image:linear-gradient(transparent, #000 30% 80%, transparent);
          mask-image:linear-gradient(transparent, #000 30% 80%, transparent);
}
.pf-fumaca--colunas i{--vel:240s}
.pf-perto .pf-fumaca--colunas i{background-image:url("../assets/portfolio/fumaca-colunas.jpg")}

/* faíscas vermelhas subindo */
#pf-faiscas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:6; pointer-events:none;
}

.pf-cena::after{
  content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 30%, transparent 56%, rgba(0,0,0,.45) 100%),
    linear-gradient(transparent 86%, rgba(0,0,0,.35));
}

/* ---------- título ---------- */
.pf-banda{
  position:absolute; z-index:4; inset:0 0 auto 0;
  height:var(--banda,190px); pointer-events:none;
  background:linear-gradient(rgba(6,4,3,.82), rgba(8,5,4,.5) 45%, rgba(8,5,4,.16) 72%, transparent);
}
.pf-titulo{
  position:absolute; z-index:5; margin:0;
  left:50%; transform:translateX(-50%);
  top:var(--titulo-y,16px); width:var(--titulo-w,380px);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.95)) drop-shadow(0 0 34px rgba(0,0,0,.8));
  pointer-events:none;
}
.pf-titulo img{width:100%;height:auto}
.pf-titulo__mov{display:block; transform:translateY(-170%); opacity:0}
/* cai do topo quando a seção entra na tela */
.pf-cena.pf-entrou .pf-titulo__mov{animation:pf-cair 1s cubic-bezier(.2,1.25,.38,1) forwards}
@keyframes pf-cair{
  0%{transform:translateY(-170%); opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0); opacity:1}
}
/* depois de pousar, flutua de leve: sobe, desce e oscila de 0,4° */
.pf-cena.pf-entrou .pf-titulo__mov.pf-pousou{animation:pf-flutuarTitulo 8s ease-in-out infinite; opacity:1}
@keyframes pf-flutuarTitulo{
  0%,100%{transform:translateY(-5px) rotate(-.35deg)}
  30%{transform:translateY(2px) rotate(.2deg)}
  60%{transform:translateY(5px) rotate(.35deg)}
}
/* o brilho por trás respira junto, em outro ritmo */
.pf-titulo{animation:pf-brilhoTitulo 11s ease-in-out infinite}
@keyframes pf-brilhoTitulo{
  0%,100%{filter:drop-shadow(0 8px 20px rgba(0,0,0,.95)) drop-shadow(0 0 28px rgba(0,0,0,.75))}
  50%{filter:drop-shadow(0 12px 26px rgba(0,0,0,.95)) drop-shadow(0 0 40px rgba(120,20,12,.35))}
}

/* ============================================================
   PALCO: a peça, centralizada na muralha
   ============================================================ */
.pf-palco{
  position:absolute; z-index:5;
  left:0; right:0; top:var(--palco-topo,40%); height:var(--card-h,440px);
  display:flex; align-items:center; justify-content:center; gap:var(--gap,32px);
}
/* sombra de apoio na pedra, atrás da peça */
.pf-palco::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--card-w,290px) * 1.9); height:calc(var(--card-h,440px) * 1.25);
  background:radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.28) 58%, transparent 78%);
  pointer-events:none;
}

.pf-peca{
  all:unset; display:block; cursor:zoom-in;
  position:relative; flex:none;
  width:var(--card-w,290px); height:var(--card-h,440px);
  animation:pf-flutuar 9s ease-in-out infinite; will-change:transform;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.78));
  transition:filter .35s;
}
@keyframes pf-flutuar{
  0%,100%{transform:translate3d(0,-4px,0)}
  50%{transform:translate3d(0,4px,0)}
}
.pf-peca:hover,.pf-peca:focus-visible{filter:drop-shadow(0 26px 30px rgba(0,0,0,.78)) drop-shadow(0 0 28px rgba(200,45,30,.45))}
.pf-peca:focus-visible{outline:2px solid rgba(220,90,60,.9);outline-offset:8px}

/* a foto ocupa a janela da moldura inteira, sem cortar nada */
.pf-peca__foto{
  position:absolute; left:17.8%; right:17.4%; top:3.9%; bottom:10.9%;
  overflow:hidden; background:#080606;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9), inset 0 0 34px rgba(0,0,0,.55);
}
.pf-peca__foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:opacity .22s ease, transform .3s ease;
}
/* a foto aparece INTEIRA; o que sobra na janela é preenchido
   por uma cópia desfocada e escurecida dela mesma */
.pf-peca__fundo{
  object-fit:cover !important;
  filter:blur(16px) brightness(.34) saturate(.7);
  transform:scale(1.12);
}
.pf-peca__foto img.pf-saindo{opacity:0; transform:translateX(var(--lado,-16px))}

/* Esteira CONTINUA: as pecas nunca param. O conjunto inteiro aparece duas vezes
   na esteira e a animacao desloca exatamente UM conjunto (--volta) — quando chega
   la, a segunda copia esta no lugar da primeira e o reinicio e invisivel. Mesma
   tecnica das placas de fumaca (pf-derivar).

   `--volta` e em px, nao 50%: com o gap entre as duas copias, metade da largura
   total fica meio gap curta e a emenda pularia.

   Usa `translate`, nunca `transform` — `transform` e da flutuacao de cada peca
   (pf-flutuar), e as duas propriedades compoem em vez de brigar. */
.pf-trilho-janela{
  position:relative; flex:1; min-width:0; overflow:hidden;
  /* folga vertical pra sombra da peca nao ser cortada pelo overflow */
  padding:30px 0; margin:-30px 0;
}
.pf-trilho{
  display:flex; align-items:center; width:max-content;
  gap:var(--gap,32px);
  animation:pf-desfila var(--desfile,32s) linear infinite;
}
@keyframes pf-desfila{
  from{translate:0 0}
  to{translate:calc(var(--volta,0px) * -1) 0}
}
.pf-peca__moldura{
  position:absolute; inset:0; width:100%; height:100%;
  filter:brightness(1.18) contrast(1.12) saturate(1.1)
         drop-shadow(0 2px 3px rgba(0,0,0,.9));
}

/* etiqueta ARQUIVO nn: faixa preta na base, por cima da moldura */
.pf-arquivo{
  position:absolute; left:50%; bottom:11%;
  transform:translateX(-50%);
  min-width:52%;
  padding:.45em 1.1em .4em;
  text-align:center; white-space:nowrap;
  font:600 var(--arquivo,13px)/1 "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing:.26em; text-indent:.26em;
  color:#f2e8d8;
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.82));
  border-top:1px solid rgba(214,70,44,.55);
  border-bottom:1px solid rgba(190,160,120,.28);
  box-shadow:0 6px 14px rgba(0,0,0,.6);
  text-shadow:0 1px 2px #000;
  pointer-events:none; z-index:3;
}

/* ---------- setas ---------- */
.pf-seta{
  all:unset; cursor:pointer; flex:none;
  width:var(--seta,58px);
  display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.75));
  transition:transform .2s, filter .25s;
}
.pf-seta img{width:100%;height:auto}
.pf-seta:hover{transform:scale(1.12); filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(220,40,25,.75))}
.pf-seta:active{transform:scale(.96)}
.pf-seta:focus-visible{outline:2px solid rgba(230,120,80,.9); outline-offset:8px}

/* ---------- botão LISTA COMPLETA ---------- */
.pf-lista{
  all:unset; cursor:pointer;
  position:absolute; z-index:5;
  left:50%; top:var(--lista-y,88%);
  width:var(--lista-w,260px);
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));
  transition:transform .25s, filter .25s;
}
.pf-lista img{width:100%;height:auto;filter:brightness(1.3) saturate(1.35) contrast(1.05)}
.pf-lista:hover{transform:translateX(-50%) scale(1.05); filter:drop-shadow(0 12px 22px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(214,58,37,.75))}
.pf-lista:hover img{filter:brightness(1.5) saturate(1.5) contrast(1.05)}
.pf-lista:active{transform:translateX(-50%) scale(.98)}
.pf-lista:focus-visible{outline:2px solid rgba(230,120,80,.9); outline-offset:6px}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.pf-catalogo{
  position:fixed; inset:0; z-index:40; display:none;
  flex-direction:column; align-items:center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(60,16,10,.55), transparent 60%),
    rgba(8,5,4,.96);
  padding:clamp(20px,4vh,48px) clamp(16px,4vw,64px);
  overflow:auto;
}
.pf-catalogo.pf-aberto{display:flex}
.pf-catalogo__titulo{width:min(420px,60vw); margin-bottom:clamp(16px,3vh,34px); filter:drop-shadow(0 6px 18px rgba(0,0,0,.8))}
.pf-catalogo__titulo img{width:100%;height:auto}
.pf-catalogo__grade{
  display:grid; gap:clamp(14px,2vw,28px);
  grid-template-columns:repeat(auto-fit, minmax(clamp(150px,18vw,230px), 230px));
  justify-content:center;
  width:min(1180px, 100%);
}
.pf-item{
  all:unset; cursor:zoom-in; position:relative; display:block;
  aspect-ratio:2/3;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));
  transition:transform .25s, filter .25s;
}
.pf-item__foto{
  position:absolute; left:14.84%; right:13.67%; top:8.79%; bottom:9.18%;
  overflow:hidden; background:#080606;
}
.pf-item__foto img{width:100%;height:100%;object-fit:cover}
.pf-item__moldura{position:absolute;inset:0;width:100%;height:100%}
.pf-item .pf-arquivo{font-size:clamp(9px,1vw,12px); bottom:12%; min-width:56%}
.pf-item:hover,.pf-item:focus-visible{
  transform:translateY(-6px);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(200,45,30,.45));
}
.pf-item:focus-visible{outline:2px solid rgba(220,90,60,.9); outline-offset:6px}
.pf-fechar{
  all:unset; cursor:pointer; position:fixed; z-index:3;
  top:calc(18px + var(--pad-top,0px)); right:18px;
  width:46px; height:46px; display:grid; place-items:center; color:var(--ferro);
  border:1px solid rgba(190,160,120,.35); background:rgba(20,12,10,.7);
}
.pf-fechar::before,.pf-fechar::after{content:"";position:absolute;width:44%;height:2px;background:currentColor}
.pf-fechar::before{transform:rotate(45deg)} .pf-fechar::after{transform:rotate(-45deg)}
.pf-fechar:hover{background:rgba(120,32,20,.8);border-color:rgba(230,110,70,.6)}

/* ---------- visor ---------- */
.pf-visor{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:center; justify-content:center;
  background:rgba(6,4,3,.94); cursor:zoom-out; padding:3vh 4vw;
}
.pf-visor.pf-aberto{display:flex}
#pf-visor-img{
  max-width:min(92vw,640px); max-height:94vh; width:auto; height:auto;
  border:1px solid rgba(190,160,120,.25); box-shadow:0 30px 60px rgba(0,0,0,.8);
  animation:pf-surgir .28s ease-out;
}
.pf-visor .pf-seta img{width:100%; height:auto; border:0; box-shadow:none; animation:none}
@keyframes pf-surgir{from{opacity:0;transform:scale(.97)}}
/* As setas do carrossel sairam: o desfile e continuo e automatico. As unicas que
   restam sao estas, dentro do visor, pra trocar de obra com a foto ampliada. */
.pf-visor .pf-seta{position:absolute; top:50%; transform:translateY(-50%); width:clamp(32px, 3.4vw, 54px)}
.pf-visor .pf-seta:hover{transform:translateY(-50%) scale(1.12)}
.pf-visor .pf-seta:active{transform:translateY(-50%) scale(.96)}
.pf-visor .pf-seta--e{left:2vw} .pf-visor .pf-seta--d{right:2vw}

@media (prefers-reduced-motion: reduce){
  .pf-cena *{animation:none!important}
  .pf-peca__foto img{transition:none}
  #pf-faiscas{display:none}
}