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

/* GIFT OPEN ANIMATION */
@keyframes lid-fly {
  0%   { transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1); opacity: 1; }
  35%  { transform: translateY(-100px) rotateX(-15deg) rotateZ(-20deg) scale(1.05); opacity: 1; }
  70%  { transform: translateY(-220px) rotateX(-30deg) rotateZ(-40deg) scale(0.7); opacity: 0.7; }
  100% { transform: translateY(-340px) rotateX(-45deg) rotateZ(-55deg) 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); }
}