.carregador { display: none; }
.intro .carregador {
  display: flex; position: fixed; inset: 0; z-index: 200; background: var(--fundo);
  align-items: center; justify-content: center;
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io);
}
.intro.saindo .carregador { clip-path: inset(0 0 100% 0); }
.carregador-centro { --tam: 58px; display: flex; align-items: center; gap: calc(var(--tam) / 3); transition: transform 1s var(--ease-io), opacity .7s; }
.saindo .carregador-centro { transform: translateY(-48px); opacity: 0; }
.carregador-simbolo { flex: none; width: var(--tam); height: var(--tam); overflow: visible; }
.cs-l { fill: var(--texto); transform-box: fill-box; transform-origin: 0 100%; animation: cs-entra .8s var(--ease) both; }
.cs-ponto { fill: var(--azul); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: cs-ponto .5s 1.05s var(--ease) forwards; }
.carregador-marca { flex: none; overflow: hidden; margin: 0; height: calc(var(--tam) * 1.07); }
.carregador-marca svg { display: block; height: var(--tam); width: calc(var(--tam) * 205.3 / 36); color: var(--texto); transform: translateY(110%); animation: cs-marca 1s .55s var(--ease) forwards; }
.carregador-base {
  position: absolute; left: var(--margem); right: var(--margem); bottom: 32px;
  display: grid; gap: 14px; font: 400 14px/1 var(--f-titulo); letter-spacing: .04em; color: var(--fraco);
  transition: opacity .5s;
}
.saindo .carregador-base { opacity: 0; }
.carregador-linha { height: 1px; background: var(--borda-2); overflow: hidden; }
.carregador-linha i { display: block; height: 100%; background: var(--texto); transform: scaleX(var(--carga, 0)); transform-origin: left; transition: transform .6s var(--ease); }
@keyframes cs-entra { from { transform: scale(0); } to { transform: none; } }
@keyframes cs-ponto { to { transform: scale(1); } }
@keyframes cs-marca { to { transform: none; } }
@media (max-width: 560px) {
  .carregador-centro { --tam: 34px; }
}