/* Sparse, decorative petals for the homepage only. */
.home-sakura {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.home-sakura .sakura-petal {
  position: absolute;
  top: -30px;
  left: var(--sakura-left);
  width: var(--sakura-size);
  height: calc(var(--sakura-size) * 1.25);
  opacity: 0;
  pointer-events: none;
  animation: sakura-fall var(--sakura-duration) linear var(--sakura-delay) infinite;
}

.home-sakura .sakura-petal-shape {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 85% 15% 70% 30% / 70% 25% 75% 30%;
  background: radial-gradient(ellipse at 28% 22%, #fff0f7 0%, #ffc5dc 32%, #ed91b6 72%, #d76f9c 100%);
  box-shadow: inset 1px 1px 2px rgba(255, 236, 246, .5);
  animation: sakura-flutter var(--sakura-flutter) ease-in-out infinite alternate;
}

.home-sakura.is-paused .sakura-petal,
.home-sakura.is-paused .sakura-petal-shape {
  animation-play-state: paused;
}

@keyframes sakura-fall {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% { opacity: var(--sakura-opacity); }
  88% { opacity: var(--sakura-opacity); }
  100% {
    transform: translate3d(var(--sakura-drift), calc(100vh + 70px), 0);
    opacity: 0;
  }
}

@keyframes sakura-flutter {
  0% { transform: translateX(-14px) rotateZ(var(--sakura-tilt)) rotateY(0deg); }
  50% { transform: translateX(4px) rotateZ(calc(var(--sakura-tilt) + 35deg)) rotateY(65deg); }
  100% { transform: translateX(16px) rotateZ(calc(var(--sakura-tilt) + 80deg)) rotateY(155deg); }
}

@media (prefers-reduced-motion: reduce) {
  .home-sakura { display: none; }
  .home-sakura .sakura-petal,
  .home-sakura .sakura-petal-shape { animation: none; }
}