/* Soluções: the building opens floor by floor as the reader scrolls (driven by andares.js).
   Every class is prefixed fca- so nothing here touches the opening's .scene or the rest of surreal.css. */

.fca{position:relative;background:var(--fc-grafite)}
.cinema + .fca{z-index:2}
.fca-live .fca-track{height:420vh}
.fca-scene{position:relative;height:100vh;min-height:600px;overflow:hidden;
  background:radial-gradient(38% 46% at 70% 52%,#e2ae6210,transparent 70%),linear-gradient(#171a1e,var(--fc-grafite) 50%,#22272b)}
.fca-live .fca-scene{position:sticky;top:0}
.fca-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;
  padding:96px var(--fc-gutter) 24px;max-width:var(--fc-max);margin:0 auto}
.fca-copy{align-self:center;position:relative;z-index:3}
.fca h2{font-size:clamp(40px,4.4vw,64px);max-width:14ch;margin:0 0 44px}

/* ---------- the three services ---------- */
.fca-floors{list-style:none;margin:0;padding:0}
/* Rail and dots share one centre line (x = 5px). Each floor draws the stretch from its own dot to the next one,
   gold once the reader has moved past it, so the gold always stops exactly on the floor being read. */
.fca-floor{padding:0 0 22px 32px;position:relative}
.fca-floor:not(:last-child)::after{content:"";position:absolute;left:4px;top:14px;bottom:-14px;width:2px;background:var(--fc-chumbo);z-index:1;transition:background .4s}
.fca-floor.is-past::after{background:var(--fc-luz)}
.fca-floor::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--fc-grafite);border:2px solid var(--fc-luz);z-index:2;transition:background .3s,box-shadow .3s}
.fca .fca-level{font:500 13px/1 var(--fc-ui);color:var(--fc-concreto);margin:0 0 8px;transition:color .3s}
.fca h3{font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.015em}
.fca-go{all:unset;cursor:pointer;color:inherit}
.fca-go:hover{color:#fff}
.fca-go:focus-visible{outline:2px solid var(--fc-luz);outline-offset:4px;border-radius:2px}
.fca-more{display:grid;grid-template-rows:1fr}
.fca-more>div{overflow:hidden}
.fca .fca-more p{font-size:18px;line-height:1.62;color:var(--fc-muted);margin:14px 0;max-width:44ch}
.fca-more .fc-link{padding-top:4px;margin-bottom:4px}
/* with the scroll scene running, only the floor being read is open */
.fca-scroll .fca-floor>*{opacity:.42;transition:opacity .4s}
.fca-scroll .fca-floor::before{border-color:var(--fc-andar)}
.fca-scroll .fca-floor.is-past>*{opacity:.66}
.fca-scroll .fca-floor.is-past::before{border-color:var(--fc-luz)}
.fca-scroll .fca-floor.is-on>*{opacity:1}
.fca-scroll .fca-floor.is-on::before{background:var(--fc-luz);border-color:var(--fc-luz);box-shadow:0 0 0 6px #e2ae6226}
.fca-scroll .fca-floor.is-on .fca-level{color:var(--fc-luz)}
.fca-scroll .fca-more{grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.fca-scroll .fca-floor.is-on .fca-more{grid-template-rows:1fr}
.fca-scroll .fca-more>div>*{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s}
.fca-scroll .fca-floor.is-on .fca-more>div>*{opacity:1;transform:none;transition-delay:.12s}
.fca-scroll .fca-floor.is-on .fca-more>div>a{transition-delay:.2s}
.fca-frozen *{transition:none!important}

/* ---------- the building ---------- */
.fca-stage{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
/* sized so the whole stack, floors apart, fits between the fixed header and the bottom of the screen */
.fca-bld{position:relative;width:min(100%,620px,calc((100vh - 390px) * 1.124))}
.fca-bld>picture{display:contents}
.fca-bld .fca-size{display:block;width:100%;height:auto;visibility:hidden}
.fca-slab{position:absolute;inset:0}
/* the street-level trees fade into the dark instead of ending on a hard photo edge */
.fca-slab.is-base{-webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%)}
.fca-cut{position:absolute;inset:0;clip-path:var(--clip)}
.fca-cut img{display:block;width:100%;height:auto;max-width:none}
.fca-dim img{filter:brightness(.4) saturate(.3) contrast(1.06)}
.fca-on img{filter:brightness(1.04) saturate(.8) contrast(1.05)}
/* the lights come on across the floor, window by window */
.fca-on{opacity:var(--lo,0);-webkit-mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%));mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%))}
.fca-glow{position:absolute;inset:0;clip-path:var(--clip);mix-blend-mode:screen;opacity:var(--lo,0);
  -webkit-mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%));mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%));
  background:radial-gradient(30% 10% at 34% var(--gy),#e2ae6266,transparent),radial-gradient(30% 10% at 67% var(--gy),#e2ae6255,transparent)}
/* lit windows spill a little light past their frames */
.fca-bloom{position:absolute;inset:0;filter:blur(14px) brightness(1.3) saturate(1.25);mix-blend-mode:screen;opacity:calc(var(--lo,0)*.18);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%));mask-image:linear-gradient(90deg,#000 var(--ma,100%),transparent var(--mb,100%))}
/* Floors above eye level show their underside as they lift: the slab recedes, its front edge catches the light
   and a row of downlights glows along its back edge. */
.fca-under{position:absolute;clip-path:polygon(0 0,100% 0,96.5% 100%,3.5% 100%);background:linear-gradient(#5a5047,#2c2622 55%,#1c1916)}
.fca-under::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#f3e1c6d9 12%,#f3e1c6d9 88%,transparent)}
.fca-under::after{content:"";position:absolute;left:8%;right:8%;bottom:16%;height:5px;background:radial-gradient(closest-side,#fff0d2,#ffe2b000) 0 0/var(--dl,48px) 100% repeat-x;opacity:var(--lo,0)}
/* where the downlights land: a warm pool along the top of the floor below */
.fca-pool{position:absolute;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(50% 100% at 50% 0,#ffc97a4d,#ffc97a00 100%)}
/* the roof of the base, seen from above as the floor over it lifts off */
.fca-face{position:absolute;background:linear-gradient(#b9ab99,#8d8274 55%,#5f574e);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);transform:translateY(-100%)}
.fca-face::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,#0000001a 22px 23px)}
/* one line for each service, set in the gap its floor opens; the closing line sits under the finished building */
.fca .fca-phrase{position:absolute;left:6%;right:6%;margin:0;z-index:4;text-align:center;pointer-events:none;max-width:none;
  font:500 clamp(17px,1.45vw,21px)/1.2 var(--fc-display);font-stretch:108%;letter-spacing:-.01em;color:var(--fc-prata);text-wrap:balance;opacity:0}
.fca .fca-phrase.is-closing{font-size:clamp(20px,1.9vw,28px);font-stretch:114%}

/* ---------- phone ---------- */
@media (max-width:700px){
  .fca-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:0;padding:0 20px}
  .fca-stage{order:-1;align-items:flex-end;padding-top:84px}
  .fca-bld{width:min(66%,250px,calc((100svh - 560px) * 1.124))}
  .fca-copy{align-self:start;margin:0 -20px;padding:22px 20px 24px;background:linear-gradient(transparent,var(--fc-grafite) 22px)}
  .fca-scroll h2{display:none}
  .fca-floor{padding-bottom:12px}
  .fca .fca-more p{font-size:16px;margin:10px 0}
  .fca .fca-phrase{left:-14%;right:-14%;font-size:13px}
  .fca .fca-phrase.is-closing{font-size:16px}
}

/* without the scroll scene (no JavaScript, or reduced motion) the section is a normal block:
   all three services open and the building shown whole */
.fca:not(.fca-scroll) .fca-scene{height:auto;min-height:0;padding:clamp(80px,9vw,140px) 0}
.fca:not(.fca-scroll) .fca-grid{height:auto;padding-top:0}
.fca:not(.fca-ready) .fca-size{visibility:visible;filter:brightness(.85) saturate(.75);-webkit-mask-image:linear-gradient(#000 86%,transparent 99%);mask-image:linear-gradient(#000 86%,transparent 99%)}
@media (max-width:700px){.fca:not(.fca-scroll) .fca-stage{padding-top:0;margin-bottom:24px}}