/* Esqueleto com o desenho de cada tela (molde.js). As barras usam a cor do próprio texto bem clara: ficam certas no tema
   claro e no escuro, no site, no app do iPhone e no do Mac. O brilho passa junto na tela toda (fixo na janela); quem pediu
   menos movimento (Ajustes → Acessibilidade) vê as barras paradas. Só aparece se a espera passar de 0,25 s: carga rápida
   não pisca. As letras somem com -webkit-text-fill-color (e não com color: transparent), para a barra herdar a cor do
   texto. */
/* blocos (botões, pílulas, fotos, campos): tom neutro do tema, porque a pílula ativa tem letra escura sobre fundo claro
   e, pela cor da letra, sumiria no tema escuro */
:root{--molde-n:0,0,0}
:root[data-aparencia=escuro]{--molde-n:255,255,255}
.molde{--molde-a:color-mix(in srgb,currentColor 8%,transparent);--molde-b:color-mix(in srgb,currentColor 15%,transparent);
  --molde-fundo:linear-gradient(100deg,var(--molde-a) 30%,var(--molde-b) 50%,var(--molde-a) 70%) 0 0/200vw 100% fixed var(--molde-a);
  --molde-bloco:linear-gradient(100deg,rgba(var(--molde-n),.07) 30%,rgba(var(--molde-n),.13) 50%,rgba(var(--molde-n),.07) 70%) 0 0/200vw 100% fixed rgba(var(--molde-n),.07);
  pointer-events:none;user-select:none;-webkit-user-select:none;animation:molde-entra .18s ease .25s both}
.molde .molde-t{-webkit-text-fill-color:transparent!important;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--molde-fundo);animation:molde-brilho 1.5s linear infinite}
.molde :is(.molde-img,[data-molde-campo]){background:var(--molde-bloco)!important;border-color:transparent!important;border-radius:10px;animation:molde-brilho 1.5s linear infinite}
.molde .molde-redondo{border-radius:50%}
/* sem as reticências do texto cortado ("…" no fim da barra) */
.molde *{text-overflow:clip!important}
/* o título pequeno do topo só aparece ao rolar a tela: no esqueleto, não */
.molde .barra-titulo{visibility:hidden}
/* as animações de entrada da tela real (surgir, deslizar) não valem no esqueleto: ele já está no lugar; só o brilho anda */
.molde :not(.molde-t,.molde-img,[data-molde-campo],button,.btn,.av,.tw-av,.pill,.pill-st,.tw-tag,.tag,.chip,.temp,.sino-n,kbd,[class*="selo"],[class*="badge"]){animation:none!important}
/* botões, etiquetas, selos e fotos: o formato fica, a cor vira esqueleto (um bloco só, sem barra dentro) */
.molde :is(button,.btn,.av,.tw-av,.pill,.pill-st,.tw-tag,.tag,.chip,.temp,.sino-n,kbd,[class*="selo"],[class*="badge"]):not(:is(.nav,.barra-baixo,.busca-rapida,.busca-cel) *,.busca-rapida,.busca-cel,[data-molde-caixa]){
  background:var(--molde-bloco)!important;border-color:transparent!important;box-shadow:none!important;-webkit-text-fill-color:transparent!important;animation:molde-brilho 1.5s linear infinite}
.molde :is(button,.btn,.av,.tw-av,.pill,.pill-st,.tw-tag,.tag,.chip,.temp,.sino-n,kbd,[class*="selo"],[class*="badge"]):not(:is(.nav,.barra-baixo,.busca-rapida,.busca-cel) *,.busca-rapida,.busca-cel,[data-molde-caixa]) :is(.molde-t,.molde-img){background:none!important;animation:none}
.molde :is(button,.btn):not(:is(.nav,.barra-baixo,.busca-rapida,.busca-cel) *,.busca-rapida,.busca-cel,[data-molde-caixa]) svg{visibility:hidden}
.molde-abertura{position:fixed;inset:0;z-index:30;overflow:hidden;background:var(--sq-canvas,var(--fundo,#0E0E0E))}
/* na abertura o esqueleto entra na hora: antes dele a tela está vazia, não há o que piscar (e o navegador só pinta a
   primeira vez quando tem algo visível) */
.molde.molde-abertura{animation:none}
/* as cores da marca ficam (selos amarelos, anel da meta, ícones): o Gabriel aprovou assim, 24/10 */
.molde-abertura.molde-saindo{animation:molde-sai .3s cubic-bezier(.2,.7,.2,1) both}
.molde-parte,.molde-parte>.molde-in,.molde-in{display:contents}
#tela.molde-chegou>*{animation:molde-chega .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes molde-brilho{from{background-position:100vw 0}to{background-position:-100vw 0}}
@keyframes molde-entra{from{opacity:0}}
@keyframes molde-sai{to{opacity:0}}
@keyframes molde-chega{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.molde,.molde *{animation:none!important}#tela.molde-chegou>*{animation:none}}