/* Estados de hover e animações compartilhados.
   Os estilos base ficam inline em cada página (fidelidade ao handoff),
   por isso os hovers usam !important para vencer a especificidade do inline. */

.btn-red:hover      { background: #c81a1a !important; }
.btn-blue:hover     { background: #0f62c9 !important; }
.btn-purple:hover   { background: #6f0c6f !important; }
.faq-head:hover     { background: #e0ecff !important; }
.tile-grey:hover    { background: #dcdcdc !important; }
.tile-white:hover   { background: #f0e6f5 !important; color: #8a0f8a !important; }
.zodiac-tile:hover  { border-color: #8a0f8a !important; }
.back-btn:hover     { color: #8a0f8a !important; }
.play-btn:hover     { background: rgba(0, 0, 0, 0.75) !important; }

@keyframes moonspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Luna "digitando", os três pontos antes da fala aparecer */
@keyframes lunaDot {
  0%, 80%, 100% { opacity: 0.22; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}
.luna-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: #6B2D8F;
  animation: lunaDot 1.1s infinite ease-in-out;
}
.luna-dot:nth-child(2) { animation-delay: 0.18s; }
.luna-dot:nth-child(3) { animation-delay: 0.36s; }

/* Carrossel contínuo dos sketches na home. A faixa tem duas cópias do conjunto,
   por isso -50% fecha o ciclo sem emenda visível. Em movimento e em tamanho
   pequeno o olho não consegue examinar detalhe de IA. */
@keyframes sketchScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sketch-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: sketchScroll 26s linear infinite;
}
.sketch-track img {
  width: 124px;
  aspect-ratio: 650 / 972;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #fff;
  padding: 4px;
  box-sizing: border-box;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  flex: 0 0 auto;
}
/* Esteira das fotos de casal. Mesmo princípio da dos sketches: em movimento e
   em tamanho pequeno o olho não examina detalhe. */
.proof-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: sketchScroll 34s linear infinite;
}
.proof-track img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 2px 9px rgba(120, 90, 60, 0.2);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .sketch-track, .proof-track, .round-track { animation: none; }
}

/* Esteira redonda da tela de abertura do quiz.

   Alterna rosto de casal e desenho, no mesmo formato circular, para os dois
   lerem como uma coisa so: gente. Redondo e pequeno tambem resolve um
   problema pratico, o olho nao para em nenhum rosto tempo suficiente para
   examinar detalhe de imagem gerada.

   Mesma mecanica das outras esteiras: duas copias do conjunto e -50% no fim,
   entao o ciclo fecha sem emenda e sem salto. */
.round-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: sketchScroll 30s linear infinite;
}
.round-track img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  background: #efe7dc;
  border: 2px solid #fff;
  box-shadow: 0 2px 9px rgba(120, 90, 60, 0.22);
}

/* As bordas somem nas pontas para a esteira parecer continuar fora da tela,
   em vez de ser cortada por uma linha reta. */
.round-fade {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

@keyframes lunaIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.luna-said { animation: lunaIn 0.28s ease-out; }