/* ============================================
   ANIMATIONS/NORMAL.CSS - Continuous Background Animations
   ============================================ */

/* Lava lamp gradient animations */
@keyframes lava-lamp {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Green Theme - Emerald Forest */
@keyframes lava-lamp-green {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Blue Theme - Ocean Depths */
@keyframes lava-lamp-blue {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Red Theme - Sunset Blaze */
@keyframes lava-lamp-red {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Floating particle animations for header */
@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    25% { transform: translate(20px, -15px) scale(1.1); opacity: 0.3; }
    50% { transform: translate(10px, -25px) scale(0.9); opacity: 0.2; }
    75% { transform: translate(-15px, -10px) scale(1.2); opacity: 0.4; }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33% { transform: translate(-25px, -20px) scale(1.2); opacity: 0.25; }
    66% { transform: translate(15px, -30px) scale(0.8); opacity: 0.15; }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    50% { transform: translate(30px, -20px) scale(1.3); opacity: 0.4; }
}

@keyframes float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    25% { transform: translate(-20px, -25px) scale(0.9); opacity: 0.2; }
    50% { transform: translate(25px, -15px) scale(1.1); opacity: 0.1; }
    75% { transform: translate(-15px, -35px) scale(1.4); opacity: 0.3; }
}

@keyframes float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(15px, -25px) scale(1.2); opacity: 0.3; }
    66% { transform: translate(-20px, -15px) scale(0.8); opacity: 0.2; }
}

@keyframes float-6 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(15px, -20px) scale(1.1); opacity: 0.4; }
}

@keyframes float-7 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    25% { transform: translate(-20px, -15px) scale(0.9); opacity: 0.25; }
    50% { transform: translate(25px, -25px) scale(1.3); opacity: 0.15; }
    75% { transform: translate(-15px, -30px) scale(1.1); opacity: 0.3; }
}

@keyframes float-8 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    33% { transform: translate(30px, -20px) scale(1.2); opacity: 0.35; }
    66% { transform: translate(-20px, -25px) scale(0.8); opacity: 0.25; }
}

@keyframes float-9 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50% { transform: translate(-25px, -20px) scale(1.1); opacity: 0.3; }
}

@keyframes float-10 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    25% { transform: translate(20px, -30px) scale(1.4); opacity: 0.2; }
    50% { transform: translate(-30px, -15px) scale(0.9); opacity: 0.1; }
    75% { transform: translate(15px, -35px) scale(1.2); opacity: 0.3; }
}

@keyframes float-11 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(-25px, -25px) scale(1.1); opacity: 0.3; }
    66% { transform: translate(20px, -20px) scale(0.9); opacity: 0.2; }
}

@keyframes float-12 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(25px, -30px) scale(1.2); opacity: 0.4; }
}

@keyframes float-13 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33% { transform: translate(20px, -20px) scale(1.3); opacity: 0.25; }
    66% { transform: translate(-15px, -25px) scale(0.8); opacity: 0.15; }
}

@keyframes float-14 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    25% { transform: translate(-20px, -30px) scale(1.1); opacity: 0.35; }
    50% { transform: translate(30px, -15px) scale(0.9); opacity: 0.25; }
    75% { transform: translate(-25px, -20px) scale(1.2); opacity: 0.4; }
}

@keyframes float-15 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    50% { transform: translate(15px, -25px) scale(1.1); opacity: 0.3; }
}

@keyframes float-16 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33% { transform: translate(25px, -20px) scale(1.2); opacity: 0.25; }
    66% { transform: translate(-20px, -30px) scale(0.9); opacity: 0.15; }
}

@keyframes float-17 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    50% { transform: translate(-30px, -25px) scale(1.1); opacity: 0.35; }
}

@keyframes float-18 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    25% { transform: translate(20px, -35px) scale(1.3); opacity: 0.2; }
    50% { transform: translate(-15px, -20px) scale(0.8); opacity: 0.1; }
    75% { transform: translate(25px, -30px) scale(1.2); opacity: 0.3; }
}

@keyframes float-19 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(-25px, -20px) scale(1.1); opacity: 0.3; }
    66% { transform: translate(20px, -25px) scale(0.9); opacity: 0.2; }
}

