/* ══════════════════════════════════════════════════════════════
   eco.css — O ECO DO SISTEMA

   A tela NÃO fica preta. Fica embaçada e escura, com o que está
   atrás ainda legível. O Sistema não te tira do lugar — ele te faz
   olhar para o que você fez.

   A paleta é a da penitência: branco gélido sobre azul quase preto.
   Frio, não vermelho. Vermelho neste app significa urgência — algo
   que ainda dá para salvar. O Eco fala de algo que já aconteceu.
   ══════════════════════════════════════════════════════════════ */

.eco {
  position: fixed;
  inset: 0;
  z-index: 9998;              /* acima de tudo, abaixo do diálogo modal */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: pointer;            /* a tela inteira fecha */
  --eco-luz: #dbeafe;
  --eco-halo: #bfdbfe;
}

/* ── O VÉU ─────────────────────────────────────────────────
   `backdrop-filter` embaça o que está ATRÁS — é ele que mantém o
   cartão fracassado visível e ilegível ao mesmo tempo, que é a
   sensação certa. Onde não houver suporte, o fundo escuro sozinho
   ainda entrega o momento. */
.eco-veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(11, 18, 32, .72), rgba(3, 5, 10, .93) 70%);
  backdrop-filter: blur(3px) brightness(.38) saturate(.6);
  -webkit-backdrop-filter: blur(3px) brightness(.38) saturate(.6);
  opacity: 0;
  transition: opacity .7s ease;
}
.eco.on .eco-veu { opacity: 1; }

/* ── O CORPO ───────────────────────────────────────────────
   A frase entra DE LONGE E ESPAÇADA e se aproxima: `scale` de 1.06
   para 1 junto com `letter-spacing` de .34em para .1em. É isso que
   dá a sensação de a frase "se assentar" na tela em vez de aparecer.

   Uma transição de opacidade sozinha leria como notificação. */
.eco-corpo {
  position: relative;
  max-width: min(720px, 92vw);
  text-align: center;
  color: var(--eco-luz);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease .2s, transform 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.eco.on .eco-corpo { opacity: 1; transform: scale(1); }

.eco-marca {
  color: var(--eco-halo);
  opacity: .5;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 0 12px rgba(191, 219, 254, .35));
}
.eco.on .eco-marca { animation: eco-marca-nasce 1.6s ease-out .3s both; }
@keyframes eco-marca-nasce {
  from { opacity: 0; transform: rotate(-18deg) scale(.7); }
  to   { opacity: .5; transform: rotate(0) scale(1); }
}

/* A FRASE. `clamp` porque este é o único texto do app que precisa ser
   grande no celular E no monitor sem ajuste — foi justamente a falta
   disso que escondeu o efeito do Arquiteto por meses. */
.eco-frase {
  margin: 0;
  font-family: var(--font-title, Georgia, serif);
  font-size: clamp(1.35rem, 4.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .34em;
  text-indent: .34em;          /* compensa o espaçamento na última letra */
  color: var(--eco-luz);
  text-shadow:
    0 0 18px rgba(191, 219, 254, .45),
    0 0 46px rgba(147, 197, 253, .22);
  transition: letter-spacing 1.3s cubic-bezier(.16,1,.3,1) .2s,
              text-indent   1.3s cubic-bezier(.16,1,.3,1) .2s;
}
.eco.on .eco-frase { letter-spacing: .1em; text-indent: .1em; }

/* A RESPIRAÇÃO. Sem ela a frase parece uma imagem parada; com ela,
   parece alguém segurando o olhar. Começa depois que ela se assentou. */
.eco.on .eco-frase { animation: eco-respira 3.4s ease-in-out 2.2s infinite; }
@keyframes eco-respira {
  0%, 100% { text-shadow: 0 0 18px rgba(191,219,254,.45), 0 0 46px rgba(147,197,253,.22); }
  50%      { text-shadow: 0 0 26px rgba(191,219,254,.70), 0 0 68px rgba(147,197,253,.38); }
}

.eco-rodape {
  margin: 1.6rem 0 0;
  font-family: var(--font-section, system-ui, sans-serif);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, .42);
}

/* ── AS INTENSIDADES ───────────────────────────────────────
   O tom endurece com a dívida. A diferença é sutil de propósito:
   se fossem quatro paletas distintas, o Eco pareceria quatro
   componentes. É a MESMA voz, mais fria. */
.eco-encarando { --eco-luz: #e0f2fe; --eco-halo: #7dd3fc; }
.eco-fria      { --eco-luz: #f0f9ff; --eco-halo: #38bdf8; }
.eco-fria .eco-veu {
  background: radial-gradient(120% 90% at 50% 45%,
    rgba(8, 14, 26, .80), rgba(2, 3, 7, .96) 70%);
}
/* A quitação é a única voz que não pune — e é a única com calor. */
.eco-quitado { --eco-luz: #dcfce7; --eco-halo: #86efac; }
.eco-quitado .eco-frase { letter-spacing: .14em; }
.eco-quitado.on .eco-frase { letter-spacing: .06em; }

/* ── SAÍDA ─────────────────────────────────────────────────
   Some mais rápido do que entrou. A entrada é um evento; a saída é
   só o fim dele. */
.eco.saindo .eco-veu   { opacity: 0; transition: opacity .5s ease; }
.eco.saindo .eco-corpo {
  opacity: 0; transform: scale(.98);
  transition: opacity .4s ease, transform .5s ease;
}

/* ── ACESSIBILIDADE ────────────────────────────────────────
   Sem movimento, a frase continua. É o texto que carrega o
   significado; a animação só carrega o peso. */
@media (prefers-reduced-motion: reduce) {
  .eco-corpo, .eco-frase, .eco-veu, .eco-marca,
  .eco.saindo .eco-corpo, .eco.saindo .eco-veu { transition: none; animation: none; }
  .eco-corpo { transform: none; }
  .eco-frase { letter-spacing: .1em; text-indent: .1em; }
  .eco.on .eco-corpo, .eco.on .eco-veu { opacity: 1; }
}

/* ── CELULAR ───────────────────────────────────────────────
   Mesma coreografia, respiro menor. O `clamp` da frase já cuidou do
   tamanho — aqui só o espaço em volta. */
@media (max-width: 520px) {
  .eco { padding: 1.25rem; }
  .eco-marca { margin-bottom: 1rem; }
  .eco-marca svg { width: 38px; height: 38px; }
  .eco-frase { letter-spacing: .26em; text-indent: .26em; }
  .eco.on .eco-frase { letter-spacing: .07em; text-indent: .07em; }
}