/* ═══════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════ */

/* ── Loading ── */
@keyframes loadingHeartBeat {
    0%, 100% { transform: scale(1);    }
    25%       { transform: scale(1.18); }
    50%       { transform: scale(1);    }
    75%       { transform: scale(1.1);  }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1;   }
}

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Floating Hearts ── */
@keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    8%  { opacity: 0.65; }
    50% {
        transform: translateY(-52vh) translateX(var(--drift, 25px)) rotate(180deg) scale(0.85);
    }
    88% { opacity: 0.25; }
    100% {
        opacity: 0;
        transform: translateY(-108vh) translateX(var(--drift2, 40px)) rotate(360deg) scale(0.5);
    }
}

/* ── Ornament twinkle ── */
@keyframes twinkle {
    0%, 100% { opacity: 0.18; transform: scale(0.9) rotate(0deg);  }
    50%       { opacity: 0.7;  transform: scale(1.2) rotate(45deg); }
}

/* ── Normal heart beat ── */
@keyframes heartBeat {
    0%,  100% { transform: scale(1);    }
    14%        { transform: scale(1.12); }
    28%        { transform: scale(1);    }
    42%        { transform: scale(1.07); }
    56%        { transform: scale(1);    }
}

/* ── Large heart beat ── */
@keyframes bigHeartBeat {
    0%, 100% { transform: scale(1);    }
    25%       { transform: scale(1.16); }
    50%       { transform: scale(1);    }
    75%       { transform: scale(1.09); }
}

/* ── Pulsing ring expand ── */
@keyframes ringExpand {
    0%   { transform: scale(0.75); opacity: 0.85; }
    100% { transform: scale(1.45); opacity: 0;    }
}

/* ── Rose sway ── */
@keyframes roseSway {
    0%, 100% { transform: rotate(-9deg) translateY(0px);  }
    50%       { transform: rotate(9deg)  translateY(-6px); }
}

/* ── Generic pulse ── */
@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%       { transform: scale(1.18); opacity: 1;    }
}

/* ── Fade in from below ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Page exit ── */
@keyframes pageExit {
    from { opacity: 1; transform: translateY(0);    }
    to   { opacity: 0; transform: translateY(-12px); }
}

/* ── YES button glow pulse ── */
@keyframes yesGlow {
    0%, 100% { box-shadow: 0 8px 30px rgba(232, 64, 90, 0.55), 0 0 0   rgba(232, 64, 90, 0);   }
    50%       { box-shadow: 0 8px 40px rgba(232, 64, 90, 0.75), 0 0 25px rgba(232, 64, 90, 0.2); }
}

/* ── Music button pulse ── */
@keyframes musicPulse {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.06); }
}

/* ── Overlay pop in ── */
@keyframes overlayPopIn {
    from {
        opacity: 0;
        transform: scale(0.75) translateY(24px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Overlay hearts float ── */
@keyframes overlayHeartsFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-12px); }
}

/* ── NO button jump ── */
@keyframes noJump {
    0%   { transform: scale(1) rotate(0deg);    }
    25%  { transform: scale(0.8) rotate(-12deg); }
    55%  { transform: scale(1.12) rotate(6deg);  }
    100% { transform: scale(1) rotate(0deg);     }
}

/* ── Success pop ── */
@keyframes successPop {
    0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    60%  { opacity: 1; transform: scale(1.1) rotate(3deg);   }
    100% { opacity: 1; transform: scale(1) rotate(0deg);     }
}

/* ── Shimmer (gold text sweep) ── */
@keyframes shimmerText {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ── Balloon float (for confetti balloons) ── */
@keyframes balloonFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg);  }
    50%       { transform: translateY(-18px) rotate(3deg); }
}

/* ── Sparkle star ── */
@keyframes sparkleFade {
    0%   { opacity: 0; transform: scale(0) rotate(0deg);   }
    50%  { opacity: 1; transform: scale(1) rotate(45deg);  }
    100% { opacity: 0; transform: scale(0) rotate(90deg);  }
}