/* =====================================================================
   FX · camada de movimento e acabamento · Andre Coelho
   Tudo que é animação só vale com html.fx (desligado em prefers-reduced-motion).
   Vocabulário: barras do !!! (inclinação 10°, topo em meio círculo), timecode,
   araucária/pinheiro, grão e líquen da identidade 2026.
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.7,0,.2,1);--spring:cubic-bezier(.34,1.56,.5,1)}

/* ---------- acabamento base (estático) ---------- */
html{scrollbar-color:var(--ardosia) var(--noite)}
html.fx{scroll-behavior:auto}
::selection{background:var(--neblina);color:var(--noite)}
:focus-visible{outline:2px solid var(--neblina);outline-offset:4px;border-radius:8px}
.rec.blink,.tcbar .rec,#tcf .rec{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

/* acessível: texto original fica para leitores de tela quando o título é quebrado em letras/palavras */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- grão de filme (textura da marca, alfa claro+escuro) ---------- */
#gr{display:block;position:fixed;inset:-90px;z-index:9000;pointer-events:none;background:url(assets/grao.png) 0 0/640px 360px;opacity:.12}
.fx #gr{animation:grain 1s steps(1) infinite}
@keyframes grain{
0%{transform:translate(0,0)}10%{transform:translate(-31px,17px)}20%{transform:translate(23px,-41px)}
30%{transform:translate(-47px,-9px)}40%{transform:translate(35px,38px)}50%{transform:translate(-13px,52px)}
60%{transform:translate(49px,-23px)}70%{transform:translate(-39px,31px)}80%{transform:translate(11px,-53px)}
90%{transform:translate(-27px,-37px)}}

/* ---------- líquen/água em deriva contínua (offset em loop, sem emenda) ---------- */
.tx{inset:-900px 0 0 -900px}
.fx .tx{animation:drift 150s linear infinite;will-change:transform}
@keyframes drift{to{transform:translate3d(900px,900px,0)}}

