/* A tela de carregamento do portfólio (assets/carregando.js?v=c3192335 monta o HTML).
   Um portal se abre no creme da capa: primeiro um risco, depois a boca escura com estrelas vindo do fundo.
   A borda amarela se desenha, o sol nasce lá de dentro e os planetas saem para as órbitas; a poeira do
   creme é puxada para o portal. O anel e as 60 marcas do mostrador acompanham o carregamento real. No fim
   o sol cobre a boca e o portal se abre sobre a página inteira, com a borda amarela correndo na frente.
   Tudo chapado: sem brilho, sem sombra, sem volume. Só na primeira visita da sessão. */
.ja-carregou .carregando{display:none}
.carregando{position:fixed;inset:0;z-index:9999;background:#F1E8D3;color:#26241F;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s ease}
/* os dois círculos da capa, quase sumidos */
.carregando::before,.carregando::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.carregando::before{width:62vmax;height:62vmax;left:-24vmax;top:-30vmax;background:#E4DBC5;animation:carregando-flutua 9s ease-in-out infinite}
.carregando::after{width:44vmax;height:44vmax;right:-14vmax;top:-16vmax;background:#F6ECC4;animation:carregando-flutua 11s ease-in-out infinite reverse}
@keyframes carregando-flutua{50%{transform:translate(1.5vmax,2vmax)}}
.carregando-poeira{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;animation:carregando-aparece 1.4s .9s forwards}

/* o portal: 320 × 320, centro em 160 */
.carregando-centro{position:relative;z-index:2;width:320px;height:320px;flex:none}
.carregando-boca{position:absolute;left:60px;top:60px;width:200px;height:200px;border-radius:50%;background:#161410;overflow:hidden;
  clip-path:ellipse(0% .6% at 50% 50%);animation:carregando-abre 1s .1s cubic-bezier(.65,0,.35,1) forwards}
.carregando-boca canvas{display:block;width:100%;height:100%}
/* risco na horizontal, depois abre na vertical, como um olho */
@keyframes carregando-abre{40%{clip-path:ellipse(50% .8% at 50% 50%)}100%{clip-path:ellipse(50% 50% at 50% 50%)}}

.carregando-orbita{position:absolute;inset:0;transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.carregando-anel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.carregando-anel circle,.carregando-anel g{transform-origin:160px 160px}
/* a borda amarela se traça em volta da boca */
.carregando-anel .borda{fill:none;stroke:#F2C40F;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);
  animation:carregando-traca .9s .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes carregando-traca{to{stroke-dashoffset:0}}
/* ondas que saem do portal de tempos em tempos */
.carregando-anel .onda{fill:none;stroke:#F2C40F;stroke-width:1.5;opacity:0;animation:carregando-onda 2.8s 1.5s cubic-bezier(.22,1,.36,1) infinite}
.carregando-anel .onda.o2{animation-delay:2.9s}
@keyframes carregando-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.carregando-anel .trilho{fill:none;stroke:rgba(38,36,31,.14);stroke-width:2;opacity:0;animation:carregando-aparece .6s .8s forwards}
.carregando-anel .progresso{fill:none;stroke:#26241F;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg)}
/* o mostrador: 60 marcas que acendem conforme carrega */
.carregando-anel .marca{stroke:rgba(38,36,31,.2);stroke-width:1.5;stroke-linecap:round;opacity:0;
  animation:carregando-aparece .35s forwards;animation-delay:calc(.75s + var(--i) * 11ms);transition:stroke .3s ease}
.carregando-anel .marca.maior{stroke-width:2.2}
.carregando-anel .marca.acesa{stroke:#26241F}
/* arcos ocre girando em sentidos contrários */
.carregando-anel .arcos{animation:carregando-gira 16s linear infinite}
.carregando-anel .arcos.volta{animation-duration:24s;animation-direction:reverse}
.carregando-anel .arco{fill:none;stroke:#A98F0B;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 100}
.carregando-anel .a1{animation:carregando-arco1 1.2s 1s cubic-bezier(.22,1,.36,1) forwards}
.carregando-anel .a2{animation:carregando-arco2 1.2s 1.1s cubic-bezier(.22,1,.36,1) forwards}
.carregando-anel .a3{animation:carregando-arco3 1.2s 1.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes carregando-arco1{to{stroke-dasharray:22 78}}
@keyframes carregando-arco2{to{stroke-dasharray:9 91}}
@keyframes carregando-arco3{to{stroke-dasharray:15 85}}

/* planetas: nascem no centro e saem para a própria órbita */
.carregando-planeta{position:absolute;inset:0;animation:carregando-gira linear infinite}
.carregando-planeta i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:1s cubic-bezier(.22,1,.36,1) forwards}
.carregando-planeta.p1{animation-duration:9s}
.carregando-planeta.p1 i{width:10px;height:10px;background:#26241F;animation-name:carregando-sai1;animation-delay:1.05s}
.carregando-planeta.p2{animation-duration:4.2s;animation-direction:reverse}
.carregando-planeta.p2 i{width:7px;height:7px;background:#F1E8D3;animation-name:carregando-sai2;animation-delay:1.15s}
.carregando-planeta.p3{animation-duration:6.4s}
.carregando-planeta.p3 i{width:5px;height:5px;background:#F2C40F;animation-name:carregando-sai3;animation-delay:1.25s}
@keyframes carregando-sai1{to{top:6px;opacity:1}}
@keyframes carregando-sai2{to{top:102px;opacity:1}}
@keyframes carregando-sai3{to{top:76px;opacity:1}}
@keyframes carregando-gira{to{transform:rotate(360deg)}}

/* o sol nasce do fundo do portal, respira e, no fim, cobre a boca inteira */
.carregando-sol{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;transform:scale(0);
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.carregando-sol i{display:block;width:100%;height:100%;border-radius:50%;background:#F2C40F;animation:carregando-respira 2.6s ease-in-out infinite}
@keyframes carregando-respira{50%{transform:scale(1.07)}}
.carregando.aberto .carregando-sol{transform:scale(1)}
.carregando.cheio .carregando-sol{transform:scale(1.18);transition-duration:.5s}
.carregando.saindo .carregando-sol{transform:scale(2.86);transition:transform .45s cubic-bezier(.65,0,.35,1)}
.carregando.cheio .carregando-sol i{animation:none}
.carregando.saindo .carregando-orbita{opacity:0;transform:scale(1.12)}

.carregando-rodape{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.carregando.saindo .carregando-rodape{opacity:0;transform:translateY(10px)}
.carregando-logo{width:168px;height:auto;opacity:0;transform:translateY(8px);animation:carregando-aparece .8s 1.1s cubic-bezier(.22,.8,.24,1) forwards}
.carregando-texto{margin:0;display:flex;gap:14px;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:#57534A;opacity:0;transform:translateY(6px);animation:carregando-aparece .8s 1.25s forwards}
.carregando-texto .fase{display:inline-block;min-width:23ch;text-align:center;transition:opacity .25s ease,transform .25s ease}
.carregando-texto .fase.troca{opacity:0;transform:translateY(5px)}
.carregando-texto b{font-weight:500;color:#26241F;min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
@keyframes carregando-aparece{to{opacity:1;transform:none}}

/* a borda amarela que corre na frente quando o portal se abre sobre a página */
.carregando-borda{position:fixed;display:none;box-sizing:border-box;border:4px solid #F2C40F;border-radius:50%;pointer-events:none;z-index:3;
  outline:1.5px solid rgba(38,36,31,.35);outline-offset:6px}
.carregando.saindo .carregando-borda{display:block}

@media (prefers-reduced-motion:reduce){
  .carregando,.carregando *,.carregando::before,.carregando::after{animation:none!important;transition:none!important}
  .carregando-boca{clip-path:none}
  .carregando-sol{transform:scale(1)}
  .carregando-anel .borda{stroke-dashoffset:0}
  .carregando-anel .trilho,.carregando-anel .marca,.carregando-poeira,.carregando-logo,.carregando-texto{opacity:1;transform:none}
  .carregando-anel .onda{display:none}
  .carregando-anel .a1{stroke-dasharray:22 78}.carregando-anel .a2{stroke-dasharray:9 91}.carregando-anel .a3{stroke-dasharray:15 85}
  .carregando-planeta i{opacity:1}
  .carregando-planeta.p1 i{top:6px}.carregando-planeta.p2 i{top:102px}.carregando-planeta.p3 i{top:76px}
}
@media (max-width:560px){
  .carregando-centro{transform:scale(.74);margin:-42px 0}
  .carregando-logo{width:140px}
  .carregando-texto{gap:10px;font-size:11px;letter-spacing:1.5px}
  .carregando-texto .fase{min-width:21ch}
}