/* Project page: the information column stays on screen while the images scroll.
   Ferman colours and type; prefixed fct- (tabs in trabalho.js, shared effects in trabalhos-fx.js). */

body.fct-body{background:var(--fc-grafite)}
.fct{color:var(--fc-nevoa);background:var(--fc-grafite)}
.fct-grid{display:grid;grid-template-columns:30vw 1fr;column-gap:5vw;padding:0 2.5vw}

/* ---------- the information column ---------- */
.fct-info{position:sticky;top:0;align-self:start;height:100vh;padding-top:135px}
.fct-info__inner{display:flex;flex-direction:column}
.fct-back{align-self:flex-start;margin-bottom:16px;color:var(--fc-nevoa);text-decoration:none}
.fct-rule{display:block;height:1px;background:#D6D9DA33;transform-origin:0 50%;animation:fct-rule 1.1s cubic-bezier(.6,0,.2,1) .15s both}
@keyframes fct-rule{from{transform:scaleX(0)}}
.fct h1{margin:36px 0 16px;font:500 clamp(28px,2.4vw,36px)/1 var(--fc-display);font-stretch:106%;letter-spacing:-.04em;color:var(--fc-prata)}
.fct-lede{margin:0;max-width:21em;font:400 16px/1.3 var(--fc-text);color:#D6D9DA99}
/* the trade this piece was made for; the name links to that trade's own examples */
.fct-info .fct-ramo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:26px 0 0;font:400 13px/1.3 var(--fc-ui)}
.fct-ramo span{color:#D6D9DA73}
.fct-ramo a{color:var(--fc-prata);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:opacity .3s}
.fct-ramo a:hover{opacity:.65}
.fct-ramo a:focus-visible{outline:2px solid var(--fc-luz);outline-offset:4px;border-radius:2px}
.fct-services{list-style:none;margin:36px 0 0;padding:0;font:400 14px/1.2 var(--fc-ui);color:var(--fc-nevoa)}
.fct-tabs{display:flex;flex-wrap:wrap;gap:8px 30px;margin:44px 0 16px}
.fct-tab{all:unset;cursor:pointer;padding-bottom:8px;font:500 13px/1.2 var(--fc-ui);letter-spacing:-.01em;color:var(--fc-nevoa);opacity:.4;transition:opacity .3s}
.fct-tab:hover,.fct-tab[aria-selected="true"]{opacity:1}
.fct-tab{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:opacity .3s,background-size .4s cubic-bezier(.6,0,.2,1)}
.fct-tab[aria-selected="true"]{background-size:100% 1px}
.fct-tab:focus-visible{outline:2px solid var(--fc-luz);outline-offset:4px;border-radius:2px}
/* the panes share one grid cell and cross-fade, so the column never jumps in height */
.fct-panes{display:grid;max-width:37em}
.fct-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.fct-pane.is-on{opacity:1;visibility:visible}
.fct-pane p,.fct-pane li{margin:0;font:400 16px/1.25 var(--fc-text);color:var(--fc-nevoa)}
.fct-pane ul{list-style:none;margin:0;padding:0}
.fct-info .fcw-link{margin-top:48px}
.fct-credit{margin:18px 0 0;font:400 12px/1.4 var(--fc-ui);color:#D6D9DA80}
.fct-nav{position:absolute;left:0;right:0;bottom:56px;display:flex;justify-content:space-between;padding-top:22px;border-top:1px solid #D6D9DA33}

/* links that roll their letters up on hover: back, previous, next */
.fct-roll{position:relative;display:inline-flex;overflow:hidden;font:500 13px/1.15 var(--fc-ui);letter-spacing:-.01em;color:var(--fc-nevoa);text-decoration:none}
.fct-roll__layer{display:inline-block;white-space:pre}
.fct-roll__layer+.fct-roll__layer{position:absolute;left:0;top:0}
.fct-roll .fcw-ch{transition:transform .45s cubic-bezier(.6,0,.2,1),opacity .45s,filter .45s;transition-delay:calc(var(--i,0) * 18ms)}
.fct-roll__layer+.fct-roll__layer .fcw-ch{transform:translateY(105%);opacity:0;filter:blur(3px)}
.fct-roll:hover .fct-roll__layer:first-child .fcw-ch,.fct-roll:focus-visible .fct-roll__layer:first-child .fcw-ch{transform:translateY(-105%);opacity:0;filter:blur(3px)}
.fct-roll:hover .fct-roll__layer+.fct-roll__layer .fcw-ch,.fct-roll:focus-visible .fct-roll__layer+.fct-roll__layer .fcw-ch{transform:none;opacity:1;filter:none}
.fct-roll:focus-visible{outline:2px solid var(--fc-luz);outline-offset:4px}

/* ---------- the images ---------- */
.fct-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:135px 0 140px}
.fct-shot{grid-column:1/-1;margin:0}
.fct-shot--half{grid-column:auto}
.fct-shot img{display:block;width:100%;height:auto;border-radius:8px;background:#262B30}
.fct-shot{opacity:0;transform:translateY(60px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.fct-shot.is-in{opacity:1;transform:none}

/* ---------- closing band, in the Ferman voice ---------- */
.fct-close{padding:clamp(80px,10vw,150px) 2.5vw;border-top:1px solid #D6D9DA1f;color:var(--fc-prata)}
.fct-close h2{margin:0 0 32px;max-width:14ch;font:500 clamp(36px,4.2vw,64px)/1 var(--fc-display);font-stretch:110%;letter-spacing:-.04em}

@media (max-width:1023px){
  .fct-grid{grid-template-columns:1fr;padding:0 24px}
  .fct-info{position:relative;height:auto;padding:120px 0 40px}
  .fct-nav{position:static;margin-top:40px}
  .fct-gallery{padding:24px 0 96px;gap:14px}
}
@media (max-width:600px){
  .fct-gallery{grid-template-columns:1fr}
  .fct-shot--half{grid-column:1/-1}
}
.fct-frozen .fct-shot,.fct-frozen .fct-rule{opacity:1;transform:none;transition:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .fct-shot{opacity:1;transform:none;transition:none}
  .fct-rule{animation:none}
  .fct-roll .fcw-ch,.fct-pane{transition:none}
}

/* Dedo: a área de toque cresce, o desenho não. As abas tinham 24px de altura e os "Anterior / Próximo" 15px,
   abaixo do mínimo de 24 da norma. A borda transparente fica FORA da caixa de recorte do overflow, então o
   texto que rola não aparece a mais; a margem negativa devolve o espaço, e nada se move na página. Só no toque. */
@media (pointer:coarse){
  .fct-tabs button{border-block:4px solid transparent;margin-block:-4px}
  .fct-roll{border-block:14px solid transparent;margin-block:-14px}
}