/* Janelas acesas: the wall of a building at night. It bleeds off both sides of the screen and sinks into the clouds below. */
.janelas{position:relative;overflow:hidden;background:linear-gradient(180deg,#0e1215,#12171b 40%,#191e22);padding:clamp(70px,8vw,120px) 0 clamp(150px,14vw,210px)}
.jan__ceu{position:absolute;inset:0 0 auto 0;height:60%;background:url('../assets/find-sky.webp') center top/cover no-repeat;filter:brightness(.2) saturate(.6);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none}
.jan__cab{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.jan__cab h2{font-size:clamp(40px,5.6vw,84px);line-height:.98}
.jan__busca{display:flex;align-items:center;gap:10px;flex:0 1 380px;min-height:52px;padding:0 4px 4px;border-bottom:1px solid #ffffff4d;transition:border-color .2s}
.jan__busca:focus-within{border-color:var(--luz)}
.jan__busca svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.jan__busca input{flex:1;min-width:0;border:0;background:none;outline:0;color:#fff;font:400 19px/1.3 var(--text);caret-color:var(--luz)}
.jan__busca input::placeholder{color:#99a2a8}
.jan__busca input::-webkit-search-cancel-button{display:none}
.jan__placa{position:relative;min-height:30px;margin:clamp(14px,2vw,22px) auto clamp(20px,2.6vw,32px);font:400 clamp(16px,1.3vw,19px)/1.45 var(--text);color:#cfd5d9}
.jan__placa b{font:500 1em/1.3 var(--ui);color:#fff;margin-right:8px}
.jan__placa a{color:var(--luz);text-decoration:underline;text-underline-offset:3px}

.jan__predio{position:relative;overflow:hidden;padding:0 clamp(16px,2.6vw,44px);background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,#00000014 0 1px,transparent 1px 22px),#2a2420;box-shadow:inset 0 30px 40px -24px #000,inset 0 -60px 60px -30px #0e1215}
.jan__grade{list-style:none;margin:0 auto;padding:0;max-width:1760px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0 clamp(8px,1.3vw,22px)}
.jan{position:relative;padding:clamp(16px,1.9vw,30px) 0 clamp(10px,1.1vw,16px)}
/* every eight windows, the slab between two floors */
.jan:nth-child(8n+1)::before{content:"";position:absolute;left:-40px;width:200vw;top:0;height:8px;background:linear-gradient(180deg,#463c34,#2f2823);box-shadow:0 2px 0 #0000004d,0 12px 16px -10px #0008}
.jan a{display:block;outline-offset:6px}
.jan__vidro{position:relative;display:grid;place-items:center;aspect-ratio:1.42;overflow:hidden;border-radius:2px;background:linear-gradient(135deg,var(--d),var(--c));box-shadow:0 0 0 2px #090807,0 0 0 4px #4a4037,inset 0 0 18px #0009;filter:brightness(.8) saturate(.92);transition:filter .35s,box-shadow .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.jan__vidro::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff14,transparent 42%)}
.jan__vidro img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top left}
.jan__vidro b{position:relative;z-index:1;font:600 clamp(11px,1.15vw,17px)/1 var(--display);font-stretch:110%;letter-spacing:-.01em;color:#ffffffd9}
.jan__vidro .hv{pointer-events:none}
.jan__nome{display:block;margin-top:9px;font:400 clamp(11.5px,.86vw,13.5px)/1.25 var(--ui);color:#b6a998;transition:color .25s;text-wrap:balance}
/* the ready examples keep a light on, the way a real building at night does */
.jan.is-pronta .jan__vidro{filter:none;box-shadow:0 0 0 2px #090807,0 0 0 4px #5b4e42,0 10px 36px -6px #e2ae6266}
.jan.is-pronta .jan__nome{color:#e7dac8}
.jan.is-atual .jan__nome{color:var(--luz)}
.jan a:hover .jan__vidro,.jan a:focus-visible .jan__vidro,.jan.is-achada .jan__vidro{filter:none;box-shadow:0 0 0 2px #090807,0 0 0 4px var(--luz),0 0 54px 6px #e2ae6277;transform:translateY(-2px)}
.jan a:hover .jan__nome,.jan a:focus-visible .jan__nome,.jan.is-achada .jan__nome{color:#fff}
/* searching turns the rest of the building off */
.is-buscando .jan:not(.is-achada) .jan__vidro{filter:brightness(.16) saturate(.4);box-shadow:0 0 0 2px #090807,0 0 0 4px #3a312a}
.is-buscando .jan:not(.is-achada) .jan__nome{color:#6f675d}
.jan__voo{position:fixed;z-index:80;margin:0;filter:none;box-shadow:none;transform-origin:center;pointer-events:none}
.jan__voo::after{display:none}

@media (max-width:980px){
  .jan__grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jan:nth-child(8n+1)::before{display:none}
  .jan:nth-child(4n+1)::before{content:"";position:absolute;left:-40px;width:200vw;top:0;height:8px;background:linear-gradient(180deg,#463c34,#2f2823);box-shadow:0 2px 0 #0000004d,0 12px 16px -10px #0008;display:block}
}
@media (max-width:560px){
  .jan__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .jan:nth-child(4n+1)::before{display:none}
  .jan:nth-child(2n+1)::before{content:"";position:absolute;left:-40px;width:200vw;top:0;height:7px;background:linear-gradient(180deg,#463c34,#2f2823);display:block}
  .jan__busca{flex:1 1 100%}
  .jan__nome{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.jan__vidro,.jan__nome,.jan__busca{transition: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){
  .jan__ceu{background-image:url('../assets/find-sky-mobile.webp')}
}