/* Animações e transições da CRIVÊ.
   Regra da casa: todo movimento definido aqui precisa ser desligado pelo
   bloco de prefers-reduced-motion no final do arquivo. */

/* ---- Cursor global ---- */

.tem-cursor-custom,
.tem-cursor-custom a,
.tem-cursor-custom button { cursor: none; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: width var(--dur) var(--curva),
              height var(--dur) var(--curva),
              background var(--dur) var(--curva),
              opacity 0.3s linear;
  will-change: transform;
}

/* padrão — ponto dourado */
.cursor[data-estado='padrao'],
.cursor:not([data-estado]) {
  width: 14px;
  height: 14px;
  background: var(--cr-gold);
}

/* magnetic — o cursor encolhe e cede o palco ao botão */
.cursor[data-estado='magnetic'] {
  width: 46px;
  height: 46px;
  background: rgba(201, 162, 39, 0.28);
  border: 1px solid var(--cr-gold);
}

/* O botão atraído pelo cursor */
.is-magnetico { transition: transform 0.35s var(--curva), background var(--dur) var(--curva); }
.botao.is-magnetico { background: var(--cr-gold); color: var(--cr-brown); }

/* Seleções: a linha inteira responde ao ponteiro. */
.selecao { transition: background var(--dur) var(--curva); }
a.selecao:hover { background: var(--cr-cream-10); }
.selecao__seta { transition: transform var(--dur) var(--curva); }
a.selecao:hover .selecao__seta { transform: translateX(6px); }

/* Quedas de preço: a linha inteira é o alvo, como nas seleções. O selo
   dourado não muda — ele já é o ponto mais forte da linha. */
.destaque__miolo { transition: background var(--dur) var(--curva); }
.destaque:hover .destaque__miolo,
.destaque:focus-visible .destaque__miolo {
  background: var(--cr-cream-10);
  border-radius: 8px;
}

/* ---- Entrada no scroll ----

   O seletor .js é a trava de segurança: sem JavaScript o conteúdo nunca
   chega a ser escondido, então nada depende da animação para aparecer. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.js [data-revelar].is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}