/* ==========================================================
   EFEITOS: fita de progresso, corações voando, confete
   ========================================================== */

/* fita washi no topo que cresce com a rolagem */
#progresso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: 7px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: repeating-linear-gradient(-45deg, var(--rosa) 0 6px, var(--rosa-claro) 6px 12px);
  box-shadow: 0 1px 2px rgba(58, 39, 49, .12);
  pointer-events: none;
}

body.travado #progresso { opacity: 0; }

/* corações que sobem pela tela */
.coracao-voando {
  position: fixed;
  bottom: -48px;
  z-index: 950;
  width: var(--t, 24px);
  height: var(--t, 24px);
  color: var(--cor, var(--batom));
  pointer-events: none;
  animation: coracao-voar var(--dur, 3.2s) cubic-bezier(.25, .6, .45, 1) forwards;
}

.coracao-voando svg { width: 100%; height: 100%; fill: currentColor; }

@keyframes coracao-voar {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  12% { transform: translate(0, -10vh) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx, 20px), -112vh) rotate(var(--rot, 20deg)); opacity: 0; }
}

/* coraçõezinhos de fundo, bem devagar */
.campo-coracoes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.coracao-ambiente {
  position: absolute;
  bottom: -40px;
  width: var(--t, 18px);
  height: var(--t, 18px);
  color: var(--rosa);
  opacity: .5;
  animation: coracao-subir var(--dur, 14s) ease-in-out var(--atraso, 0s) infinite;
}

.coracao-ambiente svg { width: 100%; height: 100%; fill: currentColor; }

@keyframes coracao-subir {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .5; }
  50% { transform: translate(var(--dx, 16px), -55vh) rotate(10deg); }
  90% { opacity: .5; }
  100% { transform: translate(0, -110vh) rotate(-8deg); opacity: 0; }
}

/* confete de papel */
.confete {
  position: fixed;
  top: -24px;
  z-index: 950;
  width: var(--l, 8px);
  height: var(--a, 14px);
  background: var(--cor, var(--rosa));
  border-radius: var(--raio, 1px);
  pointer-events: none;
  animation: confete-cair var(--dur, 3.4s) cubic-bezier(.2, .5, .5, 1) forwards;
}

.confete svg { width: 100%; height: 100%; fill: var(--cor); }
.confete--coracao { background: none; }

@keyframes confete-cair {
  0% { transform: translate(0, 0) rotate(0deg) rotateY(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), 112vh) rotate(var(--rot, 360deg)) rotateY(900deg); opacity: 0; }
}