/* ========================================================
   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;
  }
}


/* ========================================================
   5. FALLING 2D LAVENDER FLOWERS INSIDE INVITATION
   ======================================================== */
.falling-flowers-inside {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

body:not(.invite-open) .falling-flowers-inside {
  display: none;
}

.falling-flower-item {
  position: absolute;
  top: -60px;
  pointer-events: none;
  will-change: transform, opacity;
  animation-name: fallLavender2D;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.falling-flower-item svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(70, 40, 110, 0.12));
}

@keyframes fallLavender2D {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: var(--peak-opacity, 0.8);
  }
  90% {
    opacity: var(--peak-opacity, 0.8);
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(var(--sway-x, 30px)) rotate(var(--rot-end, 180deg));
    opacity: 0;
  }
}