/* Дополнительные декоративные элементы для страницы */

/* Плавающие цветы */
@keyframes flowerFloat {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
    opacity: 0.15;
  }
  25% { 
    transform: translate(15px, -20px) rotate(5deg); 
    opacity: 0.2;
  }
  50% { 
    transform: translate(-10px, -35px) rotate(-3deg); 
    opacity: 0.18;
  }
  75% { 
    transform: translate(20px, -15px) rotate(3deg); 
    opacity: 0.2;
  }
}

/* Декоративные блестки */
@keyframes sparkle {
  0%, 100% { 
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* Добавление декоративных элементов через псевдоэлементы */
main {
  position: relative;
}

main::before {
  content: '🌸';
  position: fixed;
  top: 15%;
  left: 5%;
  font-size: 3rem;
  opacity: 0.15;
  z-index: 0;
  animation: flowerFloat 15s ease-in-out infinite;
  pointer-events: none;
}

main::after {
  content: '🌼';
  position: fixed;
  top: 60%;
  right: 8%;
  font-size: 2.5rem;
  opacity: 0.12;
  z-index: 0;
  animation: flowerFloat 18s ease-in-out infinite 2s;
  pointer-events: none;
}

/* Декоративные точки-блестки */
.hero-copy::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -30px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 212, 184, 0.8), transparent);
  border-radius: 50%;
  box-shadow: 
    0 0 10px rgba(255, 212, 184, 0.6),
    50px 30px 0 rgba(255, 184, 168, 0.5),
    100px 60px 0 rgba(212, 240, 212, 0.4),
    150px 20px 0 rgba(255, 212, 184, 0.5);
  animation: sparkle 4s ease-in-out infinite;
  z-index: 0;
}

/* Органические формы для разных секций */
.tile-grid {
  position: relative;
}

.tile-grid::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(ellipse 60% 40%, rgba(184, 229, 184, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  animation: cloudFloat 12s ease-in-out infinite;
}

.tile-grid::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -40px;
  width: 250px;
  height: 180px;
  background: radial-gradient(ellipse 50% 60%, rgba(255, 212, 184, 0.15) 0%, transparent 75%);
  border-radius: 50%;
  z-index: 0;
  animation: cloudFloat 14s ease-in-out infinite reverse;
}

/* Декоративные волны для футера */
.footer::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 120px;
  background: 
    radial-gradient(ellipse 70% 40% at 20% 100%, rgba(255, 249, 240, 0.9) 0%, transparent 70%),
    radial-gradient(ellipse 65% 45% at 50% 100%, rgba(255, 249, 240, 0.85) 0%, transparent 65%),
    radial-gradient(ellipse 75% 50% at 80% 100%, rgba(255, 249, 240, 0.9) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Декоративные элементы для карточек */
.tile::after {
  content: '✨';
  position: absolute;
  top: -15px;
  right: 20px;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
}

.tile:hover::after {
  opacity: 0.6;
  transform: scale(1.2) rotate(15deg);
  animation: sparkle 2s ease-in-out infinite;
}

/* Мягкие тени для глубины */
.section {
  filter: drop-shadow(0 2px 10px rgba(184, 229, 184, 0.1));
}

.tile {
  filter: drop-shadow(0 4px 15px rgba(26, 74, 26, 0.08));
}

.tile:hover {
  filter: drop-shadow(0 8px 25px rgba(26, 74, 26, 0.12));
}