/* Quiet garden movement behind the invitation, contained above the lotus. */
#invitation .lotus-falling-leaves {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 50%;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 66%, transparent 100%);
}
#invitation .lotus-leaf-drift {
  position: absolute;
  top: -38px;
  left: var(--leaf-x);
  width: var(--leaf-width);
  height: 100%;
  opacity: 0;
  animation: lotus-leaf-fall var(--leaf-duration) linear var(--leaf-delay) infinite;
  animation-play-state: paused;
}
#invitation .lotus-leaf-blade {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 45%;
  animation: lotus-leaf-flutter var(--leaf-flutter) ease-in-out var(--leaf-delay) infinite;
  animation-play-state: paused;
}
#invitation .lotus-leaf-body { fill: #ada776; }
#invitation .lotus-leaf-fold { fill: #74816a; }
#invitation .lotus-leaf-veins {
  fill: none;
  stroke: #e4d2a0;
  stroke-width: .65;
  stroke-linecap: round;
  opacity: .8;
}
#invitation .lotus-leaf-drift:nth-child(even) .lotus-leaf-body { fill: #b9ac7c; }
#invitation .lotus-leaf-drift:nth-child(3n) .lotus-leaf-fold { fill: #8d987b; }
#invitation .lotus-falling-leaves[data-leaves-active="true"] :is(.lotus-leaf-drift, .lotus-leaf-blade) {
  animation-play-state: running;
}
@keyframes lotus-leaf-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  13% { opacity: var(--leaf-light); }
  42% { opacity: var(--leaf-light); transform: translate3d(calc(var(--leaf-drift) * -.22), 44%, 0); }
  69% { opacity: var(--leaf-light); }
  87%, 100% { opacity: 0; transform: translate3d(var(--leaf-drift), 112%, 0); }
}
@keyframes lotus-leaf-flutter {
  0%, 100% { transform: rotate(var(--leaf-turn)) rotateY(-26deg) rotateX(8deg); }
  48% { transform: rotate(calc(var(--leaf-turn) + 38deg)) rotateY(38deg) rotateX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
  #invitation .lotus-falling-leaves { display: none; }
  #invitation .lotus-falling-leaves :is(.lotus-leaf-drift, .lotus-leaf-blade) { animation: none; }
}