/* Loader da marca Gestão Signer: logo "respirando" com brilho nas letras e barra indeterminada.
   Carregado direto pelo index.html (aparece antes do JavaScript) e reutilizado pelo React (BrandLoader). */
.gs-loader {
  --gs-teal: #104e65;
  --gs-teal-light: #1ba7c4;
  --gs-width: 300px; /* largura da logo */
  --gs-logo: url('/brand/loader-logo.png');
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.gs-loader--sm {
  --gs-width: 200px;
  gap: 18px;
}

.gs-logo {
  position: relative;
  width: var(--gs-width);
  max-width: 70vw;
  aspect-ratio: 760 / 249; /* proporção original da logo */
  animation: gs-breathe 2.6s ease-in-out infinite;
}
.gs-mark {
  position: absolute;
  inset: 0;
  background-image: var(--gs-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* brilho que varre só o interior das letras (a própria logo é a máscara) */
.gs-shine {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--gs-logo);
  mask-image: var(--gs-logo);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(120, 220, 240, 0.85) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%;
  animation: gs-shine 2.2s ease-in-out infinite;
}
@keyframes gs-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes gs-shine {
  0% { background-position: 190% 0; }
  60%, 100% { background-position: -90% 0; }
}

/* barra indeterminada */
.gs-bar {
  width: calc(var(--gs-width) * 0.5);
  max-width: 35vw;
  height: 3px;
  border-radius: 3px;
  background: rgba(16, 78, 101, 0.14);
  overflow: hidden;
}
.gs-bar::after {
  content: '';
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gs-teal), var(--gs-teal-light));
  animation: gs-slide 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes gs-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}

.gs-text {
  font: 600 12px/1 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5f8694;
}

@media (prefers-reduced-motion: reduce) {
  .gs-logo, .gs-shine { animation: none; }
  .gs-shine { opacity: 0; }
  .gs-bar::after { width: 100%; animation: gs-pulse 1.6s ease-in-out infinite; }
  @keyframes gs-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

/* tela cheia (abertura do app, verificação de sessão) */
.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f6f7;
}