/* Carregador da marca Boa Temporada: os quatro blocos do símbolo se montam (o damasco primeiro, depois os verdes
   chegando cada um do seu lado, 0,8 s) e, se ainda estiver carregando, respiram em onda, um depois do outro.
   Fica em public/ (fora do pacote do Vite) porque a abertura do index.html usa antes do JavaScript chegar; o componente
   Carregador.tsx desenha o mesmo SVG nas trocas de página. Aparece depois de 0,15 s: carregamento rápido não pisca. */
.carregador {
  --cg-d: #E8A17C; --cg-v: #174C43;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--ink-3, #607065);
  animation: cg-aparece .3s ease .15s both;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carregador { --cg-v: #F4F1EA; } }
:root[data-theme="dark"] .carregador { --cg-v: #F4F1EA; }
.carregador svg { display: block; width: calc(var(--tam, 80px) * 1.3); height: auto; overflow: visible; }
.carregador-texto { font: 700 12px/1 var(--font, Arial, Helvetica, sans-serif); letter-spacing: .14em; text-transform: uppercase; }

/* tela inteira (abertura do site e da gestão): fundo do tema, mesmo antes do CSS do app carregar */
.carregador-tela { min-height: 100vh; min-height: 100dvh; background: var(--bg, #FAF6EE); padding: 24px; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carregador-tela { background: var(--bg, #0E1D1A); } }
:root[data-theme="dark"] .carregador-tela { background: var(--bg, #0E1D1A); }

/* dentro da página (troca de página): ocupa o lugar do conteúdo, no meio */
.carregador-pagina { min-height: min(56vh, 520px); }

.cg-bloco { fill: var(--cg-v); transform-box: fill-box; transform-origin: center; }
.cg-b1 { fill: var(--cg-d); animation: cg-entra .42s cubic-bezier(.3, 1.6, .5, 1) both, cg-onda 1.6s ease-in-out .95s infinite; }
.cg-b2 { animation: cg-da-direita .5s cubic-bezier(.2, .9, .25, 1) .14s both, cg-onda 1.6s ease-in-out 1.1s infinite; }
.cg-b3 { animation: cg-da-esquerda .5s cubic-bezier(.2, .9, .25, 1) .26s both, cg-onda 1.6s ease-in-out 1.25s infinite; }
.cg-b4 { animation: cg-de-baixo .5s cubic-bezier(.2, .9, .25, 1) .38s both, cg-onda 1.6s ease-in-out 1.4s infinite; }

@keyframes cg-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-entra { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes cg-da-direita { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes cg-da-esquerda { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes cg-de-baixo { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes cg-onda { 0%, 100% { opacity: 1; transform: none; } 35% { opacity: .42; transform: translateY(-9px); } }
@keyframes cg-respira { 50% { opacity: .55; } }

/* quem pediu menos movimento: o símbolo pronto, só respirando */
@media (prefers-reduced-motion: reduce) {
  .carregador, .carregador * { animation: none !important; }
  .carregador svg { animation: cg-respira 1.8s ease-in-out infinite !important; }
}

/* troca de página: a tela atual continua, com um véu leve, e o carregador no meio; não bloqueia o toque */
.carregador-troca { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg, #FAF6EE) 55%, transparent); animation: cg-aparece .25s ease .15s both; }
.carregador-troca .carregador { animation: none; padding: 18px 22px; border-radius: 24px; background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #DDE4DA); box-shadow: 0 18px 44px -18px rgb(0 0 0 / .35); }
@media (prefers-reduced-motion: reduce) { .carregador-troca { animation: none !important; } }