/**
 * Sarah Turns 24 - Animation & Keyframe Definitions
 */

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes floatGlow {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(255, 107, 157, 0.4)); }
    50% { transform: translateY(-8px); filter: drop-shadow(0 0 16px rgba(255, 107, 157, 0.8)); }
}

@keyframes flameFlicker {
    0% { transform: translateX(-50%) scale(1) rotate(-1deg); }
    25% { transform: translateX(-50%) scale(1.08, 0.95) rotate(1.5deg); }
    50% { transform: translateX(-50%) scale(0.95, 1.05) rotate(-1deg); }
    75% { transform: translateX(-50%) scale(1.04, 0.98) rotate(2deg); }
    100% { transform: translateX(-50%) scale(0.98, 1.02) rotate(-0.5deg); }
}

@keyframes smokeDrift {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-20px, -60px) scale(2.2); opacity: 0; }
}

@keyframes popIn {
    0% { transform: scale(0.85); opacity: 0; }
    70% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 15px rgba(255, 107, 157, 0.4); }
    50% { text-shadow: 0 0 30px rgba(255, 107, 157, 0.8), 0 0 45px rgba(192, 132, 252, 0.6); }
}

.animate-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pop-glow {
    animation: glowPulse 2.5s infinite ease-in-out;
}

/* Secret Glow Mode triggered by keyboard easter egg */
body.secret-glow-mode {
    animation: rainbowShift 3s infinite alternate;
}

@keyframes rainbowShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(90deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-7px); }
    40%, 80% { transform: translateX(7px); }
}

.animate-shake {
    animation: shake 0.4s ease-in-out forwards;
}