.ceu {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.nuvem {
  position: absolute;
  background: var(--branco);
  border-radius: 999px;
  opacity: 0.75;
  filter: blur(0.5px);
  animation: deslizar linear infinite;
}

.nuvem::before,
.nuvem::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 999px;
}

.nuvem::before { width: 55%; height: 160%; left: 12%; top: -70%; }
.nuvem::after  { width: 42%; height: 130%; right: 14%; top: -46%; }

@keyframes deslizar {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(130vw); }
}

.brilho {
  position: absolute;
  color: var(--dourado);
  font-size: 0.9rem;
  animation: cintilar ease-in-out infinite;
  opacity: 0;
}

@keyframes cintilar {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1); }
}

.confete {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 99;
  pointer-events: none;
  animation: cair linear forwards;
}

@keyframes cair {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* --- os balões da cotação --- */

.baloes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 1.4rem 0;
}

.coluna-balao { display: flex; flex-direction: column; align-items: center; }

/* O céu onde o balão sobe. Altura fixa: o balão se move dentro dela e nunca
   escapa por cima do título. */
.pista { position: relative; width: 100%; height: 230px; }

.balao {
  position: absolute;
  left: 50%;
  width: 92px;
  height: 112px;
  margin-left: -46px;
  /* Redondo em cima e afunilando para o bico: é o afunilamento que faz o
     olho ler balão em vez de ovo. */
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.08);
  transition: bottom 900ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: flutuar 5s ease-in-out infinite;
}

/* o biquinho de baixo */
.balao::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid currentColor;
}

/* o barbante */
.balao::after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 1px;
  height: 34px;
  background: rgba(138, 88, 54, 0.35);
}

.balao-madalena { background: var(--rosa); color: var(--rosa); }
.balao-antonio  { background: var(--azul); color: var(--azul); }

.balao-legenda { margin-top: 0.6rem; text-align: center; }

.balao-percentual {
  font-family: var(--fonte-titulo);
  font-size: 2.4rem;
  line-height: 1;
  display: block;
}

@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

.trilha { width: 100%; height: 150px; overflow: visible; }
.trilha path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.trilha .linha-madalena { stroke: var(--rosa); }
.trilha .linha-antonio  { stroke: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  .nuvem, .brilho, .confete { animation: none; }
  .brilho { opacity: 0.7; }
  .confete { display: none; }
  .balao { animation: none; transition: none; }
}