/* Blue daisy falling petals animation */
.falling-flowers-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  visibility: visible !important;
  display: block !important;
}

.falling-flower {
  position: absolute;
  top: -60px;
  display: block;
  width: 28px;
  height: 28px;
  background: url('../assets/hoaroi.png') center / contain no-repeat;
  pointer-events: none;
  animation: blueFlowerFall 12s linear infinite;
  will-change: transform, opacity;
  opacity: 0.85;
}

.falling-flowers-layer.is-paused .falling-flower { animation-play-state: paused; }

@keyframes blueFlowerFall {
  0% {
    transform: translate3d(0, -60px, 0) rotate(var(--rotation-start, 0deg));
    opacity: 0;
  }
  10% {
    opacity: var(--flower-opacity, 0.85);
  }
  35% {
    transform: translate3d(var(--sway, 25px), 35vh, 0) rotate(calc(var(--rotation-start, 0deg) + 45deg));
  }
  65% {
    transform: translate3d(calc(var(--sway, 25px) * -1), 70vh, 0) rotate(calc(var(--rotation-start, 0deg) + 90deg));
  }
  90% {
    opacity: var(--flower-opacity, 0.85);
  }
  100% {
    transform: translate3d(var(--sway, 20px), calc(100vh + 100px), 0) rotate(calc(var(--rotation-start, 0deg) + 140deg));
    opacity: 0;
  }
}

/* Static positions and delays: 14 flowers on desktop, 7 on mobile */
.falling-flower.f-1  { left: 3%;  width: 26px; height: 26px; animation-duration: 11s; animation-delay: 0s; }
.falling-flower.f-2  { left: 10%; width: 34px; height: 34px; animation-duration: 14s; animation-delay: -3s; }
.falling-flower.f-3  { left: 18%; width: 22px; height: 22px; animation-duration: 9s;  animation-delay: -6s; }
.falling-flower.f-4  { left: 25%; width: 30px; height: 30px; animation-duration: 13s; animation-delay: -2s; }
.falling-flower.f-5  { left: 32%; width: 25px; height: 25px; animation-duration: 10s; animation-delay: -8s; }
.falling-flower.f-6  { left: 40%; width: 36px; height: 36px; animation-duration: 15s; animation-delay: -5s; }
.falling-flower.f-7  { left: 48%; width: 24px; height: 24px; animation-duration: 11s; animation-delay: -1s; }
.falling-flower.f-8  { left: 55%; width: 32px; height: 32px; animation-duration: 12s; animation-delay: -7s; }
.falling-flower.f-9  { left: 63%; width: 28px; height: 28px; animation-duration: 16s; animation-delay: -4s; }
.falling-flower.f-10 { left: 70%; width: 22px; height: 22px; animation-duration: 10s; animation-delay: -9s; }
.falling-flower.f-11 { left: 78%; width: 30px; height: 30px; animation-duration: 13s; animation-delay: -3.5s; }
.falling-flower.f-12 { left: 85%; width: 25px; height: 25px; animation-duration: 11s; animation-delay: -6.5s; }
.falling-flower.f-13 { left: 92%; width: 32px; height: 32px; animation-duration: 14s; animation-delay: -2.5s; }
.falling-flower.f-14 { left: 98%; width: 24px; height: 24px; animation-duration: 12s; animation-delay: -8.5s; }

@media (max-width: 600px) {
  /* On mobile: keep exactly 7 flowers evenly distributed across the screen */
  .falling-flowers-layer .falling-flower:nth-child(even) {
    display: none !important;
  }
}