/* Simple motion helper classes to mimic framer-motion effects */
.fade-in { animation: fade-in 700ms ease-out forwards; }
.fade-out { animation: fade-out 500ms ease-in forwards; }
.rise-in { animation: rise-in 800ms ease-out forwards; }
.pop-in { animation: pop-in 800ms ease-out forwards; }
.twinkle { animation: twinkle var(--twinkle-duration, 4s) ease-in-out var(--twinkle-delay, 0s) infinite; }
.float-up { animation: float-up var(--float-duration, 12s) ease-out var(--float-delay, 0s) infinite; }

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes rise-in { 0% { opacity: 0; transform: translateY(40px) scale(.95) } 100% { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.8) } 100% { opacity: 1; transform: scale(1) } }
@keyframes float-up {
  0% { transform: translateY(0) rotate(0deg); opacity: 0 }
  10% { opacity: .4 }
  90% { opacity: .4 }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0 }
}
@keyframes twinkle {
  0% { opacity: 0; transform: scale(0) }
  50% { opacity: .7; transform: scale(1) }
  100% { opacity: 0; transform: scale(0) }
}
/* button hover effect parity */
.btn-pop:hover { transform: scale(1.05); box-shadow: 0 20px 40px rgba(236,72,153,0.25) }