/* ==========================================================================
   03 Recent work (dono: FOTOS). Marquee de projetos em duas fileiras, sentidos opostos.
   Referencia: TopLine Pro, _clones/topline-pro/site/styles.css (.projects, .marquee, .marquee__track, .project-tile).
   Sem JS ou em movimento reduzido: cada fileira vira uma faixa que se arrasta com o dedo (overflow-x). Com JS (base.js poe .js
   no <html>) o s-work.js poe .is-run e a faixa corre sozinha, acelera com a rolagem e pausa no hover.
   ========================================================================== */
.work{
  --th:clamp(190px,21vw,310px);          /* altura das fileiras; a largura de cada foto vem do --ar */
  --gap:clamp(10px,1.1vw,16px);
  padding-bottom:calc(var(--sec-y) * .72);
  overflow:clip;
}
.work__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:clamp(30px,4.4vw,64px) }
.work__head .kick{ margin-bottom:16px }
.work__head .h2{ max-width:16ch }
.work__head .lead{ margin:18px auto 0; max-width:46ch; text-wrap:balance }

.work__rows{ display:grid; gap:var(--gap) }
.work__row{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.work__row::-webkit-scrollbar{ display:none }
.work__track{ display:flex; width:max-content; padding-inline:var(--gutter) 0; will-change:transform }
.work__rows.is-run .work__row{ overflow:hidden }
.work__rows.is-run .work__track{ padding-inline:0 }

.work__tile{
  position:relative; flex:none; height:var(--th); aspect-ratio:var(--ar,.75); margin:0 var(--gap) 0 0;
  border-radius:var(--r-lg); overflow:hidden; background:var(--pedra);
}
.work__tile>img,.work__tile>noscript>img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out) }
/* sem JS: o <noscript> traz a foto de verdade e a imagem de espera (GIF de 1px) some */
html:not(.js) .work__tile>img{ display:none }
html:not(.js) .work__tile>noscript{ display:block; height:100% }
.work__tile::after{ /* veu de leitura da legenda, so no hover */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease-out);
  background:linear-gradient(0deg,rgba(28,28,27,.84) 0%,rgba(28,28,27,.34) 34%,rgba(28,28,27,0) 58%);
}
.work__tile figcaption{
  position:absolute; z-index:1; left:0; right:0; bottom:0; display:grid; gap:2px; padding:0 20px 18px; color:#fff;
  opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.work__tile figcaption b{ font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1.2 }
.work__tile figcaption span{ font-size:13.5px; color:var(--pedra) }
.work__tile .pend{ border-bottom-color:rgba(221,219,212,.6) }
@media (hover:hover){
  .work__tile:hover>img{ transform:scale(1.06) }
  .work__tile:hover::after,.work__tile:hover figcaption{ opacity:1; transform:none }
  .work__tile:hover::after{ transform:none }
}

.work__foot{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 32px; margin-top:clamp(24px,3vw,40px) }
.work__pause{
  display:none; align-items:center; gap:10px; min-height:44px; padding:0 20px 0 16px; border:1px solid var(--rejunte); border-radius:var(--r-pill);
  background:transparent; font-size:14.5px; font-weight:600; transition:background-color .25s, border-color .25s;
}
.work__pause:hover{ background:#fff; border-color:var(--grafite) }
.work__pause .i{ width:18px; height:18px }
.work__ic-play{ display:none }
.work__pause[aria-pressed="true"] .work__ic-play{ display:block }
.work__pause[aria-pressed="true"] .work__ic-pause{ display:none }
.work__rows.is-run ~ .work__foot .work__pause{ display:inline-flex }

@media (max-width:760px){
  .work{ --th:190px }
  .work__head .h2{ max-width:12ch }
  .work__tile figcaption{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .work__rows.is-run .work__row{ overflow-x:auto }
  .work__track{ transform:none !important }
}