@keyframes float-20 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(15px, -30px) scale(1.2); opacity: 0.4; }
}

/* Button particle animations */
@keyframes btn-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    25% { transform: translate(10px, -10px) scale(1.1); opacity: 0.3; }
    50% { transform: translate(-5px, -15px) scale(0.9); opacity: 0.2; }
    75% { transform: translate(10px, -5px) scale(1.2); opacity: 0.4; }
}

@keyframes btn-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
    33% { transform: translate(-15px, -15px) scale(1.2); opacity: 0.25; }
    66% { transform: translate(10px, -20px) scale(0.8); opacity: 0.15; }
}

@keyframes btn-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    50% { transform: translate(20px, -15px) scale(1.3); opacity: 0.4; }
}

@keyframes btn-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    25% { transform: translate(-15px, -20px) scale(0.9); opacity: 0.2; }
    50% { transform: translate(20px, -10px) scale(1.1); opacity: 0.1; }
    75% { transform: translate(-10px, -30px) scale(1.4); opacity: 0.3; }
}

@keyframes btn-float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(15px, -25px) scale(1.2); opacity: 0.3; }
    66% { transform: translate(-20px, -15px) scale(0.8); opacity: 0.2; }
}

/* Document floating animation */
.floating {
    animation: float 3s ease-in-out infinite;
}

/* Normal Animation Classes */
.normal-gradient-flow {
    /* This ensures the lava-lamp gradient animation runs continuously */
    /* Works with both preset themes and custom gradients */
    animation: lava-lamp 12s ease-in-out infinite !important;
}

.normal-pulse-glow {
    /* Future implementation for pulse glow animation */
    /* Placeholder for future normal animation option */
}

/* Sparkle icon wiggle animation on button hover */
#aiButton:hover svg {
    animation: iconWiggle 0.8s ease-in-out infinite;
    transform: scale(1.15);
}

/* Icon wiggle animation */
@keyframes iconWiggle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-8deg) scale(1.1);
    }
    30% {
        transform: rotate(8deg) scale(1.1);
    }
    45% {
        transform: rotate(-6deg) scale(1.05);
    }
    60% {
        transform: rotate(6deg) scale(1.05);
    }
    75% {
        transform: rotate(-3deg) scale(1.02);
    }
    90% {
        transform: rotate(3deg) scale(1.02);
    }
}

/* Ghost pop animation */
@keyframes ghost-pop {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.8);
        opacity: 0.1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Ensure button particles are visible by default */
#aiButton [data-particle-group] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Button particle positioning and visibility */
#aiButton .absolute[data-particle-group] {
    pointer-events: none;
    z-index: 1;
}

/* Specific particle group visibility */
#aiButton [data-particle-group="top"] {
    opacity: 1 !important;
}

#aiButton [data-particle-group="middle"] {
    opacity: 1 !important;
}

#aiButton [data-particle-group="bottom"] {
    opacity: 1 !important;
}

#aiButton [data-particle-group="left"] {
    opacity: 1 !important;
}

#aiButton [data-particle-group="right"] {
    opacity: 1 !important;
}

