/* ---------- Como a obra anda: one building, four materials ----------
   Without JS (or with reduced motion) the list is open and the building is shown finished. */
.fo{position:relative;background:#1b1f23}
.fo-live .fo{height:460vh}
.fo-scene{position:relative;min-height:100vh;overflow:hidden;background:var(--fo-bg,#1b1f23);transition:background-color .9s}
.fo-live .fo-scene{position:sticky;top:0;height:100vh;min-height:640px}
/* the light of the whole scene follows the material: grey for the sketch, night blue for the plan,
   dusk for the site, warm for the finished building */
.fo-scene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--fo-grid,0);transition:opacity .9s;
  background-image:linear-gradient(#9cc4ff12 1px,transparent 1px),linear-gradient(90deg,#9cc4ff12 1px,transparent 1px),linear-gradient(#9cc4ff22 1px,transparent 1px),linear-gradient(90deg,#9cc4ff22 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;-webkit-mask-image:radial-gradient(70% 80% at 68% 50%,#000,transparent);mask-image:radial-gradient(70% 80% at 68% 50%,#000,transparent)}
.fo-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 50% at 68% 58%,#e2ae6230,transparent 70%);opacity:var(--fo-warm,1);transition:opacity .9s}
/* the name of the material, huge and hollow, behind the building */
.fc .fo-word{position:absolute;right:-1vw;bottom:-3vh;z-index:0;margin:0;font:600 clamp(120px,15vw,240px)/.8 var(--fc-display);font-stretch:112%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #ffffff22;white-space:nowrap;pointer-events:none}
.fo-grid{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:96px var(--fc-gutter,clamp(20px,6vw,104px)) 32px;max-width:1440px;margin:0 auto}
.fo-live .fo-grid{height:100%}
.fo-copy{align-self:center}
.fc .fo h2{margin:0 0 18px;font-size:clamp(42px,4.6vw,68px);line-height:1}
.fc .fo-lede{margin:0 0 40px;max-width:30em;font:400 19px/1.55 var(--fc-text);color:#B9C0C5}
.fo-steps{list-style:none;margin:0;padding:0}
.fo-step{position:relative;padding:0 0 20px 34px}
.fo-step>*{transition:opacity .4s}
.fo-live .fo-step>*{opacity:.42}.fo-live .fo-step.past>*{opacity:.66}.fo-live .fo-step.on>*{opacity:1}
.fo-step::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;border:2px solid var(--fc-luz);background:var(--fc-luz);z-index:2;box-sizing:border-box;transition:background .3s,border-color .3s}
.fo-step:not(:last-child)::after{content:"";position:absolute;left:4px;top:15px;bottom:-15px;width:2px;background:var(--fc-luz);transition:background .4s}
.fo-live .fo-step::before{border-color:var(--fc-andar);background:var(--fc-grafite)}
.fo-live .fo-step:not(:last-child)::after{background:var(--fc-chumbo)}
.fo-live .fo-step.past::before{border-color:var(--fc-luz)}.fo-live .fo-step.past::after{background:var(--fc-luz)}
.fo-live .fo-step.on::before{background:var(--fc-luz);border-color:var(--fc-luz);box-shadow:0 0 0 6px #e2ae6226}
.fc .fo-mat{font:500 13px/1 var(--fc-ui);color:var(--fc-luz);margin:0 0 8px}
.fo-live .fo-mat{color:var(--fc-concreto)}.fo-live .fo-step.on .fo-mat{color:var(--fc-luz)}
.fc .fo-step h3{margin:0;font-size:clamp(22px,2vw,30px)}
.fo-more{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s}
.fo-live .fo-more{grid-template-rows:0fr}.fo-live .fo-step.on .fo-more{grid-template-rows:1fr}
.fo-more>div{overflow:hidden}
.fc .fo-more p{margin:12px 0 4px;max-width:30em;font:400 17px/1.55 var(--fc-text);color:#B9C0C5}
.fo-foot{margin-top:24px}

/* the building: one silhouette, four materials stacked and revealed from the bottom up */
.fo-stage{position:relative;display:flex;align-items:center;justify-content:center}
.fo-bld{position:relative;width:min(100%,600px,calc((100vh - 170px) * 1.124))}
.fo-bld>picture,.fo-layer>picture{display:contents}
.fo-bld .fo-size{display:block;width:100%;visibility:hidden}
.fo-layer{position:absolute;inset:0;clip-path:var(--fo-clip);-webkit-mask-image:linear-gradient(0deg,#000 var(--w,0%),transparent calc(var(--w,0%) + .3%));mask-image:linear-gradient(0deg,#000 var(--w,0%),transparent calc(var(--w,0%) + .3%))}
.fo-l4{--w:100%}
.fo-layer img{display:block;width:100%}
.fo-l1 img{filter:url(#fo-chalk)}
.fo-l2 img{filter:url(#fo-plan)}
.fo-l3 img{filter:grayscale(.45) brightness(.72) contrast(1.06)}
.fo-l4 img{filter:saturate(.85) brightness(1.05)}
.fo-l4::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(26% 9% at 38% 44%,#e2ae6255,transparent),radial-gradient(26% 9% at 64% 44%,#e2ae6248,transparent),radial-gradient(30% 10% at 40% 70%,#e2ae6250,transparent),radial-gradient(28% 10% at 68% 71%,#e2ae6240,transparent)}
.fo-ground{position:absolute;left:-12%;right:-12%;bottom:-4%;height:12%;background:radial-gradient(closest-side,#0008,transparent);filter:blur(10px);z-index:-1}
/* the line of light that prints the next material */
.fo-scan{position:absolute;left:0;right:0;height:2px;bottom:var(--fo-sw,0%);opacity:var(--fo-so,0);z-index:8;background:linear-gradient(90deg,transparent,#fff6e4 12%,#fff6e4 88%,transparent);box-shadow:0 0 22px 5px #e2ae6299}
.fo-scaff{position:absolute;inset:0;z-index:6;opacity:var(--fo-sf,0);clip-path:var(--fo-clip);pointer-events:none}
.fo-scaff svg{width:100%;height:100%}
.fo-scaff path{stroke:#E2AE62;stroke-width:1;opacity:.7;fill:none;vector-effect:non-scaling-stroke}
/* notes on the drawing: a dot on the building, a hairline, the label */
.fo-tag{position:absolute;z-index:9;display:flex;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .55s;font:500 13px/1.2 var(--fc-ui);white-space:nowrap}
.fo-tag.show{opacity:1;transform:none}
.fo-tag i{display:block;width:var(--len,64px);height:1px;background:currentColor;opacity:.7}
.fo-tag em{font-style:normal;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.fo-tag b{font-weight:500;padding:7px 11px;border-radius:99px;border:1px solid currentColor}
.fo-tag.r{flex-direction:row-reverse}
.fo-t1{color:#eef1f2}.fo-t1 b{background:#22272cdd}
.fo-t2{color:#a9cdf5}.fo-t2 b{background:#0d1d30dd}
.fo-t3,.fo-t4{color:var(--fc-luz)}.fo-t3 b,.fo-t4 b{background:#1D2125e6;color:var(--fc-prata)}

/* Sobre: the real portrait replaces the cloud placeholder */
.fc-portrait--photo{background:#000}
.fc-portrait--photo::before{content:none}
.fc-portrait--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

@media (max-width:760px){
  .fo-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:80px 20px 18px}
  .fo-stage{order:-1}.fo-bld{width:min(70%,260px)}
  .fc .fo h2{font-size:32px;margin-bottom:8px}
  .fo-live .fo-lede,.fo-live .fo-foot{display:none}
  .fo-step{padding-bottom:10px}.fc .fo-more p{font-size:15px}
  .fc .fo-word{font-size:96px}
  /* on a phone the notes sit on the edge of the building instead of hanging outside it */
  .fo-tag{font-size:10px;left:auto!important;right:auto!important}
  .fo-tag i,.fo-tag em{display:none}
  .fo-tag:not(.r){right:-4%!important}
  .fo-tag.r{left:-4%!important}
}
@media (prefers-reduced-motion:reduce){
  .fo-scene,.fo-scene::before,.fo-scene::after,.fo-tag,.fo-step>*,.fo-more{transition:none}
}