/* ---------- texto dividido (palavras/letras sobem de dentro de uma máscara) ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .14em .22em;margin:-.16em -.14em -.22em}
.wi,.c{display:inline-block}
.fx [data-sp]:not(.in) :is(.wi,.c){transform:translate3d(0,118%,0) rotate(7deg)}
.fx [data-sp].in .wi{animation:up 1.05s var(--ease) calc(var(--i,0)*85ms) backwards}
.fx [data-sp].in .c{animation:up 1.2s var(--ease) calc(var(--i,0)*55ms + 120ms) backwards}
@keyframes up{from{transform:translate3d(0,118%,0) rotate(7deg)}}

/* ---------- entradas ---------- */
/* texto corrido */
.fx [data-rv=fade]:not(.in){opacity:0}
.fx [data-rv=fade].in{animation:rise .95s var(--ease) var(--d,0ms) backwards}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}}
/* cards: a capa abre como cortina e a imagem desce de um zoom */
.fx [data-rv=card]:not(.in) :is(.cv,.ph){clip-path:inset(0 0 100% 0)}
.fx [data-rv=card]:not(.in) .ct{opacity:0}
.fx [data-rv=card].in :is(.cv,.ph){animation:curtain 1.1s var(--ease-io) var(--d,0ms) backwards}
.fx [data-rv=card].in :is(.cv,.ph) img{animation:zoom 1.7s var(--ease) var(--d,0ms) backwards}
.fx [data-rv=card].in .ct{animation:rise .9s var(--ease) calc(var(--d,0ms) + 380ms) backwards}
@keyframes curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoom{from{transform:scale(1.3)}}
/* vídeos e galeria: uma tarja na cor do projeto varre e revela */
.fx [data-rv=wipe]::before{content:"";position:absolute;inset:0;z-index:4;background:var(--ac,var(--nevoa));pointer-events:none;clip-path:inset(0 0 0 100%)}
.fx [data-rv=wipe]:not(.in)::before{clip-path:inset(0)}
.fx [data-rv=wipe].in::before{animation:wipe 1s var(--ease-io) var(--d,0ms) both}
.fx [data-rv=wipe].in video{animation:unzoom 1.5s var(--ease) var(--d,0ms) backwards}
@keyframes wipe{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes unzoom{from{transform:scale(1.12)}}
/* retratos e painéis grandes: cortina da cor do fundo sobe e descobre
   (a cortina é um pseudo-elemento: clip-path no próprio alvo derrubaria o IntersectionObserver) */
.fx [data-rv=img]{position:relative;overflow:hidden}
.fx [data-rv=img]::after{content:"";position:absolute;inset:0;z-index:5;background:var(--noite);pointer-events:none;clip-path:inset(0 0 100% 0)}
.fx [data-rv=img]:not(.in)::after{clip-path:inset(0)}
.fx [data-rv=img].in::after{animation:curtainr 1.25s var(--ease-io) var(--d,0ms) both}
@keyframes curtainr{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
/* linhas de ficha técnica: a régua é desenhada */
.rw,.crow{border-bottom-color:transparent!important;background:linear-gradient(var(--ln),var(--ln)) 0 100%/100% 1px no-repeat}
.rw{--ln:var(--neblina)}.crow{--ln:var(--mata)}.rw:last-child{background:none}
.fx [data-rv=line]:not(.in){background-size:0 1px}
.fx [data-rv=line]:not(.in)>*{opacity:0}
.fx [data-rv=line].in{animation:ln 1.2s var(--ease) var(--d,0ms) backwards}
.fx [data-rv=line].in>*{animation:rise .9s var(--ease) calc(var(--d,0ms) + 250ms) backwards}
@keyframes ln{from{background-size:0 1px}}

/* ---------- retratos com parallax interno ---------- */
.fx .about .pic img,.fx .ct2 .pic img,.fx .hp img{transform:translate3d(0,var(--py,0%),0) scale(1.14);will-change:transform}

/* ---------- navegação ---------- */
nav .links{position:relative}
.links.has-ind a.on,.links.has-ind a:hover{background:none}
.links a{position:relative;z-index:1}
.links .ind{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--mata);z-index:0;opacity:0;pointer-events:none}
.links .ind.go{transition:transform .5s var(--ease-io),width .5s var(--ease-io),opacity .3s}
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;height:1.3em;line-height:1.3em}
.roll>span{display:block;transition:transform .55s var(--ease)}
.roll::after{content:attr(data-t);position:absolute;left:0;top:100%;transition:transform .55s var(--ease)}
.links a:hover .roll>span,.links a:hover .roll::after{transform:translateY(-100%)}
.fx nav{transition:transform .6s var(--ease)}
.fx.nv-h nav{transform:translateY(-101%)}

