.vitrine-signos__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-lg);
}

.roda-zodiacal {
  --roda: clamp(288px, 86vw, 440px);
  position: relative;
  width: var(--roda);
  height: var(--roda);
  margin-inline: auto;
}

/* Poeira estelar presa a roda: e o adensamento local que o campo global do
   body::after nao da. Fica dentro do container da roda, entao acompanha o
   tamanho dela e some junto quando a fase-landing e recolhida. */
.roda-zodiacal__poeira {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  opacity: 0.5;
  pointer-events: none;
}

.roda-zodiacal__constelacao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--cor-borda-forte);
  stroke-width: 0.5;
  opacity: 0.32;
}

.roda-zodiacal__constelacao circle {
  fill: var(--cor-borda-forte);
  stroke: none;
}


/* O retrato ocupa o centro geometrico. Ele carrega `translate(-50%,-50%)`,
   entao nada de animacao pode tocar o transform DELE: quem anima e a <img>
   de dentro. E a mesma regra que ja vale para o .roda-zodiacal__item. */
.roda-zodiacal__retrato {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--roda) * 0.68);
  height: calc(var(--roda) * 0.68);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--cor-borda-forte);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(201, 162, 75, 0.16);
}

.roda-zodiacal__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.composicao-astral .autoridade__citacao {
  margin-top: var(--espaco-xl);
}

.roda-zodiacal__lista {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roda-zodiacal__item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--sx) * var(--roda) * 0.435), calc(var(--sy) * var(--roda) * 0.435));
}

.roda-zodiacal .medalhao {
  --medalhao-tamanho: calc(var(--roda) * 0.13);
  --medalhao-marca: 2px;
}

.revelacao {
  text-align: center;
}

.revelacao__mensagem {
  min-height: 3.2em;
  font-family: var(--fonte-display);
  font-size: var(--texto-md);
  line-height: 1.5;
  color: var(--cor-texto);
  opacity: 1;
  transition: opacity 320ms var(--curva-entrada);
}

.revelacao__mensagem[data-trocando='true'] {
  opacity: 0;
}

.revelacao__palco {
  display: grid;
  place-items: center;
  min-height: clamp(190px, 46vw, 260px);
  margin-top: var(--espaco-md);
}

/* O medalhao existe desde o primeiro quadro, vazio, e nao aparece so na hora
   do reveal. Antes o palco ficava em branco pelos primeiros segundos e a
   pessoa via um circulo sem nada dentro. Vazio porem presente telegrafa que
   algo vai surgir ali; vazio e ausente parece tela quebrada. */
.revelacao__signo {
  display: grid;
  justify-items: center;
  gap: var(--espaco-xs);
}

/* Enquanto nao revelou, o selo e o nome ficam apagados. Sao tres fases:
   'lendo' com o retrato, 'girando' com a roleta, 'revelado' no fim. As duas
   primeiras escondem a resposta; so a terceira mostra. */
.revelacao:not([data-fase='revelado']) .revelacao__selo,
.revelacao:not([data-fase='revelado']) .revelacao__nome {
  opacity: 0;
}

/* O retrato da Belize ocupa o medalhao enquanto ela "le". As particulas
   convergem para o rosto dela em vez de para um vazio. No inicio da roleta a
   fase vira 'girando' e a opacidade cai: o rosto sai enquanto o primeiro
   simbolo entra, e o cruzamento e o crossfade. */
.revelacao__belize {
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 260ms var(--curva-entrada);
}

.revelacao[data-fase='lendo'] .revelacao__belize {
  opacity: 1;
}

.revelacao__selo,
.revelacao__nome {
  opacity: 1;
  transition: opacity 320ms var(--curva-entrada);
}

.revelacao__nome {
  min-height: 1.2em;
}

.revelacao__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.revelacao__icone {
  position: relative;
  display: grid;
  place-items: center;
}

.revelacao .medalhao__simbolo {
  z-index: 3;
}


/* O medalhao da revelacao respira mais forte que o da vitrine. La sao doze
   competindo por atencao e o efeito precisa ser discreto; aqui e o unico
   elemento em foco, e discricao vira imobilidade. */
.revelacao[data-fase='lendo'] .medalhao::after {
  animation: pulso-revelacao 1.7s ease-in-out infinite;
}

.convergencia {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: var(--cor-acento);
  box-shadow: 0 0 6px 1px rgba(201, 162, 75, 0.7);
  opacity: 0;
  pointer-events: none;
  animation: convergir 2.7s ease-in infinite;
}

/* Quando o signo trava, as particulas param: elas anunciavam processo, e o
   processo acabou. Deixar rodando faria a tela dizer que ainda esta lendo. */
.revelacao[data-fase='revelado'] .convergencia {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .convergencia {
    animation: none;
    opacity: 0;
  }

  .revelacao[data-fase='lendo'] .medalhao::after {
    animation: none;
  }

  /* Sem crossfade e sem retrato: o icone final aparece direto. */
  .revelacao__belize,
  .revelacao[data-fase='lendo'] .revelacao__belize {
    transition: none;
    opacity: 0;
  }
}

.revelacao__nome {
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  color: var(--cor-texto);
}

