/* Transparent petals sit inside the garden, below the invitation lettering. */
#home .hero-copy, #home .scroll-invitation { z-index: 2; }
.hero-florals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  container-type: size;
  perspective: 700px;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-florals.is-ready { opacity: 1; }
.hero-petal {
  position: absolute;
  top: -45px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: garden-petal-drift var(--duration) linear var(--delay) infinite both paused;
}
.hero-petal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: visible;
  animation: garden-petal-turn var(--flutter) ease-in-out var(--delay) infinite alternate both paused;
}
.hero-petal:nth-child(3n) img { filter: blur(.35px); }
.hero-petal:nth-child(even) img { scale: -1 1; }
.is-running .hero-petal, .is-running .hero-petal img { animation-play-state: running; }
@keyframes garden-petal-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--tilt)); }
  8% { opacity: .72; }
  28% { transform: translate3d(calc(var(--wind) * .18 + 12px), 30cqh, 0) rotate(calc(var(--tilt) + 40deg)); }
  54% { opacity: .83; transform: translate3d(calc(var(--wind) * .5 - 9px), 59cqh, 0) rotate(calc(var(--tilt) + 110deg)); }
  78% { opacity: .7; transform: translate3d(calc(var(--wind) * .79 + 6px), 85cqh, 0) rotate(calc(var(--tilt) + 165deg)); }
  94% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--wind), calc(100cqh + 90px), 0) rotate(calc(var(--tilt) + 210deg)); }
}
@keyframes garden-petal-turn {
  0% { transform: rotateY(-48deg) rotateX(15deg) rotateZ(-12deg); }
  45% { transform: rotateY(12deg) rotateX(-28deg) rotateZ(8deg); }
  100% { transform: rotateY(62deg) rotateX(32deg) rotateZ(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-florals { display: none; }
}