/* ---------- barra de progresso e timecode que acompanha a rolagem ---------- */
#pg{display:block;position:fixed;left:0;top:0;right:0;height:2px;z-index:9100;background:var(--neblina);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
#tcf{display:flex;position:fixed;left:16px;bottom:16px;z-index:9100;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--noite);border:1px solid var(--mata);color:var(--bruma);font:400 11px/1 var(--mono);letter-spacing:.14em;pointer-events:none;transition:opacity .3s}
body:has(#lb:not([hidden])) #tcf,.at-end #tcf{opacity:0}
@media(max-width:700px){#tcf{display:none}}

/* ---------- hero ---------- */
.hero{position:relative}
.deco{position:absolute;right:-1vw;bottom:-2px;height:min(118%,980px);aspect-ratio:1666/1890;pointer-events:none;z-index:0;transform:translate3d(0,var(--dy,0px),0)}
.deco .dm{height:100%;transform:translate3d(var(--dx,0px),0,0);transition:transform .9s var(--ease)}
.deco img{height:100%;width:auto;display:block;transform-origin:50% 100%}
.fx .deco img{animation:sway 11s ease-in-out infinite alternate}
@keyframes sway{from{rotate:-.7deg}to{rotate:.7deg}}
@media(max-width:700px){.deco{height:70%;right:-22vw;opacity:.7}}
.hero .hg{position:relative;z-index:1}
.avail{display:flex;align-items:center}
.live{display:inline-block;position:relative;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--neblina)}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--neblina);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
/* símbolo !!! inline: as barras sobem e os pontos pingam */
.sy{overflow:visible}
.sy .b,.sy .d{transform-box:fill-box}
.sy .b{transform-origin:50% 100%}
.sy .d{transform-origin:50% 50%}
.fx .hero .bang .b{transform:scaleY(0)}
.fx .hero .bang .d{transform:scale(0)}
.fx.ready .hero .bang .b{transform:none;transition:transform 1.1s var(--spring) calc(.5s + var(--i,0)*.14s)}
.fx.ready .hero .bang .d{transform:none;transition:transform .8s cubic-bezier(.34,1.9,.5,1) calc(.95s + var(--i,0)*.14s)}
.fx.intro-done .hero .bang .b,.fx.intro-done .hero .bang .d{transition:transform .6s var(--spring) calc(var(--i,0)*45ms)}
.fx.ready .hero .bang:hover .b{transform:scaleY(.8)}
.fx.ready .hero .bang:hover .d{transform:translateY(8px) scale(.9)}
/* barra de status acima do reel */
.tcbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px;color:var(--neblina);font-size:11px}
.tcbar .l{display:flex;align-items:center;gap:0}
.tcbar+.reel{margin-top:12px}
.tcbar [data-tc]{font-weight:400;color:var(--bruma)}
@media(max-width:560px){.tcbar{margin-top:32px;font-size:10px}.tcbar .hide-m{display:none}}
.fx .reel.pres{transform:scale(var(--s,.92))}

/* ---------- cards ---------- */
.cv{position:relative}
.cv::after{content:"";position:absolute;left:16px;bottom:16px;height:6px;width:40px;border-radius:999px;background:var(--ac,var(--nevoa));transition:width .8s var(--ease);pointer-events:none}
a.cd:hover .cv::after{width:calc(100% - 32px)}
.cv img,.ph img{transition:transform .9s var(--ease)}
a.cd:hover .cv img{transform:scale(1.045)}
.ct .mono::after{content:" \2192";display:inline-block;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease)}
a.cd:hover .ct .mono::after{opacity:1;transform:none}

/* ---------- painéis grandes (Motion / Filmmaking) ---------- */
.big{position:relative;overflow:hidden;isolation:isolate}
.big>*{position:relative;z-index:1}
.big::before{content:"";position:absolute;z-index:0;right:-1%;bottom:-4%;height:96%;aspect-ratio:1061/1969;background:var(--sil) 50% 100%/contain no-repeat;transform:translate3d(0,42%,0);transition:transform 1.1s var(--ease);pointer-events:none}
.big:nth-child(1){--sil:url(assets/pinheiro-noite.svg)}
.big:nth-child(2){--sil:url(assets/araucaria-noite.svg)}
.big:nth-child(2)::before{aspect-ratio:1666/1890;height:88%}
.big:hover::before{transform:none}
.big .arrow{transition:transform .6s var(--ease)}
.big:hover .arrow{transform:translateX(8px)}
.nx .pill{transition:transform .6s var(--ease)}
.nx:hover .pill{transform:translateX(8px)}

/* ---------- contato ---------- */
.crow .v{transition:transform .6s var(--ease)}
.crow:hover .v{transform:translateX(10px)}

/* ---------- lightbox ---------- */
#lb:not([hidden]){animation:fadein .35s ease both}
.lbin{animation:pop .6s var(--ease) both}
@keyframes fadein{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translate3d(0,26px,0) scale(.95)}}

