/* Página "Em breve" (raiz, antes do lançamento). Tela única. */
body.pagina-em-breve { background: var(--noite); overflow-x: clip; }

.breve__fundo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; opacity: .28; }  /* fundo bem discreto */
/* Escurece o centro para a logo e os textos ficarem nítidos sobre o brilho do fundo. */
.breve__veu {
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 44% 40% at 50% 50%, rgba(8,9,12,.88) 0%, rgba(8,9,12,.55) 55%, rgba(8,9,12,0) 100%);
}

.breve {
  min-height: 100dvh; display: grid; place-content: center; justify-items: center;
  gap: clamp(48px, 9vh, 104px);
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  text-align: center;
}
.breve__logo { margin: 0; line-height: 0; }
.breve__logo img { width: clamp(150px, 13vw, 240px); height: auto; }

/* Linha central: texto | loading | texto. As duas pontas têm a mesma largura, então o loading fica
   sempre no centro exato da tela. */
.breve__linha {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(56px, 8vw, 160px); width: min(100%, 76rem);
}
.breve__texto {
  font-family: var(--fonte-texto); font-weight: 300; color: var(--ouro);
  font-size: clamp(1.125rem, 2.3vw, 2.5rem); line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
/* Como na logo: mesma cor, só o peso muda ("car" fino + "with" negrito). */
.breve__texto b { font-weight: 700; }
.breve__texto--esq { justify-self: end; }
.breve__texto--dir { justify-self: start; }

/* Loading: dois anéis concêntricos, cada um com um arco que nasce transparente e termina numa
   ponta clara (como um cometa), girando em velocidades diferentes. Dourado com brilho leve. */
.breve__loading {
  --t: clamp(52px, 4.6vw, 84px);
  --ponta: color-mix(in srgb, var(--ouro) 45%, var(--osso-forte));
  position: relative; display: block; width: var(--t); aspect-ratio: 1;
  filter: drop-shadow(0 0 5px rgba(173, 131, 47, .55)) drop-shadow(0 0 14px rgba(173, 131, 47, .25));
}
.breve__loading::before, .breve__loading i {
  content: ""; position: absolute; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(173, 131, 47, 0) 0deg, rgba(173, 131, 47, .08) 80deg,
              var(--ouro) 300deg, var(--ponta) 356deg, rgba(173, 131, 47, 0) 360deg);
}
/* anel de fora: mais grosso */
.breve__loading::before {
  inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: breve-giro 1.6s linear infinite;
}
/* anel de dentro: mais fino, mais lento e começando em outro ponto */
.breve__loading i {
  inset: 17%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: breve-giro 2.4s linear infinite; animation-delay: -1.1s;
}
@keyframes breve-giro { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .breve__linha { gap: clamp(24px, 9vw, 40px); }
  .breve__loading { --t: 50px; }
  .breve__texto { font-size: clamp(1rem, 5vw, 1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .breve__loading::before, .breve__loading i { animation: none; }
}