/* ==========================================================================
   06 — ENTREGA FINAL DA DRA. GIULIANE
   Carrega DEPOIS do 04-interacoes.css, porque este redeclara variáveis de
   cor e o hover dos cartões.

   Duas coisas moram aqui:
     1. os cartões passam a se mexer sozinhos, o tempo todo;
     2. o cartão e o botão de avaliação no Google Meu Negócio.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CARTÕES QUE SE MEXEM SOZINHOS

   A regra da versão Alegre já usa `transform` para a inclinação de cada
   cartão (--tb) e para o giro 3D do hover. Se a flutuação também usasse
   `transform`, uma das duas sumiria — a última declaração venceria.

   Por isso a flutuação usa `translate:`, que é propriedade INDEPENDENTE:
   as duas se compõem, e o hover continua funcionando por cima. É o mesmo
   caminho usado nos cartões de equipe do projeto.

   Os tempos são propositalmente quebrados (5,6s / 6,4s / 7,1s) e os atrasos
   são negativos, para que os cartões não subam e desçam em bloco, como um
   acordeão. Cada um entra em um ponto diferente do ciclo.
   -------------------------------------------------------------------------- */
/* São DUAS animações por cartão, e é de propósito que sejam duas:

   gFlutua  — o sobe-e-desce. Usa `translate:`.
   gDeita   — a entortada 3D, aquela que antes só aparecia no hover, agora
              ligada o tempo todo. Usa `transform:`.

   Elas mexem em propriedades DIFERENTES, então convivem sem se anular.
   Se as duas usassem `transform`, a segunda apagaria a primeira.

   O `rotate(var(--tb))` tem que estar dentro do keyframe: é a inclinação
   fixa que cada cartão já tinha (-1deg, 1deg ou 0). Sem ele aqui, a
   animação apagaria essa inclinação.

   E `var(--ty, 0px)` com valor de reserva porque as molduras (.a-mold) não
   declaram --ty. Sem a reserva, o transform inteiro vira inválido e o
   cartão fica reto. */
@keyframes gFlutua {
  0%, 100% { translate: 0 0 }
  50%      { translate: 0 -8px }
}
@keyframes gFlutuaCurto {
  0%, 100% { translate: 0 0 }
  50%      { translate: 0 -5px }
}
@keyframes gDeita {
  0%, 100% { transform: perspective(900px) translateY(var(--ty, 0px)) rotate(var(--tb, 0deg)) rotate3d(.5, 1, 0, 4deg) }
  50%      { transform: perspective(900px) translateY(var(--ty, 0px)) rotate(var(--tb, 0deg)) rotate3d(.5, 1, 0, 10deg) }
}
/* Os pares deitam para o outro lado, exatamente como já faziam no hover. */
@keyframes gDeitaPar {
  0%, 100% { transform: perspective(900px) translateY(var(--ty, 0px)) rotate(var(--tb, 0deg)) rotate3d(-.5, 1, 0, -4deg) }
  50%      { transform: perspective(900px) translateY(var(--ty, 0px)) rotate(var(--tb, 0deg)) rotate3d(-.5, 1, 0, -10deg) }
}

/* Os blocos que já se mexiam no hover são exatamente estes três: os
   cartões dos sinais (.a-card), as molduras numeradas da seção "como
   funciona" (.a-grid .a-mold) e o cartão novo de avaliação (.g-card).
   Todos passam a flutuar E a deitar sozinhos. */
#site-a .a-card,
#site-a .a-grid .a-mold,
#site-a .g-card {
  animation: gFlutua 5.6s ease-in-out infinite,
             gDeita  7.3s ease-in-out infinite;
  will-change: translate, transform;
}

#site-a .a-card:nth-child(even),
#site-a .a-grid .a-mold:nth-child(even) { animation-name: gFlutua, gDeitaPar }

/* Ritmos diferentes por posição, e a entortada num compasso diferente do
   sobe-e-desce. Sem isso os cartões da mesma grade se mexem em bloco, como
   um acordeão, e o efeito denuncia que é animação. */
#site-a .a-card:nth-child(3n+2),
#site-a .a-grid .a-mold:nth-child(3n+2) {
  animation-duration: 6.4s, 8.1s;
  animation-delay: -1.7s, -2.9s;
}
#site-a .a-card:nth-child(3n+3),
#site-a .a-grid .a-mold:nth-child(3n+3) {
  animation-duration: 7.1s, 9.2s;
  animation-delay: -3.4s, -5.1s;
}
#site-a .a-card:nth-child(4n+4) {
  animation-duration: 6.0s, 8.6s;
  animation-delay: -2.6s, -4.3s;
}