/* ---------- floresta de araucárias e pinheiros antes do rodapé (3 camadas) ---------- */
.forest{position:relative;height:clamp(150px,21vw,300px);overflow:hidden;background:var(--noite);pointer-events:none}
.forest .ly{position:absolute;inset:0;transform-origin:50% 100%}
.forest img{position:absolute;bottom:-1px;left:var(--x);height:var(--h);width:auto;opacity:var(--o,1);transform-origin:50% 100%}
.fx .forest[data-rv]:not(.in) img{scale:1 0}
.fx .forest[data-rv].in img{animation:grow 1.7s var(--ease) calc(var(--i,0)*45ms) backwards}
.fx .forest[data-rv].in .ly{animation:sway var(--sw,12s) ease-in-out var(--sd,0s) infinite alternate}
@keyframes grow{from{scale:1 0}}
@media(max-width:700px){.forest{height:clamp(130px,34vw,200px)}.forest img.o{display:none}}
footer{position:relative}

/* ---------- cursor com rótulo ---------- */
#cur{display:none;position:fixed;left:0;top:0;z-index:9998;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .3s;will-change:transform}
@media(hover:hover) and (pointer:fine){.fx #cur{display:block}}
#cur.on{opacity:1}
#cur i{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--bruma);transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s}
#cur b{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--noite);transition:opacity .25s,transform .45s var(--ease);white-space:nowrap}
#cur[data-s=pt] i{width:58px;height:58px;margin:-29px 0 0 -29px}
#cur[data-s=lab]{mix-blend-mode:normal}
#cur[data-s=lab] i{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--bruma);border-color:var(--bruma)}
#cur[data-s=lab] b{opacity:1;transform:translate(-50%,-50%)}
#cur[data-s=off]{opacity:0!important}
.mag{transition:transform .5s var(--ease)}

/* ---------- barras do !!! : transição de página e abertura ---------- */
#wp{display:block;position:fixed;inset:0;z-index:9990;pointer-events:none;overflow:hidden}
#wp .wb{display:block;position:absolute;bottom:0;width:50vw;height:calc(120vh + 25vw);border-radius:25vw 25vw 0 0;transform:translate3d(0,102%,0) skewX(-10deg);will-change:transform}
#wp .wb:nth-child(1){left:-24vw;background:var(--noite)}
#wp .wb:nth-child(2){left:25vw;background:var(--mata)}
#wp .wb:nth-child(3){left:74vw;background:var(--noite)}
#wp.enter .wb{transition:transform .5s var(--ease-io) calc(var(--i)*55ms)}
#wp.cover{pointer-events:auto}
#wp.cover .wb,.fx-pre #wp .wb{transform:translate3d(0,0,0) skewX(-10deg)}
.fx-pre #wp{pointer-events:auto}
#wp.out .wb{transform:translate3d(0,-106vh,0) skewX(-10deg);transition:transform .65s var(--ease-io) calc(var(--i)*55ms)}

#pre{display:none;position:fixed;inset:0;z-index:9996;flex-direction:column;align-items:center;justify-content:center;gap:26px;color:var(--bruma);transition:opacity .3s;pointer-events:none}
.fx-pre #pre{display:flex}
#pre.hide{opacity:0}
#pre svg{height:clamp(60px,9vw,104px);width:auto}
#pre-tc{font:600 clamp(14px,1.5vw,17px)/1 var(--mono);letter-spacing:.22em;font-variant-numeric:tabular-nums}
.pre-nm{color:var(--nevoa);font-size:11px}
html.fx-pre,html.fx-pre body{overflow:hidden}

/* ---------- movimento reduzido: nada se move, tudo aparece ---------- */
@media(prefers-reduced-motion:reduce){
 #gr{animation:none}
}

/* ---------- diagramação: tira o respiro deixado por rótulos escondidos ---------- */
.pill+.sh,.pill+.split,.pill+.tabs,.tags+.ttl,.tags+h1,.pill+.h{margin-top:0}
.hero .hg .ht h1{margin-top:4px}
.sec.alt .split{margin-top:0}
/* cards de Filmmaking sem imagem: menos vazio, com a textura e a vegetação da marca */
.cd.txt .ph{aspect-ratio:4/3;isolation:isolate}
.cd.txt .ph::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noite);opacity:.3;-webkit-mask:url(assets/liquen.png) 0 0/560px;mask:url(assets/liquen.png) 0 0/560px}
.cd.txt .ph::after{display:block;left:auto;right:-4%;bottom:-2px;width:auto;height:78%;aspect-ratio:1061/1969;border-radius:0;background:url(assets/pinheiro-noite.svg) 50% 100%/contain no-repeat;transform:translate3d(0,14%,0);transition:transform 1s var(--ease)}
.cd.txt:nth-child(even) .ph::after{aspect-ratio:1666/1890;background-image:url(assets/araucaria-noite.svg);height:70%}
.cd.txt:hover .ph::after{transform:none}
.cd.txt .ph .ser{position:relative;z-index:1}
@media(max-width:560px){
  .cd.txt .ph{aspect-ratio:16/10}
  .row{margin-top:16px}.row:first-of-type{margin-top:32px}
}

