/* ─────────────────────────────────────────────────────────────
   animacoes.css — camada de movimento da raspadinha Visitplann
   Carregar DEPOIS de style.css. Só anima transform / opacity.
   Keyframes com prefixo vp- para não colidir com style.css.
   Nota: as entradas usam keyframes só com "from" + fill "backwards",
   por isso o estado final é sempre o do style.css (nada fica
   preso a opacity 0 se as animações forem desligadas).
   ───────────────────────────────────────────────────────────── */

:root {
  --vp-mola: cubic-bezier(.2, 1.45, .4, 1);
  --vp-suave: cubic-bezier(.22, .8, .25, 1);
}

/* ═══ 1. Fundo: brilho amarelo ambiente a derivar ═════════════ */
body::before {
  content: "";
  position: fixed;
  left: -25%;
  top: -12vh;
  width: 150%;
  height: 62vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(251, 223, 20, .13), rgba(251, 223, 20, 0) 70%);
  animation: vp-deriva 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes vp-deriva {
  0%   { transform: translate3d(-7%, 0, 0) scale(1);      opacity: .55; }
  50%  { transform: translate3d(3%, 3vh, 0) scale(1.12);  opacity: 1; }
  100% { transform: translate3d(8%, -1vh, 0) scale(1.04); opacity: .7; }
}

/* ═══ 2. Entrada escalonada da página ═════════════════════════ */
@keyframes vp-descer {
  from { transform: translateY(-14px) scale(.94); opacity: 0; }
}

@keyframes vp-subir {
  from { transform: translateY(18px); opacity: 0; }
}

@keyframes vp-titulo {
  from { transform: translateY(26px) scale(.96); opacity: 0; }
}

@keyframes vp-aparecer {
  from { opacity: 0; }
}

/* só translate + opacity: não altera o tamanho medido pelo canvas no arranque */
@keyframes vp-bilhete-entrar {
  from { transform: translateY(44px); opacity: 0; }
}

.marca { animation: vp-descer .6s var(--vp-mola) .05s backwards; }

#titulo-base { animation: vp-titulo .65s var(--vp-suave) .15s backwards; }

.cabecalho .destaque {
  position: relative;
  isolation: isolate;
  animation: vp-titulo .75s var(--vp-mola) .28s backwards;
}

.cabecalho p { animation: vp-subir .6s var(--vp-suave) .45s backwards; }

.revelar {
  animation: vp-aparecer .8s ease 1.3s backwards;
  transition: opacity .2s, transform .15s var(--vp-suave);
}

.revelar:active { opacity: 1; transform: scale(.96); }

/* ═══ 3. Vida antes de raspar ═════════════════════════════════ */

/* brilho a respirar por trás do destaque amarelo do título */
.cabecalho .destaque::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 170%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(251, 223, 20, .30), rgba(251, 223, 20, 0));
  transform: translate(-50%, -50%);
  animation: vp-respirar 4.6s ease-in-out 1s infinite backwards;
}

@keyframes vp-respirar {
  0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: .35; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* bilhete: entrada em mola + flutuar muito leve (≤ 2.5px, ≤ .35°) */
.bilhete {
  animation:
    vp-bilhete-entrar .85s var(--vp-mola) .5s backwards,
    vp-flutuar 7s ease-in-out 1.6s infinite;
}

/* nunca se mexe enquanto está a ser tocado */
.bilhete:active { animation-play-state: paused; }

@keyframes vp-flutuar {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-2.5px) rotate(.35deg); }
  70%      { transform: translateY(1.5px) rotate(-.3deg); }
}

/* aura do bilhete (pseudo-elemento: só opacity, sem animar box-shadow) */
.bilhete::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(251, 223, 20, .50), 0 0 18px rgba(251, 223, 20, .35);
  opacity: 0;
}

/* moldura tracejada: segundo tracejado mais vivo a pulsar por cima */
.moldura { position: relative; }

.moldura::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  border: 1.5px dashed var(--yellow);
  pointer-events: none;
  opacity: 0;
  animation: vp-moldura 2.8s ease-in-out 1.4s infinite;
}

@keyframes vp-moldura {
  0%, 100% { opacity: 0; }
  50%      { opacity: .85; }
}

/* (o reflexo da folha é desenhado no canvas, em app.js, para só tocar na parte por raspar) */

/* dica "Raspa com o dedo" a chamar a atenção */
#dica { animation: vp-dica 2.6s ease-in-out 1.8s infinite; }

@keyframes vp-dica {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* depois de revelado: acabou a vida "em espera" */
.bilhete.ganhou .moldura::after,
.bilhete.perdeu .moldura::after { animation: none; opacity: 0; }

.bilhete.ganhou .moldura::after { opacity: .9; transition: opacity .5s; }

.bilhete.perdeu #dica { animation: none; }

/* ═══ 4. Ganhou ═══════════════════════════════════════════════ */

/* (a entrada mantém-se na lista para não recomeçar nem saltar) */
.bilhete.ganhou {
  animation: vp-bilhete-entrar .85s var(--vp-mola) .5s backwards;
}

/* com festa (acabou de raspar): salto de celebração */
.bilhete.ganhou:has(.resultado.festa) {
  animation:
    vp-bilhete-entrar .85s var(--vp-mola) .5s backwards,
    vp-pop .9s var(--vp-suave) both;
}

@keyframes vp-pop {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.055) rotate(-1.2deg); }
  48%  { transform: scale(.982) rotate(.8deg); }
  72%  { transform: scale(1.012) rotate(-.3deg); }
  100% { transform: none; }
}

