/* ==========================================================================
   SAKURA.CSS — FALLING FLOWER PETALS RAIN
   Inspired by jhammann/sakura with Wedding Petal Customizations
   ========================================================================== */

.sakura {
  pointer-events: none;
  position: fixed;
  top: -10vh;
  z-index: 20;
  display: block;
  border-radius: 12px 1px 14px 1px;
  box-shadow: 0 2px 8px rgba(92, 26, 43, 0.15);
  will-change: transform, top, left, opacity;
}

/* Fall Animation */
@keyframes fall {
  0% {
    opacity: 0.9;
    top: -5vh;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    top: 105vh;
  }
}

@-webkit-keyframes fall {
  0% {
    opacity: 0.9;
    top: -5vh;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    top: 105vh;
  }
}

/* Wind Drift Animations */
@keyframes blow-soft-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-60px); }
}

@keyframes blow-medium-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-120px); }
}

@keyframes blow-soft-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

@keyframes blow-medium-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(120px); }
}

/* 3D Tumble & Sway Animations */
@keyframes sway-0 {
  0% { transform: rotate3d(1, 1, 0, 0deg); }
  100% { transform: rotate3d(1, 1, 0, 360deg); }
}

@keyframes sway-1 {
  0% { transform: rotate3d(0, 1, 1, 0deg); }
  100% { transform: rotate3d(0, 1, 1, 360deg); }
}

@keyframes sway-2 {
  0% { transform: rotate3d(1, 0, 1, 0deg); }
  100% { transform: rotate3d(1, 0, 1, 360deg); }
}

@keyframes sway-3 {
  0% { transform: rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateY(360deg) rotateZ(180deg); }
}

@keyframes sway-4 {
  0% { transform: rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateZ(270deg); }
}

@keyframes sway-5 {
  0% { transform: rotate3d(0.5, 1, 0.5, 0deg); }
  100% { transform: rotate3d(0.5, 1, 0.5, 360deg); }
}

@keyframes sway-6 {
  0% { transform: rotate3d(1, 0.5, 0.2, 0deg); }
  100% { transform: rotate3d(1, 0.5, 0.2, 360deg); }
}

@keyframes sway-7 {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(180deg) rotateY(360deg); }
}

@keyframes sway-8 {
  0% { transform: rotateZ(0deg) rotate3d(1, 1, 1, 0deg); }
  100% { transform: rotateZ(360deg) rotate3d(1, 1, 1, 360deg); }
}