/* botão de tocar o reel (só aparece se o autoplay for bloqueado) */
.reel .reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;background:var(--bruma);color:var(--noite);padding:14px 22px;font-weight:600}
.reel .reel-play:hover{background:var(--neblina)}
/* o rótulo do reel fica acima da tarja de entrada */
.reel.rl>.mono{z-index:6}

/* altura natural: o travamento de altura do #app (fit) podia deixar um vazio no fim no iPhone */
html{background:var(--noite)}
#app{height:auto!important}

/* ---------- iPhone/Safari: nada pode vazar abaixo do rodape ---------- */
/* barras da transicao so existem enquanto a transicao roda */
#wp{display:none}
#wp.enter,#wp.cover,#wp.out,.fx-pre #wp{display:block}
/* corte duro (o overflow:hidden sozinho falha no iOS com filhos animados/compostos) */
section,.sec,.hero,.forest,footer,.big,.reel{contain:paint}
.forest{isolation:isolate}
html,body{overflow-x:clip}
/* toque: texturas e grao estaticos, sem camadas maiores que a tela */
@media(hover:none),(pointer:coarse){
  #gr{inset:0;animation:none!important}
  .tx,.tx.l,.tx.w{inset:0!important}
  .fx .tx{animation:none!important;will-change:auto}
}

/* ---------- Filmmaking: cards com video do Vimeo ---------- */
.cd.vm{cursor:pointer}
.cd.vm .ph{position:relative}
.cd.vm .ph .pb{z-index:2;pointer-events:none}
.cd.vm:hover .ph .pb,.cd.vm:focus-visible .ph .pb{background:var(--bruma);color:var(--noite)}
.cd.vm:focus-visible{outline:2px solid var(--bruma);outline-offset:4px;border-radius:24px}
.cd.vm .ct a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#lb.vmode #lbv{display:none}
#lb .vmf{width:min(1200px,calc(100vw - 32px),calc((100vh - 120px)*16/9));height:auto;aspect-ratio:16/9;border:0;border-radius:24px;background:#000;display:block}
@media(max-width:560px){#lb .vmf{border-radius:16px}}
.cd.vm .ph .pb{top:14px;bottom:auto;right:14px}
@media(max-width:700px){[data-w=dominos] .ttl .gro{font-size:10.2vw}}

/* cards com capa (thumb da live / quadro do video) */
.cd.cov .ph{background:var(--noite)}
.cd.cov .ph .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1s var(--ease),filter .6s}
.cd.cov .ph .cv.pos{object-position:50% 34%}
.cd.cov:hover .ph .cv{transform:scale(1.04)}
.cd.cov .ph::before{z-index:1;opacity:1;-webkit-mask:none;mask:none;background:linear-gradient(180deg,rgba(19,34,29,.05) 30%,rgba(19,34,29,.55) 66%,rgba(19,34,29,.92) 100%)}
.cd.cov .ph::after{display:none!important}
.cd.cov .ph .ser{z-index:2;font-size:38px;line-height:1.02}
.cd.cov .ph .pb{z-index:3}
.cd.cov.full .ph::before{display:none}
.cd.cov.full .ph .cv{object-position:50% 50%}
/* play badge: triangle drawn with clip-path so it is optically centred (the text glyph sat high/flat) */
@media(max-width:560px){.cd .pb::before,.pb::before{content:"";display:block;width:9px;height:10px;font-size:0;line-height:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:2px}}

