/* =====================
   ANIMATIONS
   ===================== */

@keyframes leafFloat {
    0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
    5%   { opacity: 0.2; }
    95%  { opacity: 0.1; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes growFill {
    from { width: 0%; }
}

@keyframes bloomIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes shakeWrong {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

@keyframes fadeOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUpCard {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes badgePop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes bannerIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* riseIn: referenced by .upgrade-page-wrap — define here if needed */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}