/* Button theme classes with gradient animations */
#aiButton.theme-green {
    background: linear-gradient(45deg, #064e3b, #10b981, #059669, #34d399, #064e3b);
    background-size: 300% 300%;
    background-position: 0% 50%;
    animation: lava-lamp-green 12s ease-in-out infinite;
    /* Track the current gradient animation for processing states */
    --current-gradient-animation: lava-lamp-green;
    /* Track the current gradient background for processing states */
    --current-gradient-background: linear-gradient(45deg, #064e3b, #10b981, #059669, #34d399, #064e3b);
    /* Magnetic effect colors for green theme - derived from gradient */
    --magnetic-primary: #10b981;      /* Green from gradient */
    --magnetic-secondary: #34d399;    /* Lighter green from gradient */
    --magnetic-accent: #059669;       /* Darker green from gradient */
    --magnetic-glow: #06b6d4;        /* Cyan accent */
    --magnetic-extra: #fbbf24;       /* Yellow accent */
    --magnetic-special: #8b5cf6;     /* Purple accent */
    /* RGB versions for new magnetic effects */
    --magnetic-primary-rgb: 16, 185, 129;
    --magnetic-secondary-rgb: 52, 211, 153;
    --magnetic-accent-rgb: 5, 150, 105;
}

#aiButton.theme-blue {
    background: linear-gradient(45deg, #1e3a8a, #06b6d4, #3b82f6, #0ea5e9, #1e3a8a);
    background-size: 300% 300%;
    background-position: 0% 50%;
    animation: lava-lamp-blue 12s ease-in-out infinite;
    /* Track the current gradient animation for processing states */
    --current-gradient-animation: lava-lamp-blue;
    /* Track the current gradient background for processing states */
    --current-gradient-background: linear-gradient(45deg, #1e3a8a, #06b6d4, #3b82f6, #0ea5e9, #1e3a8a);
    /* Magnetic effect colors for blue theme - derived from gradient */
    --magnetic-primary: #06b6d4;      /* Cyan from gradient */
    --magnetic-secondary: #3b82f6;    /* Blue from gradient */
    --magnetic-accent: #0ea5e9;       /* Lighter blue from gradient */
    --magnetic-glow: #1e3a8a;        /* Dark blue from gradient */
    --magnetic-extra: #fbbf24;       /* Yellow accent */
    --magnetic-special: #8b5cf6;     /* Purple accent */
    /* RGB versions for new magnetic effects */
    --magnetic-primary-rgb: 6, 182, 212;
    --magnetic-secondary-rgb: 59, 130, 246;
    --magnetic-accent-rgb: 14, 165, 233;
}

#aiButton.theme-red {
    background: linear-gradient(45deg, #7f1d1d, #ea580c, #dc2626, #f97316, #7f1d1d);
    background-size: 300% 300%;
    background-position: 0% 50%;
    animation: lava-lamp-red 12s ease-in-out infinite;
    /* Track the current gradient animation for processing states */
    --current-gradient-animation: lava-lamp-red;
    /* Track the current gradient background for processing states */
    --current-gradient-background: linear-gradient(45deg, #7f1d1d, #ea580c, #dc2626, #f97316, #7f1d1d);
    /* Magnetic effect colors for red theme - derived from gradient */
    --magnetic-primary: #dc2626;      /* Red from gradient */
    --magnetic-secondary: #f97316;    /* Orange from gradient */
    --magnetic-accent: #ea580c;       /* Lighter orange from gradient */
    --magnetic-glow: #7f1d1d;        /* Dark red from gradient */
    --magnetic-extra: #fbbf24;       /* Yellow accent */
    --magnetic-special: #8b5cf6;     /* Purple accent */
    /* RGB versions for new magnetic effects */
    --magnetic-primary-rgb: 220, 38, 38;
    --magnetic-secondary-rgb: 249, 115, 22;
    --magnetic-accent-rgb: 234, 88, 12;
}

#aiButton.theme-purple {
    background: linear-gradient(45deg, #20113e, #880081, #4c1d95, #7c3aed, #20113e);
    background-size: 300% 300%;
    background-position: 0% 50%;
    animation: lava-lamp 12s ease-in-out infinite;
    /* Track the current gradient animation for processing states */
    --current-gradient-animation: lava-lamp;
    /* Track the current gradient background for processing states */
    --current-gradient-background: linear-gradient(45deg, #20113e, #880081, #4c1d95, #7c3aed, #20113e);
    /* Magnetic effect colors for purple theme - derived from gradient */
    --magnetic-primary: #7c3aed;      /* Purple from gradient */
    --magnetic-secondary: #880081;    /* Magenta from gradient */
    --magnetic-accent: #4c1d95;       /* Dark purple from gradient */
    --magnetic-glow: #20113e;         /* Very dark purple from gradient */
    --magnetic-extra: #fbbf24;       /* Yellow accent */
    --magnetic-special: #06b6d4;     /* Cyan accent */
    /* RGB versions for new magnetic effects */
    --magnetic-primary-rgb: 124, 58, 237;
    --magnetic-secondary-rgb: 136, 0, 129;
    --magnetic-accent-rgb: 76, 29, 149;
}