/* Sakura.js CSS - Falling petals animation */
/* Set pointer-events: none and ensure proper layering */
.sakura {
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

/* Always fall past the bottom so petals get cleaned up */
@keyframes fall {
  0% {
    opacity: 0.9;
    top: -10%;
  }
  100% {
    opacity: 0;
    top: 110%;
  }
}

/* Optional but recommended: don't stop blowing at 70% */
@keyframes blow-soft {
  0% { margin-left: 0; }
  100% { margin-left: -2%; }
}
@keyframes blow-medium {
  0% { margin-left: 0; }
  100% { margin-left: -3%; }
}
@keyframes blow-soft-right {
  0% { margin-left: 0; }
  100% { margin-left: 2%; }
}
@keyframes blow-medium-right {
  0% { margin-left: 0; }
  100% { margin-left: 3%; }
}

/* Further reduced rotation angles for more vertical falling */
@keyframes sway-0 {
  0% {
    transform: rotate(-2deg);
  }
  40% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(1deg);
  }
}

@keyframes sway-1 {
  0% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

@keyframes sway-2 {
  0% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(9deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes sway-3 {
  0% {
    transform: rotate(6deg);
  }
  40% {
    transform: rotate(11deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes sway-4 {
  0% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(14deg);
  }
  100% {
    transform: rotate(7deg);
  }
}

@keyframes sway-5 {
  0% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(17deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes sway-6 {
  0% {
    transform: rotate(17deg);
  }
  40% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

@keyframes sway-7 {
  0% {
    transform: rotate(18deg);
  }
  40% {
    transform: rotate(23deg);
  }
  100% {
    transform: rotate(17deg);
  }
}

@keyframes sway-8 {
  0% {
    transform: rotate(24deg);
  }
  40% {
    transform: rotate(28deg);
  }
  100% {
    transform: rotate(21deg);
  }
}