/* Filmmaking: 4 cards em 2x2 (sem sobra na ultima linha) */
@media(min-width:701px){[data-w="filmmaking"] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Social: pecas verticais em 2 colunas no celular (sem peca sozinha na ultima linha) */
@media(max-width:560px){[data-w="social"] .gal .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}[data-w="social"] .gal .wrap>.pill,[data-w="social"] .gal .wrap>.h{grid-column:1/-1}[data-w="social"] .gal .row{display:contents}[data-w="social"] .gal .fg{flex:none;min-width:0;grid-column:auto!important;width:auto!important;justify-self:stretch!important}}
/* Social: no desktop as 3 pecas verticais ocupam a largura toda (sem buraco a direita) */
@media(min-width:561px){[data-w="social"] .gal .row .fg{flex:1 1 0!important;min-width:0}}

/* ---------- capas padrao Identidade 2026 (cards do Filmmaking): titulo, pill, quadro, texto e assinatura ---------- */
.cd.std .ph{container-type:inline-size;padding:0;display:block;aspect-ratio:1000/782;overflow:hidden}
.cd.txt.std .ph::after{display:none!important}
.cd.std .ph .ser,.cd.std .ph .gro{position:absolute;left:5.8%;display:block;white-space:nowrap;color:var(--bruma);z-index:2;line-height:1}
.cd.txt.std .ph .ser{font-size:10.4cqw;top:6%}
.cd.std .ph .gro{font-size:var(--gs,11cqw);top:20.5%;font-family:"Archivo AC Display",var(--ser2,inherit);font-weight:900;font-style:italic;letter-spacing:-.01em}
.cd.std .sk-pill{position:absolute;right:6%;top:8.2%;z-index:2;background:var(--noite);color:var(--bruma);border-radius:999px;padding:.9cqw 2.2cqw;font-size:1.7cqw;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cd.std .sk-tile{position:absolute;left:5.8%;top:44%;width:58%;bottom:0;border-radius:4cqw 4cqw 0 0;overflow:hidden;background:var(--noite);z-index:1}
.cd.std .sk-tile .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cd.std:hover .sk-tile .cv{transform:scale(1.04)}
.cd.std .sk-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(19,34,29,.9) 100%);pointer-events:none}
.cd.std .sk-tile .pb{position:absolute;z-index:3;top:auto;bottom:6%;right:5%}
.cd.std .sk-txt{position:absolute;left:68%;top:47%;width:26%;z-index:2;color:var(--neblina);font-size:2.1cqw;line-height:1.35;font-family:var(--sans,inherit)}
.cd.std .sk-sig{position:absolute;left:69%;bottom:8%;width:20.6%;z-index:2;height:auto!important;max-width:none;object-fit:contain;inset:auto auto 8% 69%;top:auto}
@media(max-width:560px){.cd.std .sk-pill{font-size:2.1cqw}.cd.std .sk-txt{font-size:2.5cqw}}
.cd.cov.full .ph{aspect-ratio:1000/782}