/* As molduras sobem menos: são blocos maiores e altos, e o mesmo curso de
   8px nelas fica exagerado. Só o sobe-e-desce muda; a entortada continua. */
#site-a .a-grid .a-mold { animation-name: gFlutuaCurto, gDeita }
#site-a .a-grid .a-mold:nth-child(even) { animation-name: gFlutuaCurto, gDeitaPar }

/* NO HOVER a animação é DESLIGADA, não pausada.

   Animação em curso vence declaração comum na cascata: com ela rodando, o
   `transform` do :hover que já existe no 02-versao-a-alegre.css nunca
   apareceria. `animation: none` devolve a propriedade para o CSS, e aí o
   :hover entra — suavizado pelo `transition:transform .5s` que o cartão já
   tinha. O hover continua sendo um degrau acima: deita mais (12deg) e sobe
   os 4px. */
@media (hover: hover) and (pointer: fine) {
  #site-a .a-card:hover,
  #site-a .a-grid .a-mold:hover,
  #site-a .g-card.on:hover { animation: none }
}

/* Acessibilidade: quem pede menos movimento no sistema não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
  #site-a .a-card,
  #site-a .a-grid .a-mold,
  #site-a .g-card,
  #site-a .g-btn { animation: none !important }
}

/* O reveal usa translateY para a entrada. Enquanto o bloco ainda não
   apareceu (.rv sem .on), a flutuação fica desligada, senão as duas
   brigam durante a entrada. */
#site-a .a-card.rv:not(.on),
#site-a .a-grid .a-mold.rv:not(.on),
#site-a .g-card.rv:not(.on) { animation: none }


/* --------------------------------------------------------------------------
   2. CARTÃO E BOTÃO DE AVALIAÇÃO NO GOOGLE

   O botão segue o desenho que o Higor mandou (fundo branco, logo colorido
   do Google, borda fina, cresce um pouco no hover), só que GRANDE: fonte,
   altura e ícone maiores, e ocupando a largura do cartão no celular.
   -------------------------------------------------------------------------- */
/* ATENÇÃO ao transform aqui. Este cartão tem a classe .rv, e o reveal
   (05-reveal.css) faz a entrada dele com `transform:translateY(24px)` ->
   `transform:none`. Uma regra de transform na base deste seletor tem
   especificidade maior que a do reveal e MATA a entrada: o cartão apareceria
   seco, sem subir e sem aparecer aos poucos.

   Por isso a base não declara transform nenhum — quem manda ali é o reveal.
   O transform só entra no :hover, que por definição só acontece depois que
   o cartão já apareceu. */
#site-a .g-card {
  background: #fff;
  border: var(--borda) solid var(--tinta);
  border-radius: var(--raio);
  overflow: hidden;
  transition: opacity .6s ease-out, transform .6s ease-out, box-shadow .3s ease;
}

/* Depois que entrou, a transição encurta, senão o hover fica pastoso. */
#site-a .g-card.on {
  transition: transform .5s ease-in-out, box-shadow .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  #site-a .g-card.on:hover {
    transform: perspective(900px) translateY(-4px) rotate3d(.5, 1, 0, 6deg);
  }
}

#site-a .g-card__f { height: 10px }

#site-a .g-card__c {
  padding: 34px 30px 36px;
  text-align: center;
}

#site-a .g-estrelas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  color: #FBBC05;
}
#site-a .g-estrelas svg { width: 30px; height: 30px }

#site-a .g-card__p {
  margin: 0 auto 28px;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.55;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* O botão. O desenho é o do Higor; o que mudou foi o tamanho. */
#site-a .g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  padding: 1.05rem 2.2rem;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  vertical-align: middle;
  border-radius: .75rem;
  border: 1px solid rgba(0, 0, 0, .25);
  color: rgb(65, 63, 63);
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  transition: all .6s ease;
}

#site-a .g-btn svg { height: 30px; width: 30px; flex: none }

@media (hover: hover) and (pointer: fine) {
  #site-a .g-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  }
}
#site-a .g-btn:active { transform: scale(.99) }

/* No celular o botão ocupa a largura toda: alvo de toque maior e nada de
   texto espremido em duas linhas. */
@media (max-width: 560px) {
  #site-a .g-card__c { padding: 28px 20px 30px }
  #site-a .g-btn {
    display: flex;
    width: 100%;
    padding: 1.05rem 1rem;
    font-size: .98rem;
  }
  #site-a .g-estrelas svg { width: 26px; height: 26px }
  #site-a .g-card__p { font-size: 16px }
}