/* Nosso trabalho: The header stays pinned for one screen while the floating
   thumbnails are drawn into the F and fill it; then three threads run down through every project
   (driven by nosso-trabalho.js). Ferman colours and type; prefixed fcn-. */

body.fcn-body{background:#06080B}
/* clip, not hidden: a hidden overflow here would stop the header from sticking */
.fcn{position:relative;color:var(--fc-nevoa);background:#06080B;overflow-x:clip}

/* ---------- pinned header ---------- */
.fcn-head{position:relative;height:200vh}
.fcn-pin{position:sticky;top:0;height:100vh;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fcn-floats{position:absolute;inset:0;z-index:5;pointer-events:none;perspective:900px}
.fcn-ft{position:absolute;left:0;top:0;width:170px;height:114px;border-radius:8px;overflow:hidden;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.fcn-ft img{display:block;width:100%;height:100%;object-fit:cover}
.fcn-center{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-4vh)}
.fcn-logo{position:relative;width:min(288px,40vw);aspect-ratio:578/586;margin-bottom:8px;transform-style:preserve-3d;will-change:transform}
.fcn-part{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transform-origin:50% 50%}
.fcn-outline{fill:none;stroke:#3B434A;stroke-width:1.5;stroke-opacity:.8;stroke-linejoin:round}
/* without the script, the F is simply shown filled */
.fcn-solid{fill:#D6D9DA;opacity:0}
.fcn-fill rect{fill:#D6D9DA}
.fcn-strands path{fill:none;stroke:#3B434A;stroke-width:1.5;stroke-opacity:.7;stroke-linecap:round}
.fcn:not(.fcn-ready) .fcn-part{opacity:1}
.fcn:not(.fcn-ready) .fcn-solid{opacity:1}
.fcn .fcn-title{margin:0 0 24px;font:500 clamp(48px,6.25vw,92px)/.9 var(--fc-display);font-stretch:106%;letter-spacing:-.055em;color:var(--fc-nevoa)}
.fcn-title .fcw-ch{display:inline-block}
/* the title arrives letter by letter out of a blur; the line under it follows */
.fcn-title.is-revealing .fcw-ch{animation:fcn-blur .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 80ms)}
@keyframes fcn-blur{from{opacity:0;filter:blur(10px);transform:translateY(.25em)}}
.fcn-sub.is-revealing{animation:fcn-fade .8s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes fcn-fade{from{opacity:0;transform:translateY(12px)}}
.fcn-sub{margin:0;font:400 16px/1.35 var(--fc-text);color:var(--fc-nevoa)}
.fcn-scroll{position:absolute;left:50%;bottom:56px;z-index:20;width:18px;height:18px;margin-left:-9px;opacity:.5;transition:opacity .4s}
.fcn-scroll svg{display:block;width:100%;height:100%;fill:none;stroke:var(--fc-nevoa);stroke-width:1.2}

/* ---------- threads and sparks: fixed full-screen canvases ---------- */
.fcn-lines,.fcn-sparks{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none}
.fcn-lines{z-index:2}
.fcn-sparks{z-index:3}

/* ---------- the list ---------- */
.fcn-list{position:relative;z-index:10;display:flex;flex-direction:column;gap:72px;padding:72px 0}
.fcn-card{position:relative;width:36%;margin-left:4%;margin-right:auto}
.fcn-card[data-pos="right"]{margin-left:auto;margin-right:4%}
.fcn-card[data-pos="center"]{margin-left:auto;margin-right:auto}
.fcn-card[data-size="small"]{width:29%}
.fcn-card[data-size="large"]{width:41%}
.fcn-card[data-size="xlarge"]{width:46%}
.fcn-js .fcn-card{opacity:0}
.fcn-card__thumb{display:block;margin-bottom:22px;border-radius:4px;overflow:hidden;background:#11151a}
.fcn-card__thumb img{display:block;width:100%;height:auto;aspect-ratio:812/568;object-fit:cover}
.fcn-card__info{display:flex;flex-direction:column;gap:16px}
.fcn .fcn-card h2{margin:0;font:500 clamp(22px,2.25vw,34px)/1 var(--fc-display);font-stretch:106%;letter-spacing:-.04em;color:var(--fc-nevoa)}
/* the trade under the title, so the list can be scanned by kind of business */
.fcn-card__info .fcn-card__ramo{margin:-6px 0 0;font:400 13px/1.2 var(--fc-ui);color:#D6D9DA66}
.fcn-card__row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.fcn .fcn-card__row p{margin:0;max-width:20em;font:400 16px/1.3 var(--fc-text);color:#D6D9DA99}
.fcn-card .fcw-link,.fcn-contact .fcw-link,.fcn-footer .fcw-link{color:var(--fc-nevoa)}

/* ---------- closing ---------- */
.fcn-contact{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:36px;padding:135px 2.5vw}
.fcn .fcn-contact h3{margin:0;max-width:29em;text-align:center;font:500 clamp(22px,2.25vw,34px)/1.12 var(--fc-display);font-stretch:106%;letter-spacing:-.04em;color:var(--fc-nevoa)}
.fcn-plus{position:relative;width:100%;height:12px;margin-top:64px}
.fcn-plus span{position:absolute;left:0;right:0;top:50%;height:1px;background:#2F323B}
.fcn-plus svg{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;stroke:var(--fc-nevoa);stroke-width:1}

/* ---------- footer (this page only) ---------- */
.fcn-footer{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:#06080B;color:var(--fc-nevoa)}
.fcn-footer__fog{position:absolute;inset:0;z-index:0;pointer-events:none}
/* smoke that rises from the bottom and fades out upward, never ending on a hard edge */
.fcn-footer__fog i{position:absolute;left:-20%;right:-20%;bottom:-10%;height:75%;background:url('assets/find-fog.webp') center bottom/cover no-repeat;filter:grayscale(1) brightness(.5);opacity:.26;animation:fcn-fog 38s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.fcn-footer__fog i+i{background-image:url('assets/find-cloud.webp');opacity:.14;height:55%;animation-duration:52s;animation-direction:alternate-reverse}
@keyframes fcn-fog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.fcn-footer__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:135px 2.5vw 24px}
.fcn-footer__top,.fcn-footer__bottom{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px}
.fcn-footer__bottom{margin:auto 0 0;padding-top:72px}
.fcn-footer__label{display:block;margin-bottom:16px;font:500 13px/1.2 var(--fc-ui);letter-spacing:-.01em;color:#D6D9DA80}
.fcn .fcn-footer__big{margin:0;font:500 clamp(42px,5vw,74px)/.95 var(--fc-display);font-stretch:106%;letter-spacing:-.055em;color:var(--fc-nevoa)}
/* the site gives every .fc h2 a 13ch measure; these headings set their own */
.fcn .fcn-footer__big,.fcn .fcn-card h2{max-width:none}
.fcn-footer__side{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.fcn-footer__clock{align-self:flex-end;font:500 13px/1.2 var(--fc-ui);color:#D6D9DA80}
.fcn-footer__actions{display:flex;flex-wrap:wrap;gap:24px}
.fcn-footer__actions .fcw-link{width:auto;min-width:227px}
.fcn-footer__copy{align-self:end;font:500 13px/1.2 var(--fc-ui);color:#D6D9DA80}
.fcn-footer__contacts{display:flex;flex-direction:column}
.fcn-footer__contacts a{font:400 15px/1.5 var(--fc-ui);color:var(--fc-nevoa);text-decoration:none}
.fcn-footer__contacts a:hover{color:var(--fc-luz)}
.fcn-footer__mark{position:relative;z-index:1;width:101%;margin-left:-.5%;mix-blend-mode:difference;pointer-events:none}
.fcn-footer__mark svg{display:block;width:100%;height:auto}
.fcn-footer__mark text{font:600 200px var(--fc-display);font-stretch:112%;letter-spacing:-.06em;fill:none;stroke:#D6D9DA;stroke-width:1;stroke-opacity:.5}

/* ---------- phone ---------- */
@media (max-width:767px){
  .fcn-card,.fcn-card[data-size]{width:86%}
  .fcn-list{gap:56px;padding:56px 0}
  .fcn-card__row{flex-direction:column;gap:18px}
  .fcn-contact{padding:96px 24px}
  .fcn-footer__body{padding:96px 24px 24px}
  .fcn-footer__top,.fcn-footer__bottom{grid-template-columns:1fr;gap:32px}
  .fcn-footer__clock{align-self:flex-start}
  .fcn-ft{width:120px;height:80px}
}
.fcn-frozen *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .fcn-head{height:100vh}
  .fcn-floats{display:none}
  .fcn-footer__fog i{animation:none}
}

/* Abaixo de 800px a cena vem das cópias de 1280px que já existem no projeto. Só muda
   de qual arquivo o pixel vem: posição, tamanho, máscara e filtro continuam os da regra de cima. */
@media (max-width:800px){
  .fcn-footer__fog i{background-image:url('assets/find-fog-mobile.webp')}
  .fcn-footer__fog i+i{background-image:url('assets/find-cloud-mobile.webp')}
}