/* sakura.css - анимация лепестков сакуры */
.sakura-enabled {
  position: relative;
  overflow-x: hidden;
}

.sakura-enabled::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 183, 213, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 214, 231, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(232, 244, 255, 0.15) 0%, transparent 50%);
  z-index: 9998;
}

.sakura-petal {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb7d5, #ff80ab);
  transform-origin: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  box-shadow:
    0 0 10px rgba(255, 128, 171, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.2);
  animation: sakura-twinkle 3s ease-in-out infinite;
}

/* Разные формы и цвета лепестков */
.sakura-petal:nth-child(3n) {
  background: linear-gradient(135deg, #ffcdd2, #f48fb1);
  width: 18px;
  height: 18px;
}

.sakura-petal:nth-child(3n+1) {
  background: linear-gradient(135deg, #f8bbd0, #e91e63);
  width: 22px;
  height: 22px;
}

.sakura-petal:nth-child(5n) {
  border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
}

.sakura-petal:nth-child(7n) {
  border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
}

/* Эффект при наведении в pixel режиме */
.sakura-pixel-mode .sakura-petal:hover {
  image-rendering: pixelated;
  filter:
    contrast(1.5) brightness(1.2) drop-shadow(0 0 8px rgba(255, 107, 157, 0.6));
  transform: scale(1.5) rotate(45deg) !important;
  opacity: 1 !important;
}

/* Анимация мерцания */
@keyframes sakura-twinkle {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.9;
  }
}