.revelacao__rodape {
  display: grid;
  justify-items: center;
  gap: var(--espaco-sm);
  max-width: 22rem;
  margin: var(--espaco-md) auto 0;
}

.teaser {
  text-align: center;
}

.teaser__titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  line-height: 1.35;
  color: var(--cor-texto);
  margin-top: var(--espaco-xs);
}

.teaser__tensao {
  font-size: var(--texto-base);
  line-height: 1.7;
  color: var(--cor-texto-suave);
  max-width: 34rem;
  margin: var(--espaco-md) auto 0;
}

.teaser__tensao:empty {
  display: none;
}

.teaser__oculto {
  position: relative;
  margin-top: var(--espaco-lg);
  border-radius: var(--raio-sm);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
}

.marca-signo {
  color: var(--cor-acento);
  font-style: italic;
  white-space: nowrap;
}

.teaser__amostra {
  position: relative;
  z-index: 2;
  padding: 0.55rem var(--espaco-md);
  font-size: var(--texto-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cor-texto-tenue);
  background: rgba(18, 14, 11, 0.72);
  border-bottom: 1px solid var(--cor-borda);
}

.teaser__borrado {
  padding: var(--espaco-md);
  font-size: var(--texto-base);
  line-height: 1.7;
  color: var(--cor-texto-suave);
  text-align: left;
  filter: blur(6px);
  -webkit-filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.teaser__sombra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 14, 11, 0.1) 0%, rgba(18, 14, 11, 0.72) 62%, rgba(18, 14, 11, 0.97) 100%);
}

.teaser__marca {
  position: absolute;
  left: 50%;
  bottom: var(--espaco-sm);
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

.teaser__marca-topo {
  font-size: var(--texto-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.teaser__marca-baixo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-sm);
  letter-spacing: 0.1em;
  color: var(--cor-acento);
}

/* A ponte entre a tensao do signo (que nao depende de area) e a parte paga
   (que depende). E a primeira frase que fala da area escolhida, e por isso
   vem DEPOIS da tensao, nunca no selo de cima. */
.teaser__ponte {
  margin-top: var(--espaco-md);
  font-size: var(--texto-base);
  line-height: 1.6;
  color: var(--cor-texto);
}

/* O fecho do teaser. Ja teve um contador de reserva de dez minutos aqui,
   removido: a leitura continuava disponivel depois de zerar, entao era
   escassez sem consequencia. Nao reintroduzir contador nem substituto. */
.teaser__fecho {
  margin-top: var(--espaco-lg);
  padding: var(--espaco-md) var(--espaco-sm) var(--espaco-sm);
  border-radius: var(--raio-sm);
  background: rgba(18, 14, 11, 0.55);
  border-top: 1px solid var(--cor-borda);
}

.teaser__guardada {
  margin-top: var(--espaco-sm);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.teaser__urgencia {
  font-size: var(--texto-base);
  line-height: 1.6;
  color: var(--cor-texto);
  max-width: 30rem;
  margin-inline: auto;
}

.continuar {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  margin: var(--espaco-md) auto 0;
  padding: 0.4rem 0.9rem;
  background: none;
  border: 0;
  color: var(--cor-texto-tenue);
  cursor: pointer;
  font-family: var(--fonte-corpo);
}

.continuar__rotulo {
  font-size: var(--texto-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.continuar__seta {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--cor-acento);
  animation: bounce-continuar 1.9s ease-in-out infinite;
}

.continuar__seta svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .continuar__seta {
    animation: none;
  }
}

.medalhao {
  --medalhao-tamanho: var(--tamanho-signo, 56px);
  --medalhao-marca: 2px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--medalhao-tamanho);
  height: var(--medalhao-tamanho);
  border-radius: 50%;
  background: #1A1410;
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-acento);
}

.medalhao::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(201, 162, 75, 0.26) 0%, rgba(201, 162, 75, 0.08) 46%, transparent 72%);
  pointer-events: none;
}

.medalhao::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 12px 1px rgba(201, 162, 75, 0.42), inset 0 0 8px rgba(201, 162, 75, 0.22);
  opacity: 0.35;
  animation: respiro-medalhao 2.8s ease-in-out infinite;
}

.medalhao__marcas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--medalhao-marca);
  height: var(--medalhao-marca);
  margin: calc(var(--medalhao-marca) / -2);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  box-shadow:
    0 calc(var(--medalhao-tamanho) / -2) 0 0 var(--cor-acento),
    0 calc(var(--medalhao-tamanho) / 2) 0 0 var(--cor-acento),
    calc(var(--medalhao-tamanho) / -2) 0 0 0 var(--cor-acento),
    calc(var(--medalhao-tamanho) / 2) 0 0 0 var(--cor-acento);
}

.medalhao__simbolo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58%;
  height: 58%;
}

.medalhao__simbolo svg {
  width: 100%;
  height: 100%;
}

.medalhao[data-climax='true']::after {
  opacity: 1;
  animation: none;
  box-shadow: 0 0 26px 4px rgba(201, 162, 75, 0.85), inset 0 0 14px rgba(201, 162, 75, 0.5);
}

.revelacao__icone .medalhao {
  --medalhao-tamanho: clamp(112px, 30vw, 156px);
  --medalhao-marca: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .medalhao::after {
    animation: none;
    opacity: 0.35;
  }
}