/*
 * Tela de carregamento ÚNICA dos apps (#mdm-splash, gerada no index.html por
 * design/logo/gerador/exportar_frontend.py). Só o index.html carrega este arquivo; a marca dentro
 * dela usa marca-animada.css. Comportamento (etapas, quando sai, demora, falha):
 * tela-de-carregamento.ts.
 *
 * Figma "Loading A/B/C" com a marca animada: a barra SÓ AVANÇA — A 35% → B 70% → C 100% — e os
 * pontos acendem por etapa (o 3º vira o check em C). Um brilho percorre a parte cheia enquanto
 * carrega. Antes do JS, a barra corre sozinha até ~30%; se o JS nunca chegar, o aviso de demora e
 * o "Tentar de novo" aparecem só com CSS.
 * A tela nasce com `hidden` e é ESTE arquivo que a exibe (`display: flex` vence o `[hidden]` do
 * navegador): sem este CSS ela fica escondida e não aparece crua no topo da página.
 */
.mdm-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--warm-sand, #fbf8f3);
  transition: opacity 0.4s ease, visibility 0.4s;
}

.mdm-splash .mxa {
  --mxa-altura: clamp(60px, 15vw, 112px);
  --mxa-solo: 1.3;
}

/* ── barra ── */
.mdm-splash__progresso {
  position: relative;
  width: min(260px, 64vw);
  height: 6px;
  margin-top: clamp(36px, 7vh, 56px);
  border-radius: 3px;
  background: var(--bone, #efe8dd);
  overflow: hidden;
}

.mdm-splash__barra {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--pearl-gold, #b98248);
  overflow: hidden;
  transform-origin: left center;
  transform: scaleX(0.05);
  /* antes do JS: corre sozinha até 30% e desacelera (o JS continua de onde ela estiver) */
  animation: mdm-splash-inicio 5s cubic-bezier(0.1, 0.6, 0.2, 1) 0.15s forwards;
}

/* brilho que percorre a parte cheia: "está trabalhando", mesmo quando a barra anda devagar */
.mdm-splash__barra::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: mdm-splash-brilho 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.6s infinite;
}

/* ── mensagens (empilhadas; o estado decide qual aparece) ── */
.mdm-splash__texto {
  display: grid;
  margin-top: 14px;
  font: 400 0.875rem / 1.4 var(--font-sans, 'Nunito Sans', system-ui, sans-serif);
  color: var(--muted-foreground, #51625f);
}

.mdm-splash__msg {
  grid-area: 1 / 1;
  text-align: center;
}

.mdm-splash__msg--lento,
.mdm-splash__msg--falhou,
.mdm-splash__msg--pronto {
  visibility: hidden;
}

.mdm-splash__msg--falhou,
.mdm-splash__msg--pronto {
  color: var(--deep-sea, #063f42);
  font-weight: 600;
}

/* ── etapas (pontos) e check: a mesma faixa (12px + 36px), a troca não desloca a tela ── */
.mdm-splash__faixa {
  display: grid;
  place-items: center;
  height: 36px;
  margin-top: 12px;
}

.mdm-splash__etapas,
.mdm-splash__check {
  grid-area: 1 / 1;
}

.mdm-splash__etapas {
  display: flex;
  gap: 12px;
}

.mdm-splash__etapas span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pearl-gold, #b98248);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* A: 1º ponto; sessão restaurada: 2º; rota pronta (B): 3º; C: o check */
.mdm-splash__etapas span:nth-child(1),
.mdm-splash:is([data-etapa='2'], [data-etapa='3'], [data-etapa='4']) .mdm-splash__etapas span:nth-child(2),
.mdm-splash:is([data-etapa='3'], [data-etapa='4']) .mdm-splash__etapas span:nth-child(3) {
  opacity: 1;
}

.mdm-splash__check {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pearl-gold, #b98248);
  visibility: hidden;
}

/* ── tentar de novo: espaço sempre reservado (sem salto quando aparece) ── */
.mdm-splash__recarregar {
  margin-top: 8px;
  padding: 10px 18px;
  border: 1px solid var(--bone, #efe8dd);
  border-radius: 999px;
  font: 700 0.75rem / 1 var(--font-sans, 'Nunito Sans', system-ui, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--deep-sea, #063f42);
  background: #ffffff;
  visibility: hidden;
}

.mdm-splash__recarregar:hover {
  border-color: var(--pearl-gold, #b98248);
}

.mdm-splash__recarregar:focus-visible {
  outline: 2px solid var(--deep-sea, #063f42);
  outline-offset: 2px;
}

.mdm-splash__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── demorando (JS em 8 s; sem JS, só CSS em 15 s) ── */
.mdm-splash--lento .mdm-splash__msg--carregando {
  visibility: hidden;
}

.mdm-splash--lento .mdm-splash__msg--lento,
.mdm-splash--lento .mdm-splash__recarregar {
  visibility: visible;
}

.mdm-splash:not(.mdm-splash--js) .mdm-splash__msg--carregando {
  animation: mdm-splash-esconde 0s 15s forwards;
}

.mdm-splash:not(.mdm-splash--js) .mdm-splash__msg--lento,
.mdm-splash:not(.mdm-splash--js) .mdm-splash__recarregar {
  animation: mdm-splash-mostra 0s 15s forwards;
}

/* ── falhou: a tela fica, com a mensagem e "Tentar de novo" ── */
.mdm-splash--falhou .mdm-splash__msg--carregando,
.mdm-splash--falhou .mdm-splash__msg--lento {
  visibility: hidden;
}

.mdm-splash--falhou .mdm-splash__msg--falhou,
.mdm-splash--falhou .mdm-splash__recarregar {
  visibility: visible;
}

.mdm-splash--falhou .mdm-splash__etapas {
  visibility: hidden;
}

.mdm-splash--falhou .mdm-splash__barra {
  background: var(--muted-foreground, #51625f);
  opacity: 0.35;
}

.mdm-splash--falhou .mdm-splash__barra::after,
.mdm-splash--pronto .mdm-splash__barra::after {
  animation: none;
  opacity: 0;
}

/* ── C: pronto (vence demora e falha) ── */
.mdm-splash--pronto .mdm-splash__msg {
  visibility: hidden;
}

.mdm-splash--pronto .mdm-splash__msg--pronto {
  visibility: visible;
}

.mdm-splash--pronto .mdm-splash__recarregar,
.mdm-splash--pronto .mdm-splash__etapas {
  visibility: hidden;
}

.mdm-splash--pronto .mdm-splash__check {
  visibility: visible;
  animation: mdm-splash-surgir 0.35s ease-out both;
}

.mdm-splash--saindo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes mdm-splash-inicio {
  from { transform: scaleX(0.05); }
  to { transform: scaleX(0.3); }
}

@keyframes mdm-splash-brilho {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes mdm-splash-surgir {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes mdm-splash-mostra {
  to { visibility: visible; }
}

@keyframes mdm-splash-esconde {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mdm-splash,
  .mdm-splash *,
  .mdm-splash *::after {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }

  /* sem corrida nem brilho: a barra só muda de etapa */
  .mdm-splash__barra {
    animation: none !important;
    transform: scaleX(0.3);
  }

  .mdm-splash__barra::after {
    display: none;
  }

  /* o aviso "só CSS" de demora continua valendo, no mesmo tempo */
  .mdm-splash:not(.mdm-splash--js) .mdm-splash__msg--carregando,
  .mdm-splash:not(.mdm-splash--js) .mdm-splash__msg--lento,
  .mdm-splash:not(.mdm-splash--js) .mdm-splash__recarregar {
    animation-delay: 15s !important;
  }
}