/* Tela de carregamento reutilizável: anel girando em volta da imagem, com estrelas orbitando.
 * Uso: <html class="carregando"> + o bloco .loader logo no início do <body> + assets/js/loader.js.
 * Cores e fonte nas variáveis abaixo; para outro projeto troque a imagem do .loader__img. */
.loader {
  --ld-bg: #f9f6f1; --ld-cor: #1f3a68; --ld-fonte: "Cormorant Garamond", Georgia, serif;
  --ld-ease: cubic-bezier(.76, 0, .24, 1);
  position: fixed; inset: 0; z-index: 1000; background: var(--ld-bg);
  display: grid; place-content: center; justify-items: center; gap: 14px;
  clip-path: inset(0); transition: clip-path 1.05s var(--ld-ease);
  /* Segurança: se o script não rodar, a tela some sozinha em 8 s. */
  animation: ld-fim .01s 8s forwards;
}
.loader__spin { position: relative; width: 190px; height: 190px; margin-bottom: 10px; animation: ld-in .9s cubic-bezier(.16, 1, .3, 1) both; }
.loader__ring, .loader__stars { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Anel: trilho clarinho + traço que sai do topo, fecha o círculo inteiro, segura um instante
   e se desfaz no mesmo sentido, recomeçando. */
.loader__ring circle { fill: none; stroke: color-mix(in srgb, var(--ld-cor) 10%, transparent); stroke-width: 1.5; }
.loader__ring .arc { stroke: var(--ld-cor); stroke-width: 2.2; stroke-linecap: round; transform-origin: center; rotate: -90deg;
  stroke-dasharray: 490 490; animation: ld-arco 8s cubic-bezier(.65, 0, .35, 1) infinite; }

/* Estrelas: giram devagar no sentido contrário e piscam uma depois da outra. */
.loader__stars { animation: ld-gira 26s linear infinite reverse; }
.loader__stars path { fill: var(--ld-cor); opacity: .3; transform-box: fill-box; transform-origin: center; animation: ld-pisca 3.4s ease-in-out infinite; }

/* Imagem no centro, recortada em círculo, respirando de leve. */
.loader__img { position: absolute; inset: 40px; border-radius: 50%; background-color: var(--ld-bg); background-repeat: no-repeat;
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ld-cor) 60%, transparent); }

.loader__nome { font: 500 28px/1.1 var(--ld-fonte); color: var(--ld-cor); animation: ld-in .9s .15s cubic-bezier(.16, 1, .3, 1) both; }
.loader__txt { font: 500 10.5px/1 Montserrat, system-ui, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: var(--ld-cor);
  opacity: .5; animation: ld-in .9s .25s cubic-bezier(.16, 1, .3, 1) both, ld-pulse 2.6s 1.2s ease-in-out infinite; }

.loader.sai { clip-path: inset(0 0 100% 0); }
.loader.sai > * { opacity: 0; translate: 0 -24px; transition: opacity .45s ease, translate .7s var(--ld-ease); }

@keyframes ld-gira { to { rotate: 360deg; } }
/* 490 é a volta inteira do círculo (2 × π × 78). */
@keyframes ld-arco {
  0% { stroke-dashoffset: 490; }
  45%, 55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -490; }
}
@keyframes ld-pisca { 50% { opacity: 1; } }
@keyframes ld-in { from { opacity: 0; filter: blur(6px); } }
@keyframes ld-pulse { 50% { opacity: .2; } }
@keyframes ld-fim { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .loader__ring .arc { animation-duration: 7s; }
  .loader__stars, .loader__stars path, .loader__txt { animation: none; }
  .loader.sai { clip-path: none; opacity: 0; transition: opacity .3s; }
}