/* =============================================
   PANEL-ANIMATIONS.CSS - Animations and Keyframes
   =============================================
   This file contains all @keyframes animations used 
   throughout the panel interface including:
   - QTE and timer animations
   - Error and loading animations
   - Chat animations
   - Choice and completion animations
   - Navigation animations
   - Chapter completion animations
   - Journal and shimmer effects
   ============================================= */

/* =============================================
   QTE (QUICK TIME EVENT) ANIMATIONS
   ============================================= */

@keyframes qteCountdown5s {
    from { width: 100%; }
    to { width: 0%; }
}

/* =============================================
   ERROR AND FEEDBACK ANIMATIONS
   ============================================= */

@keyframes errorSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

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

@keyframes journal-shimmer {
    0%, 100% { 
        border-color: rgba(255, 215, 180, 0.3);
        box-shadow: 
            0 0 40px rgba(45, 45, 65, 0.6),
            0 0 20px rgba(255, 215, 180, 0.3),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 10px rgba(255, 215, 180, 0.25);
    }
    50% { 
        border-color: rgba(255, 215, 180, 0.5);
        box-shadow: 
            0 0 40px rgba(45, 45, 65, 0.6),
            0 0 20px rgba(255, 215, 180, 0.3),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 18px rgba(255, 215, 180, 0.4);
    }
}

@keyframes shimmer-border {
    0%, 100% { 
        border-color: rgba(255, 215, 180, 0.3);
        box-shadow: 
            0 0 40px rgba(74, 59, 107, 0.6),
            0 0 20px rgba(123, 97, 172, 0.4),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 8px rgba(255, 215, 180, 0.2);
    }
    25% { 
        border-color: rgba(255, 215, 180, 0.5);
        box-shadow: 
            0 0 40px rgba(74, 59, 107, 0.6),
            0 0 20px rgba(123, 97, 172, 0.4),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 12px rgba(255, 215, 180, 0.3);
    }
    50% { 
        border-color: rgba(255, 215, 180, 0.6);
        box-shadow: 
            0 0 40px rgba(74, 59, 107, 0.6),
            0 0 20px rgba(123, 97, 172, 0.4),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 15px rgba(255, 215, 180, 0.4);
    }
    75% { 
        border-color: rgba(255, 215, 180, 0.4);
        box-shadow: 
            0 0 40px rgba(74, 59, 107, 0.6),
            0 0 20px rgba(123, 97, 172, 0.4),
            inset 0 0 30px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 10px rgba(255, 215, 180, 0.25);
    }
}

@keyframes journalReceiveGlow {
    0% {
        text-shadow: 
            0 0 8px rgba(255, 215, 180, 0.8),
            0 0 16px rgba(255, 215, 180, 0.6),
            0 0 24px rgba(255, 215, 180, 0.4);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(255, 215, 180, 1),
            0 0 40px rgba(255, 215, 180, 0.8),
            0 0 60px rgba(255, 215, 180, 0.6);
        transform: scale(1.3);
    }
    100% {
        text-shadow: 
            0 0 8px rgba(255, 215, 180, 0.8),
            0 0 16px rgba(255, 215, 180, 0.6),
            0 0 24px rgba(255, 215, 180, 0.4);
        transform: scale(1);
    }
}

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

@keyframes ornamentGlow {
    0% {
        text-shadow: 0 0 5px rgba(139, 69, 19, 0.3);
        color: #CD853F;
    }
    100% {
        text-shadow: 0 0 10px rgba(139, 69, 19, 0.6);
        color: #DEB887;
    }
}

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

@keyframes bubbleFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes chat-loading-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes chatPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
}

/* =============================================
   LOADING AND SPINNER ANIMATIONS
   ============================================= */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

/* =============================================
   CHOICE AND COMPLETION ANIMATIONS
   ============================================= */

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

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

/* =============================================
   STORY GENERATION ANIMATIONS
   ============================================= */

@keyframes shimmer {
    0% {
        background-position: -200% 0, -400% 0;
    }
    100% {
        background-position: 200% 0, 400% 0;
    }
}

@keyframes purpleShimmer {
    0% {
        background-position: -200% 0, -600% 0;
    }
    33% {
        background-position: 0% 0, -200% 0;
    }
    67% {
        background-position: 100% 0, 200% 0;
    }
    100% {
        background-position: 200% 0, 600% 0;
    }
}

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

@keyframes tapRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes shimmer-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(1deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
    75% { transform: translateY(-12px) rotate(0.5deg); }
}

/* =============================================
   CHAPTER COMPLETION ANIMATIONS
   ============================================= */

@keyframes flashyTextIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        text-shadow: 0 0 0px rgba(255, 215, 180, 0);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.05);
        text-shadow: 0 0 20px rgba(255, 215, 180, 1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        text-shadow: 0 0 8px rgba(255, 215, 180, 0.6);
    }
}

@keyframes sparkleIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
        text-shadow: 0 0 0px rgba(255, 215, 180, 0);
    }
    70% {
        opacity: 1;
        transform: scale(1.2) rotate(0deg);
        text-shadow: 0 0 25px rgba(255, 215, 180, 1);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 10px rgba(255, 215, 180, 0.6);
    }
}

@keyframes glowIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        text-shadow: 0 0 0px rgba(255, 215, 180, 0);
    }
    60% {
        opacity: 0.9;
        transform: translateX(10px);
        text-shadow: 0 0 15px rgba(255, 215, 180, 0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
        text-shadow: 0 0 8px rgba(255, 215, 180, 0.4);
    }
}

@keyframes fadeUpGlow {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(2px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        filter: blur(0px);
    }
}

@keyframes buttonPulseIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
        box-shadow: 0 0 0px rgba(255, 215, 180, 0);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 215, 180, 0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 215, 180, 0.3);
    }
}

@keyframes chapterDisappear {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    30% {
        opacity: 0.8;
        transform: scale(1.05);
        filter: blur(1px);
        box-shadow: 0 0 40px rgba(255, 215, 180, 0.8);
    }
    60% {
        opacity: 0.4;
        transform: scale(0.9);
        filter: blur(2px);
        box-shadow: 0 0 60px rgba(255, 215, 180, 0.6);
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
        filter: blur(4px);
        box-shadow: 0 0 20px rgba(255, 215, 180, 0.3);
    }
}

/* =============================================
   FLOATING PARTICLE ANIMATION
   ============================================= */

@keyframes floatInBar {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(-4px) translateX(2px) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-8px) translateX(-3px) scale(1.2);
    }
    85% {
        opacity: 0.3;
        transform: translateY(-12px) translateX(4px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) translateX(-2px) scale(0);
    }
}