/* Site House95 v2 — peças do portfólio: capa em movimento, grade, tela cheia e marcas. */

/* ===== capa com trabalhos passando ao fundo ===== */
.deriva{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%);
          mask:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%)}
.deriva .q{position:absolute;top:0;left:var(--x);width:var(--w);aspect-ratio:9/16;border-radius:14px;overflow:hidden;opacity:var(--o);background:#161615;
  box-shadow:0 0 0 1px rgba(245,243,239,.08);
  animation:deriva var(--t) linear infinite;animation-delay:var(--dl);will-change:transform}
.deriva .q.h{aspect-ratio:16/9;width:calc(var(--w) * 1.7)}
.deriva video{width:100%;height:100%;object-fit:cover}
@keyframes deriva{from{transform:translate3d(0,100svh,0)}to{transform:translate3d(0,-100%,0)}}
.capa.parado .deriva .q{animation-play-state:paused}
/* véu para proteger a leitura do título */
.capa::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(75% 65% at 12% 88%,rgba(15,15,14,.94) 0%,rgba(15,15,14,.55) 55%,rgba(15,15,14,0) 100%),
             linear-gradient(to top,rgba(15,15,14,.85),rgba(15,15,14,0) 40%)}
.capa>.wrap{z-index:2}

/* ===== carrossel da House (complementa base.css) ===== */
.cv .som{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--creme);color:var(--chumbo);
  font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;transition:transform .35s var(--ease),opacity .3s}
.cv .som:hover{transform:translateX(-50%) translateY(-2px)}
.cv .som svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv:not([data-d="0"]) .som,.cv.com-som .som{opacity:0;pointer-events:none}

/* ===== todos os trabalhos ===== */
.trab{display:block;padding-block:clamp(96px,14vh,140px)}
.trab .topo{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,4vh,40px)}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(245,243,239,.22);font-size:14px;font-weight:600;font-stretch:110%;
  transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.chip:hover{border-color:var(--creme);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--creme);color:var(--chumbo);border-color:var(--creme)}
.chip small{font-size:12px;opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.grade{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px clamp(12px,1.3vw,18px);margin-top:clamp(28px,5vh,48px)}
.item{display:block;width:100%;text-align:left}
.item .f{position:relative;display:block;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(245,243,239,.08);transition:transform .45s var(--ease)}
.item img,.item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.item img{transition:transform .7s var(--ease)}
.item video{opacity:0;transition:opacity .35s}
.item.vivo video{opacity:1}
.item:hover .f{transform:translateY(-2px)}
.item:hover img{transform:scale(1.03)}
.item .bt{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(245,243,239,.92);color:var(--chumbo);display:grid;place-items:center;transition:transform .35s var(--ease)}
.item:hover .bt{transform:scale(1.08)}
.item .bt svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.item .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;font-size:14px}
.item .meta b{font-weight:600;font-stretch:110%}
.item .meta span{opacity:.5;font-variant-numeric:tabular-nums;font-size:13px}
.item[hidden]{display:none}

/* ===== tela cheia do vídeo ===== */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(10,10,9,.97);color:var(--creme)}
.lb::backdrop{background:#000}
.lb .box{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:18px var(--gut) 22px}
.lb .lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb .lb-top b{font-size:clamp(18px,1.6vw,24px);font-weight:700;font-stretch:112%;letter-spacing:-.02em}
.lb .lb-top span{font-size:13px;opacity:.55;margin-left:12px;font-variant-numeric:tabular-nums}
.lb .tela{min-height:0;display:grid;place-items:center}
/* altura máxima do vídeo: ~75% da janela no computador, sempre com folga para o topo e as setas */
.lb{--hv:min(75svh,calc(100svh - 200px));--hh:calc(100svh - 200px)}
.lb video{display:block;height:auto;max-width:100%;border-radius:18px;background:#000;object-fit:contain}
.lb video.v{aspect-ratio:9/16;width:min(100%,calc(var(--hv) * 9 / 16))}
.lb video.h{aspect-ratio:16/9;width:min(100%,1280px,calc(var(--hh) * 16 / 9))}
.lb .lb-nav{display:flex;justify-content:center;gap:10px}

/* ===== marcas ===== */
.marcas{display:block;padding-block:clamp(96px,14vh,140px)}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(32px,6vh,56px)}
.marca{position:relative;display:block;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#1b1b1a;box-shadow:0 0 0 1px rgba(245,243,239,.08);transition:transform .45s var(--ease)}
.marca img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.92) brightness(.9);opacity:.8;transition:filter .45s,opacity .45s,transform .7s var(--ease)}
a.marca:hover,a.marca:focus-visible{transform:translateY(-2px)}
.marca:hover img,.marca:focus-visible img{filter:none;opacity:1;transform:scale(1.03)}
.marca .qt{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(15,15,14,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:12px;font-weight:600;font-stretch:110%;color:var(--creme)}
.marcas .sub{margin-top:clamp(48px,8vh,80px);display:flex;flex-direction:column;gap:18px}
.marcas .sub h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;font-stretch:112%;letter-spacing:-.025em}
.logos.menor{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
@media (hover:none){.marca img{filter:none;opacity:1}}

/* ===== responsivo ===== */
@media (max-width:1180px){.grade{grid-template-columns:repeat(4,minmax(0,1fr))}.logos{grid-template-columns:repeat(4,minmax(0,1fr))}.logos.menor{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .logos,.logos.menor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .item .bt{width:34px;height:34px;right:10px;bottom:10px}
  .filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .filtros::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .lb video{border-radius:12px}
  .lb{--hv:calc(100svh - 190px);--hh:calc(100svh - 190px)}
  .lb .box{padding:14px 16px 18px}
}
@media (prefers-reduced-motion:reduce){
  .deriva .q{animation:none;transform:translate3d(0,var(--y0,30vh),0)}
}
.ficha h3{font-size:clamp(22px,2.2vw,32px);font-weight:700;font-stretch:112%;letter-spacing:-.03em;line-height:1.15}
.capa .lead{max-width:36ch}

/* ===== Home: seleção de trabalhos (uma linha) ===== */
.grade.linha{grid-template-columns:repeat(5,minmax(0,1fr))}
.marcas-home{margin-top:clamp(64px,11vh,112px)}
.marcas-home .logos{margin-top:22px}
@media (max-width:1180px){.grade.linha{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:860px){
  .grade.linha{grid-template-columns:repeat(5,minmax(58vw,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .grade.linha::-webkit-scrollbar{display:none}
  .grade.linha .item{scroll-snap-align:start}
}