.editor-container,
.general-setup-container,
.price-others-container,
.seo-section-container,
.variation-setup-container,
.title-container
{
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.blue-fire-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Vibrant color variables for high contrast */
:root {
    --fire-blue1: rgba(0, 100, 255, 0.9);
    /* Deep blue */
    --fire-blue2: rgba(0, 200, 255, 0.8);
    /* Electric blue */
    --fire-cyan1: rgba(0, 255, 255, 0.7);
    /* Bright cyan */
    --fire-cyan2: rgba(100, 255, 255, 0.6);
    /* Light cyan */
    --fire-white: rgba(255, 255, 255, 0.9);
    /* Pure white */
    --fire-purple: rgba(150, 0, 255, 0.5);
    /* Purple accent */
}

/* High-contrast fire animation */
.editor-container.animating .blue-fire-animation,
.general-setup-container.animating .blue-fire-animation,
.price-others-container.animating .blue-fire-animation,
.seo-section-container.animating .blue-fire-animation,
.variation-setup-container.animating .blue-fire-animation,
.title-container.animating .blue-fire-animation{
    opacity: 1;
    background: linear-gradient(135deg,
            var(--fire-blue1) 0%,
            var(--fire-purple) 20%,
            var(--fire-blue2) 40%,
            var(--fire-cyan1) 60%,
            var(--fire-cyan2) 80%,
            var(--fire-white) 100%);
    animation:
        blueFire 1s infinite alternate,
        colorPulse 2s infinite alternate;
}

@keyframes blueFire {
    0% {
        box-shadow: 0 0 5px 2px var(--fire-blue1),
            0 0 15px 10px var(--fire-purple),
            0 0 25px 15px var(--fire-blue2);
        background-size: 100% 100%;
    }

    50% {
        box-shadow: 0 0 15px 8px var(--fire-blue2),
            0 0 30px 20px var(--fire-cyan1),
            0 0 45px 25px var(--fire-cyan2);
        background-size: 150% 150%;
    }

    100% {
        box-shadow: 0 0 5px 2px var(--fire-blue1),
            0 0 15px 10px var(--fire-purple),
            0 0 25px 15px var(--fire-blue2);
        background-size: 100% 100%;
    }
}

@keyframes colorPulse {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(-10deg) brightness(1.5);
    }
}

/* Intense particle effects */
.editor-container.animating .blue-fire-animation::before,
.editor-container.animating .blue-fire-animation::after,
.general-setup-container.animating .blue-fire-animation::before,
.general-setup-container.animating .blue-fire-animation::after,
.price-others-container.animating .blue-fire-animation::before,
.price-others-container.animating .blue-fire-animation::after,
.seo-section-container.animating .blue-fire-animation::before,
.seo-section-container.animating .blue-fire-animation::after,
.variation-setup-container.animating .blue-fire-animation::before,
.variation-setup-container.animating .blue-fire-animation::after,
.title-container.animating .blue-fire-animation::before,
.title-container.animating .blue-fire-animation::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: particles 2s infinite linear;
    mix-blend-mode: screen;
}

.editor-container.animating .blue-fire-animation::before,
.general-setup-container.animating .blue-fire-animation::before,
.price-others-container.animating .blue-fire-animation::before,
.seo-section-container.animating .blue-fire-animation::before,
.variation-setup-container.animating .blue-fire-animation::before ,
.title-container.animating .blue-fire-animation::before 
{
    background: radial-gradient(circle at 30% 30%,
            var(--fire-cyan1) 0%,
            transparent 70%);
    animation-delay: -0.5s;
}

.editor-container.animating .blue-fire-animation::after,
.general-setup-container.animating .blue-fire-animation::after,
.price-others-container.animating .blue-fire-animation::after,
.seo-section-container.animating .blue-fire-animation::after,
.variation-setup-container.animating .blue-fire-animation::after 
.title-container.animating .blue-fire-animation::after 
{
    background: radial-gradient(circle at 70% 70%,
            var(--fire-white) 0%,
            transparent 60%);
    animation: particles 3s infinite linear reverse;
}

@keyframes particles {
    0% {
        transform: scale(0.7);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(0.7);
        opacity: 0.7;
    }
}

/* Spark storm effect */
.editor-container.animating .spark,
.general-setup-container.animating .spark,
.price-others-container.animating .spark,
.seo-section-container.animating .spark,
.variation-setup-container.animating .spark,
.title-container.animating .spark
 {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px 2px var(--fire-cyan2);
    animation: sparkle 1s infinite;
    opacity: 0;
}

@keyframes sparkle {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(random(100) - 50px, -100px);
        opacity: 0;
    }
}

/* Flash effect for maximum visibility */
.editor-container.animating .blue-fire-animation,
.general-setup-container.animating .blue-fire-animation,
.price-others-container.animating .blue-fire-animation,
.seo-section-container.animating .blue-fire-animation,
.variation-setup-container.animating .blue-fire-animation
.title-container.animating .blue-fire-animation
{
    animation:
        blueFire 1s infinite alternate,
        colorPulse 2s infinite alternate,
        flash 3s infinite;
}

@keyframes flash {
    0%, 30%, 60%, 100% {
        opacity: 0.8;
    }
    15%, 45%, 75% {
        opacity: 1;
    }
}

.pc-header-ai-btn{
    position: sticky; top: 0; background: white; z-index: 10;
}