/* ========================================================
   FLOWER ANIMATIONS — BLUE WATERCOLOR THEME
   Smooth floating & swaying animations for all floral decorations
   ======================================================== */

/* Base keyframes cho các loại chuyển động */
@keyframes floralSway {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-2deg) translateY(-3px);
  }
  50% {
    transform: rotate(0deg) translateY(-6px);
  }
  75% {
    transform: rotate(2deg) translateY(-3px);
  }
}

@keyframes floralSwayReverse {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(2deg) translateY(-4px);
  }
  50% {
    transform: rotate(0deg) translateY(-7px);
  }
  75% {
    transform: rotate(-2deg) translateY(-4px);
  }
}

@keyframes floralFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
  }
}

@keyframes floralBreath {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.04) rotate(1deg);
  }
}

/* Apply animations cho từng bông hoa */

/* 1. ENVELOPE SCREEN - Corner flower */
.envelope-corner-flower {
  animation: floralSway 7s ease-in-out infinite !important;
  transform-origin: center center !important;
}

/* Đảm bảo animation hoạt động cả khi invite chưa mở */
body:not(.invite-opening):not(.invite-open) .envelope-corner-flower {
  animation: floralSway 7s ease-in-out infinite !important;
}

/* 2. HERO SECTION - Top left & Bottom right flowers */
.hero-flower-top-left {
  animation: floralSway 8s ease-in-out infinite !important;
  transform-origin: top left !important;
}

.hero-flower-bottom-right {
  animation: floralSwayReverse 9s ease-in-out infinite 1s !important;
  transform-origin: bottom right !important;
}

/* 3. WEDDING INFO CARD - Corner flowers */
.card-corner-flower-tl {
  animation: floralSway 6.5s ease-in-out infinite 0.5s !important;
  transform-origin: top left !important;
}

.card-corner-flower-br {
  animation: floralSwayReverse 7.5s ease-in-out infinite 1.2s !important;
  transform-origin: bottom right !important;
}

/* 4. GALLERY SECTION - Corner flowers */
.gallery-flower-tl {
  animation: floralFloat 7s ease-in-out infinite !important;
  transform-origin: top left !important;
}

.gallery-flower-br {
  animation: floralBreath 8s ease-in-out infinite 0.8s !important;
  transform-origin: bottom right !important;
}

/* 5. RECEPTION SECTION - Multiple flowers */
.reception-flower-tl {
  animation: floralSway 6s ease-in-out infinite !important;
  transform-origin: top left !important;
}

.reception-flower-ml {
  animation: floralFloat 9s ease-in-out infinite 1.5s !important;
  transform-origin: center left !important;
}

.reception-flower-br {
  animation: floralSwayReverse 7s ease-in-out infinite 0.7s !important;
  transform-origin: bottom right !important;
}

/* 6. DRESS CODE & TIMELINE SECTION */
.dc-flower-tl {
  animation: floralSway 8.5s ease-in-out infinite 0.3s !important;
  transform-origin: top left !important;
}

.dc-flower-br {
  animation: floralBreath 7.5s ease-in-out infinite 1s !important;
  transform-origin: bottom right !important;
}

/* 7. GUESTBOOK SECTION */
.gb-flower-tr {
  animation: floralSwayReverse 8s ease-in-out infinite 0.5s !important;
  transform-origin: top right !important;
}

/* Hover effects - tăng cường tương tác */
.card-corner-flower-tl:hover,
.card-corner-flower-br:hover,
.hero-flower-top-left:hover,
.hero-flower-bottom-right:hover,
.gallery-flower-tl:hover,
.gallery-flower-br:hover,
.reception-flower-tl:hover,
.reception-flower-ml:hover,
.reception-flower-br:hover,
.dc-flower-tl:hover,
.dc-flower-br:hover,
.gb-flower-tr:hover {
  animation-play-state: paused;
  transform: scale(1.08);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 12px 24px rgba(45, 80, 115, 0.25));
}

/* Optional: Reduce motion cho người dùng có preference */
@media (prefers-reduced-motion: reduce) {
  .envelope-corner-flower,
  .hero-flower-top-left,
  .hero-flower-bottom-right,
  .card-corner-flower-tl,
  .card-corner-flower-br,
  .gallery-flower-tl,
  .gallery-flower-br,
  .reception-flower-tl,
  .reception-flower-ml,
  .reception-flower-br,
  .dc-flower-tl,
  .dc-flower-br,
  .gb-flower-tr {
    animation: none;
  }
}