/* Corações e reações decorativas — usado apenas por index.html.
   O comportamento (quando surgem, onde, qual trajetória) vive em
   coracoes.js; aqui fica só a aparência. Opacidade de pico do fundo chega
   já resolvida pra o tema ativo (--opacidade) — claro e escuro têm
   intensidades diferentes, nunca o mesmo valor repetido. O coração do
   fundo e o da comemoração são a mesma imagem (assets/img/reacao-coracao.png,
   o badge de "curtir" do Instagram); o do clique nos CTAs continua sendo
   o ícone da fonte, à parte. */

.reacao {
    display: block;
    pointer-events: none;
}

/* ---------- Fundo: reações ocasionais pela página inteira ---------- */
.coracoes-fundo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.reacao-fundo {
    position: absolute;
    opacity: 0;
    line-height: 1;
    will-change: transform, opacity;
}

/* Sobem, como a maioria das reações de uma live */
.reacao-sobe { animation: reacao-sobe var(--duracao, 11s) ease-in forwards; }
@keyframes reacao-sobe {
    0% { opacity: 0; transform: translate(0, 0) rotate(var(--rotacao, 0deg)); }
    12% { opacity: var(--opacidade, .16); }
    78% { opacity: var(--opacidade, .16); }
    100% { opacity: 0; transform: translate(var(--deriva, 24px), -120vh) rotate(var(--rotacao, 0deg)); }
}
/* Flutuam devagar, quase no lugar, como se estivessem boiando */
.reacao-flutua { animation: reacao-flutua var(--duracao, 14s) ease-in-out forwards; }
@keyframes reacao-flutua {
    0% { opacity: 0; transform: translate(0, 0) rotate(var(--rotacao, 0deg)); }
    10% { opacity: var(--opacidade, .16); }
    30% { transform: translate(var(--deriva, 18px), -8vh) rotate(var(--rotacao, 0deg)); }
    50% { transform: translate(calc(var(--deriva, 18px) * -1), -15vh) rotate(var(--rotacao, 0deg)); }
    70% { transform: translate(var(--deriva, 18px), -22vh) rotate(var(--rotacao, 0deg)); }
    88% { opacity: var(--opacidade, .16); }
    100% { opacity: 0; transform: translate(0, -30vh) rotate(var(--rotacao, 0deg)); }
}
/* Caem bem devagar — a exceção, pra não ficar tudo subindo igual */
.reacao-cai { animation: reacao-cai var(--duracao, 13s) ease-in forwards; }
@keyframes reacao-cai {
    0% { opacity: 0; transform: translate(0, 0) rotate(var(--rotacao, 0deg)); }
    12% { opacity: var(--opacidade, .16); }
    78% { opacity: var(--opacidade, .16); }
    100% { opacity: 0; transform: translate(var(--deriva, 24px), 120vh) rotate(var(--rotacao, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .coracoes-fundo { display: none; }
}

/* ---------- Clique: feedback imediato no próprio botão ---------- */
@keyframes coracao-feedback-botao {
    0% { transform: scale(1); }
    35% { transform: scale(.96); }
    100% { transform: scale(1); }
}
.coracao-feedback-botao { animation: coracao-feedback-botao .28s ease; }

/* ---------- Clique: pequena explosão nos CTAs de garantir vaga ---------- */
.coracoes-clique {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    pointer-events: none;
}
.coracao-principal {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 34px;
    color: var(--cor, #EC4899);
    font-variation-settings: 'FILL' 1;
    transform: translate(-50%, -50%) scale(0);
    animation: coracao-pop .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes coracao-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    40% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -65%) scale(1); opacity: 0; }
}
.coracao-mini {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 15px;
    color: var(--cor, #EC4899);
    font-variation-settings: 'FILL' 1;
    transform: translate(-50%, -50%) scale(0);
    animation: coracao-mini .75s ease-out forwards;
}
@keyframes coracao-mini {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, -50px))) scale(.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .coracoes-clique { display: none; }
}

/* ---------- Comemoração: depois da confirmação do cadastro ---------- */
/* Vive dentro do <dialog> (que tem overflow:visible), não em body: um
   <dialog> aberto pinta no "top layer" do navegador, acima do próprio
   ::backdrop — um overlay solto em body ficaria escurecido por baixo dele. */
.festa-cadastro {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.festa-emoji {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    line-height: 1;
    will-change: transform, opacity;
}
.festa-pop { animation: festa-pop .6s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes festa-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, -40px))) scale(1); opacity: 0; }
}
.festa-sobe { animation: festa-sobe 2.4s ease-out forwards; }
@keyframes festa-sobe {
    0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
    15% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, -20px))) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x2, 0px)), calc(-50% + var(--y2, -160px))) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
    .festa-cadastro { display: none; }
}