/* ===== Idioma: seletor no menu, popup, WhatsApp e links do Instagram ===== */
.lang{display:inline-flex;flex:none;gap:2px;padding:3px;border:1px solid var(--mata);border-radius:999px;margin-left:10px}
.lang button{all:unset;cursor:pointer;font-family:var(--mono,"JetBrains Mono AC",monospace);font-size:11px;letter-spacing:.12em;padding:5px 9px;border-radius:999px;color:var(--neblina);line-height:1}
.lang button[aria-pressed="true"]{background:var(--bruma);color:var(--noite)}
.lang button:not([aria-pressed="true"]):hover{background:var(--mata);color:var(--bruma)}
.lang button:focus-visible{outline:2px solid var(--nevoa);outline-offset:2px}
@media(max-width:640px){.lang{position:fixed;right:16px;bottom:16px;z-index:9100;margin:0;background:var(--noite);padding:3px}.lang button{font-size:11px;padding:6px 10px}body:has(#lb:not([hidden])) .lang,.at-end .lang{opacity:0;pointer-events:none}}

html.lp-open,html.lp-open body{overflow:hidden}
#langpop{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(19,34,29,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#langpop[hidden]{display:none}
#langpop .lp-card{position:relative;width:min(520px,100%);background:var(--mata);border-radius:28px;padding:36px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;animation:lpin .5s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
@keyframes lpin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#langpop .lp-card>.pill{display:inline-block!important;background:var(--noite);color:var(--bruma);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#langpop .lp-h{margin:22px 0 10px;line-height:1;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline;color:var(--bruma)}
#langpop .lp-h .ser{font-size:clamp(40px,9vw,54px)}
#langpop .lp-h .gro{font-size:clamp(34px,8vw,46px);text-transform:uppercase}
#langpop .lp-sub{margin:0 0 24px;color:var(--neblina);font-size:16px;line-height:1.4}
#langpop .lp-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#langpop .lp-btns button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:20px;background:var(--bruma);color:var(--noite);transition:transform .25s var(--ease,ease),background .25s}
#langpop .lp-btns button:hover{transform:translateY(-3px);background:#fff}
#langpop .lp-btns button:focus-visible{outline:3px solid var(--nevoa);outline-offset:3px}
#langpop .lp-btns .gro{font-size:clamp(20px,5vw,26px);line-height:1.05}
#langpop .lp-btns .mono{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ardosia)}
#langpop .lp-note{margin:20px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--nevoa);line-height:1.5}
@media(max-width:420px){#langpop .lp-card{padding:30px 22px 22px}#langpop .lp-btns{grid-template-columns:1fr}}

.wa-btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--bruma);color:var(--noite);border-radius:999px;padding:14px 26px;font-weight:600;font-size:17px;transition:transform .25s var(--ease,ease),background .25s}
.wa-btn:hover{transform:translateY(-2px);background:#fff}
.wa-btn svg{flex:none}
@media(max-width:560px){.wa-btn{width:100%;justify-content:center;box-sizing:border-box}}


/* ===== capas dos trabalhos de motion montadas em HTML (traduzíveis) ===== */
.cd.std.lp .ph .gro{font-size:var(--gs,12.6cqw)}
.cd.std.lp .sk-tile{left:0;top:44.25%;width:70.4%;border-radius:0 4.9cqw 0 0;background:transparent}
.cd.std.lp .sk-tile::after{display:none}
.cd.std.lp .sk-tile .cv{object-fit:fill}
.cd.std.lp:hover .sk-tile .cv{transform:none}
.cd.std .sk-pill2{position:absolute;right:6%;top:14.4%;z-index:2;border:1.5px solid var(--nevoa);color:var(--bruma);border-radius:999px;padding:.7cqw 2.2cqw;font-size:1.7cqw;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1.3}
.cd.std.lp .sk-txt{left:73.2%;width:21.8%}
.cd.std.lp .sk-sig{left:74%;width:20%;bottom:7.4%}