/* Projetos: a pinned scene whose columns slide sideways
   while the reader scrolls down, each project rising into place as it arrives. Ferman colours and type.
   Every class is prefixed fcw- (driven by trabalhos.js and trabalhos-fx.js). */

.fcw{position:relative;z-index:2;background:var(--fc-prata);color:var(--fc-chumbo);font-family:var(--fc-text)}
.fcw-pin{position:relative}
.fcw-scene{position:relative;overflow:hidden}
.fcw-track{display:flex;flex-direction:column}
.fcw-col{position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg,var(--fc-nevoa) 0%,#F7F8F8 100%)}
.fcw-line{position:absolute;left:0;top:50%;width:1px;height:100%;background:#3B434A26;transform:translateY(-50%) scaleY(var(--grow,1));transform-origin:50% 0;pointer-events:none}

/* ---------- intro and closing columns ---------- */
.fcw-intro,.fcw-end{display:flex;flex-direction:column;align-items:center;text-align:center}
.fcw .fcw-title{margin:0;font:500 clamp(40px,4.9vw,74px)/.98 var(--fc-display);font-stretch:106%;letter-spacing:-.05em;color:var(--fc-chumbo);max-width:13ch;text-wrap:balance}
.fcw-intro .fcw-link{margin-top:clamp(28px,2.6vw,40px)}
.fcw-end{gap:clamp(28px,2.8vw,40px)}
.fcw .fcw-end h3{margin:0;max-width:17ch;font:500 clamp(24px,2.25vw,34px)/1.08 var(--fc-display);font-stretch:106%;letter-spacing:-.04em;color:var(--fc-chumbo);transition:transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- project cards ---------- */
.fcw-card__inner{width:100%;will-change:transform}
.fcw-card__body{display:flex;flex-direction:column;width:100%}
.fcw-card__media{position:relative;display:block;width:100%;aspect-ratio:670/460;overflow:hidden;border-radius:8px;background:var(--fc-nevoa)}
.fcw-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fcw-card__text{margin-top:clamp(16px,1.5vw,24px);display:flex;flex-direction:column;gap:16px;color:var(--fc-chumbo)}
.fcw .fcw-card__text h3{margin:0;font:500 clamp(24px,2.25vw,34px)/1 var(--fc-display);font-stretch:106%;letter-spacing:-.04em;color:var(--fc-chumbo)}
.fcw-card__row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fcw .fcw-card__row p{margin:0;max-width:20em;font-size:16px;line-height:1.3;color:var(--fc-chumbo)}

/* ---------- the underlined link with a running arrow (shared with the project pages) ---------- */
.fcw-link{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:200px;min-height:36px;
  font:500 13px/1.2 var(--fc-ui);letter-spacing:-.01em;color:inherit;text-decoration:none;cursor:pointer}
/* inline-block, not flex: a flex row would swallow the spaces between words */
.fcw-link__text{display:inline-block;white-space:pre}
.fcw-ch{display:inline-block;transition:transform .3s ease;transition-delay:calc(var(--i,0) * 30ms)}
.fcw-link:hover .fcw-ch,.fcw-link:focus-visible .fcw-ch{transform:translateX(4px)}
.fcw-link__arrow{position:relative;flex:none;width:14px;height:14px;overflow:hidden}
.fcw-link__arrow svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.fcw-link__arrow svg+svg{transform:translateX(-160%)}
.fcw-link:hover .fcw-link__arrow svg:first-child,.fcw-link:focus-visible .fcw-link__arrow svg:first-child{transform:translateX(160%)}
.fcw-link:hover .fcw-link__arrow svg+svg,.fcw-link:focus-visible .fcw-link__arrow svg+svg{transform:none;transition-delay:.14s}
.fcw-link__line{position:absolute;left:0;right:0;bottom:0;height:1px}
.fcw-link__line i{position:absolute;inset:0;background:currentColor;transform-origin:100% 50%;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.fcw-link__line i+i{transform:scaleX(0);transform-origin:0 50%}
.fcw-link:hover .fcw-link__line i:first-child,.fcw-link:focus-visible .fcw-link__line i:first-child{transform:scaleX(0)}
.fcw-link:hover .fcw-link__line i+i,.fcw-link:focus-visible .fcw-link__line i+i{transform:scaleX(1);transition-delay:.25s}
.fcw-link:focus-visible{outline:2px solid var(--fc-luz);outline-offset:6px}
.fcw-word{display:inline-block;white-space:nowrap}

/* ---------- stripes that cover the page between routes (shared) ---------- */
.fcw-stripes{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;pointer-events:none}
.fcw-stripes i{flex:1;background:var(--fc-grafite);transform:scaleY(0);transform-origin:50% 100%}
.fcw-stripes.is-covering i{transform:scaleY(1);transition:transform .5s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 70ms)}
.fcw-stripes.is-cover i{transform:scaleY(1);transform-origin:50% 0}
.fcw-stripes.is-revealing i{transform:scaleY(0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 70ms)}

html.fcw-arriving::after{content:"";position:fixed;inset:0;z-index:2001;background:var(--fc-grafite,#1D2125)}

/* ---------- desktop: the pinned sideways scene ---------- */
@media (min-width:768px){
  .fcw-scroll .fcw-scene{position:sticky;top:0;height:100vh}
  .fcw-track{flex-direction:row;height:100%;will-change:transform}
  .fcw-col{flex:none;width:50vw;height:100vh}
  .fcw-card__inner{padding:0 5vw}
  .fcw-card__body{padding:clamp(48px,4vw,64px) 0}
  .fcw-col--end .fcw-end{padding:0 5vw}
}
/* eleven projects ride the rail now: on wide screens the columns narrow, so more of them fit on
   each screen and the section does not grow longer than it already was */
@media (min-width:1280px){ .fcw-scroll .fcw-col{width:44vw} }
@media (min-width:1600px){ .fcw-scroll .fcw-col{width:38vw} }

/* ---------- phone, and any visit without the scroll scene: one column ---------- */
@media (max-width:767px){
  .fcw-col{width:100%;padding:56px 24px;align-items:stretch}
  .fcw-line{top:auto;bottom:0;left:0;width:100%;height:1px;transform:scaleX(var(--grow,1));transform-origin:0 50%}
  .fcw-col--intro{padding:96px 24px 64px}
  .fcw-col--end{padding:80px 24px 104px}
  .fcw-card__row{flex-direction:column;gap:24px}
  .fcw-card__inner,.fcw-intro,.fcw-end{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .fcw-col.is-in .fcw-card__inner,.fcw-col.is-in .fcw-intro,.fcw-col.is-in .fcw-end{opacity:1;transform:none}
}
@media (min-width:768px){
  .fcw:not(.fcw-scroll) .fcw-track{flex-wrap:wrap;height:auto}
  .fcw:not(.fcw-scroll) .fcw-col{height:auto;min-height:0;padding:96px 0}
}
.fcw:not(.fcw-ready) .fcw-card__inner,.fcw:not(.fcw-ready) .fcw-intro,.fcw:not(.fcw-ready) .fcw-end{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fcw-card__inner,.fcw-intro,.fcw-end{opacity:1!important;transform:none!important;transition:none!important}
  .fcw-ch,.fcw-link__arrow svg,.fcw-link__line i,.fcw-stripes i{transition:none!important}
}