/* ===== UTILITY AND GENERAL ANIMATIONS - EXTRACTED FROM STYLE.CSS ===== */

/* === HEART AND LOGO ANIMATIONS === */
@keyframes heartPulseRing {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.3); opacity: 0.3; }
}

@keyframes heartbeatEnhanced {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.1); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

@keyframes wordAppear {
    to { opacity: 1; transform: translateY(0); }
}

/* === NEW CALM ANIMATIONS === */
@keyframes calmHeartbeat {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.02); }
    40% { transform: scale(1); }
    60% { transform: scale(1.03); }
    80% { transform: scale(1); }
}

@keyframes calmBrandGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px rgba(100, 116, 139, 0.2)); 
        opacity: 0.9;
    }
    50% { 
        filter: drop-shadow(0 0 8px rgba(100, 116, 139, 0.4)); 
        opacity: 1;
    }
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
        opacity: 0.3; 
    }
    50% { 
        transform: translateY(-2px) scale(1.01); 
        opacity: 0.5; 
    }
}

@keyframes calmProgressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes calmDotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes calmRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* === NEW OPTIMIZED TAGLINE ANIMATIONS === */
@keyframes gentleFadeIn {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes subtleGradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes elegantSparkle {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(0.8) rotate(0deg); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.1) rotate(180deg); 
    }
}

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

@keyframes glow-border {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(100, 116, 139, 0.3); 
    }
    50% { 
        box-shadow: 0 0 20px rgba(100, 116, 139, 0.6); 
    }
}

/* === CONSOLIDATED ANIMATIONS === */
@keyframes pulseRing { 
    0% { transform: scale(1); opacity: 0.8; } 
    50% { transform: scale(2.2); opacity: 0.4; } 
    100% { transform: scale(3); opacity: 0; } 
}

@keyframes glow { 
    0% { opacity: 0.7; transform: scale(1); } 
    100% { opacity: 1; transform: scale(1.2); } 
}

@keyframes trail { 
    0% { opacity: 0; transform: scale(0.5); } 
    20% { opacity: 1; transform: scale(1.2); } 
    80% { opacity: 1; transform: scale(1.8); } 
    100% { opacity: 0; transform: scale(2.2); } 
}

@keyframes lineGlow { 
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.4), 0 0 15px rgba(251, 191, 36, 0.4); } 
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 0 30px rgba(251, 191, 36, 1), 0 0 40px rgba(59, 130, 246, 0.6), 0 0 50px rgba(251, 191, 36, 0.6); } 
}

@keyframes scaleY { 
    0%, 100% { transform: scaleY(1); } 
    50% { transform: scaleY(1.5); } 
}

@keyframes shake { 
    0%, 100% { transform: translateX(0) scale(1); } 
    10% { transform: translateX(-3px) scale(1.2); } 
    20% { transform: translateX(3px) scale(1.2); } 
    30% { transform: translateX(-3px) scale(1.2); } 
    40% { transform: translateX(3px) scale(1.2); } 
    50% { transform: translateX(-2px) scale(1.15); } 
    60% { transform: translateX(2px) scale(1.15); } 
    70% { transform: translateX(-2px) scale(1.1); } 
    80% { transform: translateX(2px) scale(1.1); } 
    90% { transform: translateX(-1px) scale(1.05); } 
    95% { transform: translateX(1px) scale(1.02); } 
}

@keyframes shimmer { 
    0%, 100% { box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); } 
    50% { box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } 
}

@keyframes orbPulse { 
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.9; } 
    50% { transform: translateY(-50%) scale(1.2); opacity: 1; } 
}