/* ===================================
   APP UI - MAIN STYLESHEET
   Author: Your Name
   Version: 1.0
=================================== */
    /* Subscribed Successfull Design */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes scaleIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    
    /* Handshake shake animation */
    @keyframes handshake {
        0%, 100% { transform: rotate(0deg); }
        10% { transform: rotate(-10deg); }
        20% { transform: rotate(10deg); }
        30% { transform: rotate(-10deg); }
        40% { transform: rotate(10deg); }
        50% { transform: rotate(0deg); }
    }
    
    /* Alternative: Gentle wave animation */
    @keyframes handwave {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-15deg); }
        75% { transform: rotate(15deg); }
    }
    
    .animate-handshake {
        animation: handshake 1.2s ease-in-out;
        transform-origin: bottom center;
    }
    
    /* Optional: Continuous subtle wave after initial shake */
    .animate-handshake:hover {
        animation: handwave 0.6s ease-in-out infinite;
    }


    /*Already Subcribed Alert Desgin Code*/
    /* Gentle heartbeat animation */
    @keyframes heartbeat {
        0%, 100% { transform: scale(1); }
        14% { transform: scale(1.1); }
        28% { transform: scale(1); }
        42% { transform: scale(1.1); }
        70% { transform: scale(1); }
    }
    
    /* Container pulse glow */
    @keyframes pulse-heart {
        0%, 100% { 
            box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
            transform: scale(1);
        }
        50% { 
            box-shadow: 0 0 0 10px rgba(244, 63, 90, 0);
            transform: scale(1.02);
        }
    }
    
    .animate-heartbeat {
        animation: heartbeat 1.5s ease-in-out infinite;
        transform-origin: center;
    }
    
    .animate-pulse-heart {
        animation: pulse-heart 2s ease-in-out infinite;
    }
    
    /* Pause animation on hover for subtle interaction */
    .animate-heartbeat:hover,
    .animate-pulse-heart:hover {
        animation-play-state: paused;
    }

/* 
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes scaleIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .animate-fadeIn {
        animation: fadeIn 0.2s ease-out forwards;
    }
    .animate-scaleIn {
        animation: scaleIn 0.3s ease-out 0.1s forwards;
    } */

    /* CRITICAL: Hide Alpine elements before initialization */
    [x-cloak] { 
        display: none !important; 
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }