/* ==========================================================================
   Flor do canto
   --------------------------------------------------------------------------
   Fica fixa no canto inferior direito enquanto a página rola (sticky) e
   "estaciona" no fim do <main>, logo antes do rodapé. Os 10 frames ficam
   empilhados; js/modules/flower-bloom.js mostra um por vez conforme o scroll.
   ========================================================================== */

.flower {
  --flower-size: 112px; /* frames têm 112px com a flor centralizada (~97px visíveis) */
  --flower-offset-x: 17px;
  --flower-offset-y: 17px;
  --flower-rotate: 0deg; /* atualizado pelo JS */

  position: sticky;
  bottom: 0;
  z-index: 20;
  height: 0;
  pointer-events: none;
}

.flower__frame {
  position: absolute;
  right: var(--flower-offset-x);
  /* Distance from the viewport bottom — and from the footer once it parks */
  bottom: var(--flower-offset-y);
  width: var(--flower-size);
  height: auto;
  visibility: hidden;
  rotate: var(--flower-rotate);
}

/* Frame atual por cima; o anterior fica embaixo por um instante (sem piscar) */
.flower__frame.is-active {
  z-index: 2;
  visibility: visible;
}

.flower__frame.is-leaving {
  z-index: 1;
  visibility: visible;
}

/* Mobile */
@media (max-width: 767px) {
  .flower {
    --flower-size: 67px;
    --flower-offset-x: 7px;
    --flower-offset-y: 11px;
  }
}