.bilhete.ganhou::after { animation: vp-aura 1.8s ease-in-out infinite; }

@keyframes vp-aura {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

/* raios: aparecem em explosão e rodam mais depressa */
.bilhete.ganhou .resultado::before {
  animation:
    vp-rodar 16s linear infinite,
    vp-raios-abrir .9s var(--vp-suave) backwards;
}

@keyframes vp-rodar {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes vp-raios-abrir {
  from { opacity: 0; }
}

/* clarão central a pulsar */
.bilhete.ganhou .resultado::after { animation: vp-clarao 2.4s ease-in-out infinite; }

@keyframes vp-clarao {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

/* emoji: fica a abanar; com festa, salta primeiro */
.bilhete.ganhou .resultado-emoji {
  animation: vp-abanar 2.6s ease-in-out infinite;
}

.bilhete .resultado.festa .resultado-emoji {
  animation:
    vp-saltar .95s var(--vp-mola) both,
    vp-abanar 2.6s ease-in-out .95s infinite;
}

@keyframes vp-saltar {
  0%   { transform: scale(.15) rotate(-30deg); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: scale(1.22) rotate(10deg) translateY(-8px); }
  78%  { transform: scale(.94) rotate(-4deg); }
  100% { transform: none; }
}

@keyframes vp-abanar {
  0%, 100% { transform: none; }
  25%      { transform: rotate(-7deg) translateY(-3px) scale(1.04); }
  50%      { transform: rotate(0deg) translateY(0); }
  75%      { transform: rotate(7deg) translateY(-3px) scale(1.04); }
}

.bilhete .resultado.festa .resultado-etiqueta { animation: vp-etiqueta .55s var(--vp-mola) .3s both; }
.bilhete .resultado.festa .resultado-nome     { animation: vp-nome .6s var(--vp-mola) .45s both; }

@keyframes vp-etiqueta {
  from { transform: translateY(12px) scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes vp-nome {
  from { transform: translateY(18px) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.bilhete.ganhou #dica { animation: vp-subir .5s var(--vp-mola) .2s backwards; }

/* mensagem final com destaque */
.bilhete.ganhou ~ .mensagem { position: relative; }

.bilhete.ganhou ~ .mensagem.visivel {
  animation: vp-mensagem .75s var(--vp-mola) .55s backwards;
}

@keyframes vp-mensagem {
  from { transform: translateY(16px) scale(.88); opacity: 0; }
}

.bilhete.ganhou ~ .mensagem.visivel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 56px;
  height: 3px;
  margin-left: -28px;
  border-radius: 3px;
  background: var(--yellow);
  pointer-events: none;
  animation: vp-sublinhar .6s var(--vp-suave) 1.05s backwards;
}

@keyframes vp-sublinhar {
  from { transform: scaleX(0); opacity: 0; }
}

/* ═══ 5. Não ganhou: suave e simpático ════════════════════════ */
.bilhete.perdeu {
  animation:
    vp-bilhete-entrar .85s var(--vp-mola) .5s backwards,
    vp-assentar .9s var(--vp-suave) 1;
}

@keyframes vp-assentar {
  0%   { transform: none; }
  20%  { transform: translateY(3px) rotate(-.7deg); }
  45%  { transform: translateY(-1.5px) rotate(.5deg); }
  70%  { transform: translateY(.5px) rotate(-.2deg); }
  100% { transform: none; }
}

.bilhete.perdeu .resultado-emoji {
  transform-origin: 50% 85%;
  animation: vp-baloicar 4.2s ease-in-out infinite;
}

@keyframes vp-baloicar {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.bilhete.perdeu ~ .mensagem.visivel {
  animation: vp-subir .8s var(--vp-suave) .5s backwards;
}

/* ═══ 6. Bloco da app (aparece depois de revelar) ═════════════ */
#bilhete.ganhou ~ .app,
#bilhete.perdeu ~ .app {
  animation: vp-subir .7s var(--vp-suave) 1.1s backwards;
}

#bilhete.ganhou ~ .app .loja,
#bilhete.perdeu ~ .app .loja {
  animation: vp-subir .6s var(--vp-mola) 1.3s backwards;
}

#bilhete.ganhou ~ .app .loja + .loja,
#bilhete.perdeu ~ .app .loja + .loja { animation-delay: 1.42s; }

.loja { transition: transform .18s var(--vp-suave), opacity .18s; }

@media (hover: hover) {
  .loja:hover { transform: translateY(-2px); }
}

.loja:active { transform: scale(.96); opacity: .9; }

/* ═══ 7. Menos movimento ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; }

  body::before { opacity: .7; }
  .cabecalho .destaque::before { opacity: .6; }
  .bilhete.ganhou::after { opacity: .7; }
  .loja, .revelar { transition: none; }
  .loja:hover, .loja:active, .revelar:active { transform: none; }
}