/* =============================================
   ROMANTIC FLOWER WEBSITE — ANIMATIONS.CSS
   ============================================= */

/* ===========================
   GIFT OPEN ANIMATION
   =========================== */
@keyframes lid-fly {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  40%  { transform: translateY(-120px) rotate(-25deg); opacity: 1; }
  100% { transform: translateY(-300px) rotate(-50deg) scale(0.3); opacity: 0; }
}

@keyframes gift-shake {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-4deg); }
  40%     { transform: rotate(4deg); }
  60%     { transform: rotate(-3deg); }
  80%     { transform: rotate(3deg); }
}

@keyframes bloom-burst {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  40%  { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--rot)); }
  80%  { opacity: 0.9; transform: translate(var(--tx2), var(--ty2)) scale(1) rotate(var(--rot2)); }
  100% { opacity: 0; transform: translate(var(--tx3), var(--ty3)) scale(0.8) rotate(var(--rot3)); }
}

/* ===========================
   SECTION REVEAL
   =========================== */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===========================
   FLOATING PARTICLES
   =========================== */
@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
  25%  { transform: translateY(-30px) translateX(15px) scale(1.05); }
  50%  { transform: translateY(-10px) translateX(-10px) scale(0.95); opacity: 0.5; }
  75%  { transform: translateY(-40px) translateX(20px) scale(1.02); }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
}

/* ===========================
   GLOW PULSE
   =========================== */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(232,105,138,0.3), 0 0 40px rgba(232,105,138,0.1); }
  50%      { box-shadow: 0 0 40px rgba(232,105,138,0.6), 0 0 80px rgba(232,105,138,0.25), 0 0 120px rgba(232,105,138,0.1); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ===========================
   INTRO SCENE ENTRANCE
   =========================== */
@keyframes intro-entrance {
  from { opacity: 0; transform: scale(0.7) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#gift-wrapper { animation: intro-entrance 1.2s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }

/* ===========================
   SPARKLE STARS
   =========================== */
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkle ease-in-out infinite;
}

/* ===========================
   INTRO BG PULSE
   =========================== */
@keyframes intro-bg-pulse {
  0%,100% { background: linear-gradient(135deg, #1a0510, #3d0f25 40%, #1e0815); }
  50%      { background: linear-gradient(135deg, #2a0a1a, #5c1a38 40%, #2e0c22); }
}
#intro-scene { animation: intro-bg-pulse 4s ease-in-out infinite; }

/* ===========================
   SMOOTH PAGE TRANSITION
   =========================== */
@keyframes page-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#main-site.entering { animation: page-reveal 1s ease forwards; }

/* ===========================
   HERO GLOW RING
   =========================== */
@keyframes ring-expand {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ===========================
   TWINKLE
   =========================== */
@keyframes twinkle {
  0%,100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* ===========================
   CARD HOVER GLOW
   =========================== */
.reason-card:hover { animation: glow-pulse 2s ease-in-out infinite; }
.gallery-card:hover { animation: glow-pulse 2s ease-in-out infinite; }

/* ===========================
   CUSTOM CURSOR TRAIL
   =========================== */
.cursor-petal {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1rem;
  animation: cursor-fade 0.8s ease forwards;
}
@keyframes cursor-fade {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
}