/* Ferman Coder: the pieces that show the work is real. The floating WhatsApp button (every page),
   the entrance grid that opens the works, and the numbers with the count-up in "sobre".
   Colours and type come from surreal.css (--fc-*). */

/* ---------- WhatsApp, always within reach ---------- */
.fc-flutua{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:900;display:block;width:54px;height:54px;border-radius:50%;text-decoration:none;color:var(--fc-prata);transition:opacity .3s ease,transform .3s ease,visibility .3s}
.fc-flutua.is-escondido{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none}
.fc-flutua img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--fc-prata);box-shadow:0 6px 22px #0007;transition:transform .3s ease}
.fc-flutua:hover img{transform:scale(1.06)}
.fc-flutua__ponto{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2px solid var(--fc-prata)}
.fc-flutua__rotulo{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:8px 14px;border-radius:99px;background:var(--fc-grafite);border:1px solid #ffffff38;color:var(--fc-prata);font:500 13px/1.2 var(--fc-ui);white-space:nowrap;box-shadow:0 4px 16px #0005}
.fc-flutua:focus-visible{outline:2px solid var(--fc-luz);outline-offset:4px}

/* ---------- The entrance: the building in the middle, the works around it ---------- */
.fcg{position:relative;z-index:3;height:250vh;background:var(--fc-grafite)}
.fcg__fixo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 60% at 50% 45%,#272d32,var(--fc-grafite) 72%)}
.fcg__fixo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent,#1d2125b3 45%,var(--fc-grafite));pointer-events:none;z-index:4}
.fcg__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:90vw;max-width:1200px;transform:scale(3.5);opacity:.2;will-change:transform,opacity}
.fcg__cela{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#2a3035;box-shadow:inset 0 0 0 1px #ffffff14}
.fcg__cela img,.fcg__cela video{display:block;width:100%;height:100%;object-fit:cover}
.fcg__cela--centro{z-index:3;transform:scale(3);will-change:transform;box-shadow:0 30px 80px #000a}
.fcg__frase{position:absolute;left:50%;top:50%;z-index:5;margin:0;transform:translate(-50%,-50%) translateY(10px);font-family:var(--fc-display);font-stretch:118%;font-weight:500;letter-spacing:-.02em;font-size:clamp(38px,6.5vw,88px);line-height:1;white-space:nowrap;opacity:0;transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.fcg__frase.is-visivel{opacity:1;transform:translate(-50%,-50%)}
.fcg__frase span{display:inline-block;color:#ffffff24;transition:color .4s ease}
.fcg__frase span.is-acesa{color:var(--fc-prata)}
.fcg__frase span.is-acesa:last-child{color:var(--fc-luz)}

/* the centre: two delivered sites inside a browser frame, one after the other. Sizes in cqw so the frame keeps its
   proportions from the phone to the 3x scale; the strip moves in % of its own height, so it holds at any width */
.fcg__cela--site{display:flex;flex-direction:column;container-type:inline-size;background:#f6f4f0}
.fcg__barra{flex:none;display:flex;align-items:center;gap:1.1cqw;height:5cqw;padding:0 2.2cqw;background:#ebe8e3;border-bottom:1px solid #00000014}
.fcg__barra i{width:1.25cqw;height:1.25cqw;border-radius:50%;background:#cdc8c0}
.fcg__barra span{display:flex;align-items:center;justify-content:center;width:44%;height:2.9cqw;margin:0 auto;padding-right:3.6cqw;border-radius:99px;background:#fff}
.fcg__barra svg{width:1.3cqw;height:1.5cqw;fill:none;stroke:#9a948b;stroke-width:1.2}
.fcg__tela{position:relative;flex:1;min-height:0;overflow:hidden}
/* the animation is attached only while the site rolls: even paused, it would make the tall strip a layer of its own,
   redrawn at every step of the 10x zoom at the start of the grid */
.fcg__rolo{animation:none}
.fcg__cela--site.is-rodando .fcg__rolo{animation:fcg-rolar 12.2s linear infinite}
.fcg__rolo{height:200%}
.fcg__trecho{position:relative;height:50%;overflow:hidden}
/* each site holds on screen, then the next one slides up */
@keyframes fcg-rolar{
  0%{transform:translate3d(0,0,0)}
  40.98%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  50%{transform:translate3d(0,-50%,0)}
  90.98%{transform:translate3d(0,-50%,0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  100%{transform:translate3d(0,0,0)}
}
.site-header.is-coberto{opacity:0;pointer-events:none}
.site-header{transition:opacity .3s ease}

/* ---------- "Sobre": three short blocks, then the numbers ---------- */
.fc-about__grid .fc-sobre__lede{font-size:clamp(20px,1.7vw,24px);line-height:1.5;max-width:30ch;margin-top:26px;color:var(--fc-grafite)}
.fc-sobre__blocos{margin:36px 0 0;display:grid;gap:0}
.fc-sobre__blocos div{padding:20px 0;border-top:1px solid #3b434a2e}
.fc-sobre__blocos dt{font:500 13px/1.3 var(--fc-ui);color:#4F575D;margin:0 0 8px}
.fc-sobre__blocos dd{margin:0;font-size:17px;line-height:1.6;max-width:52ch;color:#2D3338}
/* ---------- Numbers in "sobre" ---------- */
.fc-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;margin:32px 0 0;padding:28px 0 0;border-top:1px solid #3b434a33;list-style:none}
.fc-numeros b{display:block;font-family:var(--fc-display);font-stretch:118%;font-weight:500;letter-spacing:-.03em;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--fc-grafite);font-variant-numeric:tabular-nums}
.fc-numeros span{display:block;margin-top:6px;font:400 14px/1.4 var(--fc-ui);color:var(--fc-ink-soft)}

@media (max-width:768px){
  .fcg__grade{width:94vw;gap:6px}
  .fcg__cela{border-radius:7px}
  .fc-numeros{grid-template-columns:1fr 1fr;gap:20px}
  .fc-flutua{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .fcg{height:auto}
  .fcg__fixo{position:relative;height:auto;flex-direction:column;gap:32px;padding:80px var(--fc-gutter)}
  .fcg__fixo::after{display:none}
  .fcg__grade{transform:none;opacity:1}
  .fcg__cela--centro{transform:none}
  .fcg__rolo,.fcg__cela--site.is-rodando .fcg__rolo{animation:none}
  .fcg__frase{position:static;transform:none;opacity:1;transition:none}
  .fcg__frase span{color:var(--fc-prata)}
  .fc-flutua,.fc-flutua img,.site-header{transition:none}
}