/**
 * 樱花洒落CSS样式
 * Sakura animation styles
 */

.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.sakura-petal {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #ffb7d5, #ff69b4);
  border-radius: 50% 0;
  box-shadow: inset -2px -2px 3px rgba(255, 182, 193, 0.6);
  animation: sakuraFall linear infinite;
  will-change: transform, top, left;
}

.sakura-petal::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  left: -50%;
  top: 50%;
  opacity: 0.5;
}

@keyframes sakuraFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes sakuraSway {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(10px) rotate(5deg);
  }
  50% {
    transform: translateX(-10px) rotate(-5deg);
  }
  75% {
    transform: translateX(5px) rotate(2deg);
  }
}

/* 深色主题樱花颜色调整 */
body.dark .sakura-petal {
  background: radial-gradient(circle at 30% 30%, #ff87c0, #ff5fa5);
  box-shadow: inset -2px -2px 3px rgba(255, 143, 192, 0.4);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .sakura-petal {
    width: 6px;
    height: 6px;
  }
}