/* Fachada: one continuous shot. The camera enters a lit window of the building and the room inside is the site. */
.dive{position:relative;background:var(--grafite)}
.stage{position:relative;background:var(--grafite)}
.sky{position:absolute;inset:0;background:url('../assets/find-sky.webp') center/cover no-repeat,#23292e;filter:brightness(.62) saturate(.8)}
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#14181cdd 0%,#14181c66 46%,transparent 70%)}
.hero-copy{position:relative;z-index:3;padding:clamp(120px,15vh,170px) var(--gutter) 40px;max-width:calc(var(--max)*.62)}
.hero-copy h1{font-size:clamp(50px,7vw,112px);line-height:.98}
.lede{margin:clamp(20px,3vh,30px) 0 clamp(24px,4vh,38px);max-width:24em;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:#dfe3e6}
.b{position:relative;z-index:2;width:min(92%,640px);margin:0 auto;transform-origin:0 0}
.b>picture{display:contents}
.b__photo{width:100%;height:auto;clip-path:var(--sil)}
.fog,.near{display:none}
.win{position:relative;z-index:6}
.play{position:relative;z-index:4;padding:60px var(--gutter)}
.slot{position:relative;width:100%;aspect-ratio:1.56}

/* the pinned shot only exists with scripts and motion; otherwise the page reads top to bottom */
.live .dive{height:370vh}
.live .frozen-track .dive{height:100vh}
.live .stage{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden}
.live .hero-copy{position:absolute;left:0;top:0}
.live .b{position:absolute;margin:0;width:min(58vw,calc((100vh - 110px)*1.124));right:auto;left:calc(100vw - min(58vw,calc((100vh - 110px)*1.124)) - 2vw);bottom:-7vh}
.live .fog{display:block;position:absolute;left:-8%;right:-8%;bottom:-6vh;height:34vh;z-index:3;background:url('../assets/find-fog.webp') center/cover no-repeat;filter:grayscale(1) brightness(.72);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 50%);mask-image:linear-gradient(180deg,transparent,#000 50%)}
.live .near{display:block;position:absolute;inset:-20%;z-index:5;pointer-events:none;background:url('../assets/find-cloud.webp') center/cover no-repeat;filter:grayscale(1) brightness(1.05);opacity:0}
.live .win{position:absolute;margin:0;transform-origin:0 0}
/* the out-of-focus copy of the facade, drawn once by sites.js; only its opacity changes during the flight */
.b__desfoque{position:absolute;left:0;top:0;width:100%;height:100%;clip-path:var(--sil);opacity:0;pointer-events:none}
/* the glass in front of the screen: dusk tint and a still reflection in one layer, plus the light that comes on
   first; sites.js changes only their opacity */
.win__vidro{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(112deg,transparent 30%,#fff3e21c 42%,#fff3e208 50%,transparent 58%),#1d16106b}
.win__luz{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 95% at 50% 42%,#ffe4b8,#f0be78 55%,#c98f4c)}
/* the window's own frame: the hairline covers the rounding seam where the site meets the photo, and the glow
   is the light the lit room throws back on the facade. sites.js moves only its opacity, never the shadow */
.win__caixilho{position:absolute;inset:-1px;z-index:3;pointer-events:none;opacity:0;box-shadow:0 0 0 1px #140e09,0 0 46px 12px #e2ae6240}
html.mini .win__vidro,html.mini .win__caixilho,.is-settled .win__caixilho{display:none}
.live .play{position:absolute;inset:0;padding:96px var(--gutter) 28px;display:grid;grid-template-columns:minmax(280px,4fr) minmax(0,8fr);gap:clamp(24px,3.4vw,56px);align-items:center;opacity:0;pointer-events:none;max-width:1500px;margin:0 auto}
.live .play.is-on{pointer-events:auto}
.live .slot{width:min(100%,calc((100vh - 232px)*1.56));aspect-ratio:1.56;margin:0 auto}
.play__screen{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.live .play__screen .ramo-linha,.live .play__screen .exemplo-nota{width:min(100%,calc((100vh - 232px)*1.56));margin-inline:auto}
.is-settled .slot .win{position:absolute;inset:0;width:100%!important;height:100%!important;transform:none!important;left:0!important;top:0!important;box-shadow:0 30px 70px -24px #000c;border-radius:10px;overflow:hidden}

.play__list h2{font-size:clamp(30px,3vw,46px);margin-bottom:12px}
.play__screen,.play__list{min-width:0}
.parte-desc{display:none}
.parts{list-style:none;margin:22px 0 0;padding:0}
.parts li{border-top:1px solid #eef1f226}
.parts li:last-child{border-bottom:1px solid #eef1f226}
.parts button{display:block;width:100%;text-align:left;padding:13px 0 13px 22px;position:relative}
.parts button::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--andar);transition:background .25s,box-shadow .25s}
.parts b{display:block;font:500 15.5px/1.3 var(--ui);color:#cdd2d6;transition:color .2s}
.parts button:hover b{color:#fff}
.parts span{display:grid;grid-template-rows:0fr;font:400 15.5px/1.45 var(--text);color:var(--muted);height:0;overflow:hidden;opacity:0;transition:opacity .3s}
.parts [aria-pressed=true] b{color:#fff}
.parts [aria-pressed=true] span{height:auto;margin-top:5px;opacity:1}
.parts [aria-pressed=true]::before{background:var(--luz);box-shadow:0 0 0 5px #e2ae6226}

/* sinais: each one is drawn as the thing the visitor has actually seen */
.signs{position:relative;z-index:2;background:linear-gradient(180deg,var(--grafite),#2b3136 70%,var(--chumbo));padding:clamp(90px,10vw,150px) 0 clamp(170px,15vw,230px)}
.signs__list{list-style:none;margin:clamp(46px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:5fr 4fr 3fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.sign:nth-child(2){margin-top:70px}
.sign:nth-child(3){margin-top:150px}
.sign p{margin-top:24px;font:500 clamp(20px,1.75vw,25px)/1.2 var(--display);font-stretch:118%;letter-spacing:-.015em;text-wrap:balance}
.art{min-height:170px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.audio{display:flex;align-items:center;gap:11px;align-self:flex-start;width:min(100%,360px);padding:11px 14px;border-radius:14px 14px 14px 3px;background:#ffffff14;color:var(--prata)}
.audio--2{width:min(84%,300px);opacity:.72}
.audio--3{width:min(62%,220px);opacity:.46}
.audio svg{flex:1;height:26px;min-width:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.audio time{font:400 12.5px var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.play-i{width:0;height:0;flex:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--luz)}
.search{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:99px;background:#ffffff14;font:400 14.5px var(--ui)}
.search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.result{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;padding:14px 15px;border-radius:10px;border:1px dashed #ffffff33;font:400 14px var(--ui)}
.result dt{color:var(--muted)}
.result dd{margin:0;color:var(--luz)}
.bio{display:flex;flex-direction:column;align-items:center;gap:7px;width:min(100%,178px);padding:16px 14px;border-radius:20px;border:1px solid #ffffff33;font:400 13px var(--ui)}
.bio__face{width:32px;height:32px;padding:0!important;border-radius:50%!important;background:#ffffff26!important;margin-bottom:3px}
.bio span:not(.bio__face){width:100%;padding:6px;border-radius:99px;background:#ffffff14;text-align:center}

@media (max-width:860px){
  .live .dive{height:330vh}
  .hero-copy{padding-top:96px}
  .hero-copy h1{font-size:clamp(44px,12.4vw,64px)}
  .live .b{width:128vw;left:-14vw;bottom:-9vh}
  .live .play{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;padding:84px 14px 12px;gap:14px;align-content:center}
  .live .slot{width:100%}
  .play__screen{order:-1}
  .play__list h2{font-size:25px;margin-bottom:4px}
  .parts{display:flex;gap:6px;overflow-x:auto;margin:10px -14px 0;padding:0 14px 6px;scrollbar-width:none}
  .parts li,.parts li:last-child{border:0;flex:none}
  .parts button{padding:8px 13px;border:1px solid #ffffff22;border-radius:99px;white-space:nowrap}
  .parts button::before{display:none}
  .parts b{font-size:13px}
  .parts span{display:none}
  .parte-desc{display:block;margin-top:6px;font:400 15.5px/1.42 var(--text);color:var(--muted)}
  .parts [aria-pressed=true]{background:var(--prata)}
  .parts [aria-pressed=true] b,.parts [aria-pressed=true]:hover b{color:#15171c}
  .signs__list{grid-template-columns:1fr;gap:44px}
  .sign:nth-child(2),.sign:nth-child(3){margin-top:0}
  .art{min-height:0}
}
@media (prefers-reduced-motion:reduce){.s-over{animation:none}.parts span,.parts b,.biz button{transition:none}}

html.mini body>*:not(.win){display:none}
html.mini .win.is-mini{position:fixed;inset:0;width:100vw;height:100vh;z-index:9}

/* no celular a cena inteira vem nas cópias de 1280px: a fachada é desenhada com 226px de largura e o zoom
   já entrega o foco ao desfoque muito antes de faltar pixel. São 2,79 MB que viram 597 kB. */
@media (max-width:800px){
  .sky{background-image:url('../assets/find-sky-mobile.webp')}
  .live .fog{background-image:url('../assets/find-fog-mobile.webp')}
  .live .near{background-image:url('../assets/find-cloud-mobile.webp')}
}