/* SSS v2 - camada de movimento e acabamento */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
:root{--ease:cubic-bezier(.16,.84,.24,1);--granite-dim:rgba(216,216,216,.64)}
html{scroll-behavior:smooth}
:focus-visible{outline:1px solid #d8d8d8;outline-offset:4px}
::selection{background:#d8d8d8;color:#000}
.reveal{transition:opacity 1s var(--ease),transform 1.1s var(--ease)!important}
.stagger>*{transition:opacity .9s var(--ease),transform 1s var(--ease)!important}
.stagger.on>*:nth-child(2){transition-delay:.07s!important}.stagger.on>*:nth-child(3){transition-delay:.14s!important}.stagger.on>*:nth-child(4){transition-delay:.21s!important}.stagger.on>*:nth-child(5){transition-delay:.28s!important}.stagger.on>*:nth-child(6){transition-delay:.35s!important}
@media(min-width:761px){.content>header{padding-top:104px!important;padding-bottom:48px!important;box-sizing:border-box}}
/* trilho de secoes */
#v2rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:13px;align-items:flex-end;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
#v2rail.on{opacity:1;pointer-events:auto}
#v2rail a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#d8d8d8;font-size:9px;letter-spacing:.28em;text-transform:uppercase}
#v2rail a span{opacity:0;transform:translateX(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);white-space:nowrap}
#v2rail a i{display:block;width:14px;height:1px;background:rgba(216,216,216,.35);transition:width .45s var(--ease),background .45s}
#v2rail a:hover span,#v2rail a.at span{opacity:.9;transform:none}
#v2rail a.at i{width:34px;background:#d8d8d8}
#v2rail a:hover i{width:24px}
@media(max-width:1500px){#v2rail{display:none}}
nav a.v2at{color:#fff!important}
nav a.v2at::after{content:"";display:block;height:1px;background:#d8d8d8;margin-top:4px;animation:v2ln .5s var(--ease)}
@keyframes v2ln{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* esquemas da ciencia */
.v2fig{display:block;width:100%;height:74px;margin:0 0 16px;overflow:visible}
.v2fig path,.v2fig line,.v2fig polyline{fill:none;stroke:#d8d8d8;stroke-width:1;vector-effect:non-scaling-stroke}
.v2fig .ax{stroke:rgba(216,216,216,.22)}
.v2fig .gh{stroke:rgba(216,216,216,.38);stroke-dasharray:2 4}
.v2fig .dr{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 2.2s var(--ease)}
.v2fig.on .dr{stroke-dashoffset:0}
.v2fig .d2{transition-delay:.5s}
.v2cap{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(216,216,216,.42);margin:22px 0 0}
/* time compacto */
@media(min-width:900px) and (hover:hover){#team .member p:not(.nota-priv){max-height:4.9em;overflow:hidden;transition:max-height .7s var(--ease);}
#team .member p.v2clip{-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
#team .member:hover p:not(.nota-priv),#team .member:focus-within p:not(.nota-priv){max-height:22em;-webkit-mask-image:none;mask-image:none}
#team .member img.photo{transition:filter .6s var(--ease),transform .8s var(--ease)}#team .member:hover img.photo{transform:scale(1.03)}}
/* blog na home */
#blog .cases>a.case.v2more{display:none}
.v2all{display:inline-block;margin-top:34px;border:.5px solid #d8d8d8;color:#d8d8d8;padding:15px 30px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;transition:background .35s,color .35s}
.v2all:hover{background:#d8d8d8;color:#000}
/* formularios */
.v2priv{font-size:11px;line-height:1.7;color:rgba(216,216,216,.5);margin-top:14px}
.v2priv a{color:rgba(216,216,216,.8)}
.v2msg{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;min-height:16px;color:#d8d8d8}
.v2msg.erro{color:#e5aeae}
.v2read{opacity:.7}
/* indice do blog */
.v2filtros{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px}
.v2filtros button{background:none;border:.5px solid rgba(216,216,216,.35);color:#d8d8d8;padding:9px 16px;font:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.v2filtros button.on,.v2filtros button:hover{background:#d8d8d8;color:#000;border-color:#d8d8d8}
.v2lista a.case{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.v2lista a.case.fora{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.stagger>*{transition:none!important;opacity:1!important;transform:none!important}.v2fig .dr{transition:none;stroke-dashoffset:0}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* cartoes do indice do blog */
.v2lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;border-top:.5px solid var(--line);border-left:.5px solid var(--line);margin-bottom:40px}
.v2lista a.case{display:block;padding:30px 28px 34px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);text-decoration:none;color:#d8d8d8;background:rgba(0,0,0,.35)}
.v2lista a.case:hover{background:rgba(216,216,216,.05)}
.v2lista a.case .tag{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--granite-dim);margin-bottom:16px}
.v2lista a.case h3{font-family:'Creato Display','Archivo',sans-serif;font-size:1.22rem;line-height:1.28;font-weight:500;margin:0 0 14px;text-transform:none}
.v2lista a.case p{font-size:.92rem;line-height:1.6;color:var(--granite-dim);margin:0 0 20px}
.v2lista a.case .go{font-size:10px;letter-spacing:.28em;text-transform:uppercase;border-bottom:.5px solid #d8d8d8;padding-bottom:3px}
/* v2ok1 */
#ciencia .psy-grid .ref{justify-content:flex-start!important}

/* FONTE BRANCA: os textos do site passam de cinza para branco. O secundario fica em branco levemente atenuado, para manter a hierarquia. */
html:root{--granite:#ffffff;--granite-dim:rgba(255,255,255,.86)}

/* VEU DE LEITURA: nas paginas com o campo de particulas, o conteudo de cada secao fica sobre
   um painel escuro translucido com desfoque. As particulas continuam visiveis por tras, mas
   deixam de competir com o texto. Paginas sem particulas nao mudam. */
body:has(canvas#scene) section>.wrap{background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(13px) saturate(.8) brightness(.8);backdrop-filter:blur(13px) saturate(.8) brightness(.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:6px;padding:44px 48px}
body:has(canvas#scene) section.clients>.wrap{padding:22px 48px}
body:has(canvas#scene) #v2hud{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 12px;border-radius:4px}
body:has(canvas#scene) #v2rail{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 12px;border-radius:4px}
@media(max-width:760px){body:has(canvas#scene) section>.wrap{padding:28px 20px;border-radius:0;box-shadow:none;background:rgba(0,0,0,.42)}}
@supports not (backdrop-filter:blur(1px)){body:has(canvas#scene) section>.wrap{background:rgba(0,0,0,.72)}}
