/* petals.css — bougainvillea petal fall for pukhraj-poorva.
 *
 * One viewport-fixed, pointer-events:none field (js/petals.js builds it and spawns the
 * petals). Two phases share these keyframes: a lush opening "rain" the moment the
 * envelope intro clears, thinning seamlessly into a sparse infinite drift over every
 * slide. All motion is GPU-only (transform/opacity).
 *
 * Two-layer transform split (same rule the flowers/parrots/boat follow — one element
 * cannot run two transform animations): the WRAPPER .pp-petal falls vertically; the
 * inner .pp-petal__i img sways + rotates. The flip (scaleX) is baked into the sway
 * keyframes so it needs no third transform slot.
 *
 * Never blocks the page: pointer-events:none (scroll + every tap pass through to the
 * invitation), aria-hidden, and js/petals.js does not even build the field under
 * prefers-reduced-motion. This @media is the CSS backstop. */

.pp-petals {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 60; /* above hero/section art + text (<=50), below top controls (1000) and preloader/intro (10000/11000) */
  contain: layout style paint;
}

.pp-petal {
  position: absolute;
  top: 0;
  left: var(--x, 50vw);
  will-change: transform;
  animation: pp-petal-fall var(--fall, 5s) linear var(--delay, 0s) both;
}

.pp-petal__i {
  display: block;
  width: var(--size, 22px);
  height: auto;            /* keeps the 102x68 petal aspect */
  opacity: var(--op, 0.75);
  will-change: transform;
  transform-origin: 50% 50%;
  animation: pp-petal-sway var(--swayDur, 2s) ease-in-out var(--swayDelay, 0s) infinite alternate;
}

/* vertical descent (wrapper). from/to sit off-screen top/bottom; net horizontal drift
   rides along here so the inner sway reads as flutter around a drifting path. */
@keyframes pp-petal-fall {
  from { transform: translate3d(0, -12vh, 0); }
  to   { transform: translate3d(var(--driftX, 0px), 112vh, 0); }
}

/* flutter: rotate + a small sideways lean, mirrored by --flip (1 or -1). --flip is
   constant across both stops, so it lives inside the keyframe (no extra transform slot). */
@keyframes pp-petal-sway {
  from { transform: rotate(var(--r0, 0deg)) scaleX(var(--flip, 1)) translateX(0); }
  to   { transform: rotate(var(--r1, 180deg)) scaleX(var(--flip, 1)) translateX(var(--sway, 30px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-petals { display: none !important; }
}