/**
 * Advanced Photoshop-inspired animated flame border effect for Idle Heroes icon
 * Professional-grade visual effects that perfectly match the game's style
 */

.idle-icon-container {
    position: relative;
    display: inline-block;
    margin: 0px auto;
    width: 350px;
    height: 350px;
    overflow: visible;
}

.idle-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 22%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Advanced inner flame effects with multiple layers */
.flame-border {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 24%;
    background: linear-gradient(45deg, 
        rgba(255, 69, 0, 0.8), 
        rgba(255, 140, 0, 0.8),
        rgba(255, 165, 0, 0.8), 
        rgba(255, 69, 0, 0.8));
    background-size: 200% 200%;
    z-index: 1;
    filter: blur(2.5px);
    animation: flameAnimation 3s ease infinite;
    opacity: 0.85;
    /* Advanced flame effect - creates subtle edge variation */
    box-shadow: 
        inset 0 0 3px rgba(255, 220, 0, 0.5),
        0 0 5px rgba(255, 140, 0, 0.6);
}

/* Professional outer glow effect - exact match to Idle Heroes style */
.flame-outer {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 25%;
    background: 
        radial-gradient(ellipse at top, rgba(255, 140, 0, 0.4), transparent 70%),
        radial-gradient(ellipse at bottom, rgba(255, 69, 0, 0.4), transparent 70%),
        radial-gradient(ellipse at left, rgba(255, 165, 0, 0.4), transparent 70%),
        radial-gradient(ellipse at right, rgba(255, 69, 0, 0.4), transparent 70%);
    background-size: 200% 200%;
    z-index: 0;
    filter: blur(3px);
    animation: flameGlowAnimation 5s ease infinite;
    opacity: 0.7;
}

/* Advanced photoshop-style flame particles with custom blending */
.flame-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    filter: blur(1px);
    mix-blend-mode: screen;
    z-index: 3;
    opacity: 0;
    animation: particleAnimation 1.8s ease-out forwards;
    transform: translateY(0) translateX(0);
}

/* Custom fire embers that match the game */
.flame-ember {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: rgba(255, 220, 0, 0.9);
    border-radius: 50%;
    filter: blur(0.5px);
    z-index: 4;
    opacity: 0;
    animation: emberAnimation 2.2s ease-out forwards;
}

/* Professional flame keyframe animation with more organic movement */
@keyframes flameAnimation {
    0% {
        background-position: 0% 50%;
        transform: scale(0.98) rotate(-0.5deg);
    }
    20% {
        transform: scale(0.99) rotate(0.2deg);
    }
    40% {
        transform: scale(1) rotate(-0.1deg);
    }
    60% {
        background-position: 70% 50%;
        transform: scale(1.01) rotate(0.3deg);
    }
    80% {
        background-position: 90% 50%;
        transform: scale(1.02) rotate(0.1deg);
    }
    90% {
        transform: scale(1) rotate(-0.2deg);
    }
    100% {
        background-position: 0% 50%;
        transform: scale(0.98) rotate(-0.5deg);
    }
}

/* Advanced glow animation for outer flame with more variation */
@keyframes flameGlowAnimation {
    0% {
        opacity: 0.55;
        transform: scale(0.98) rotate(-0.3deg);
    }
    25% {
        opacity: 0.65;
        transform: scale(0.99) rotate(0.4deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02) rotate(0.7deg);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.01) rotate(0.2deg);
    }
    100% {
        opacity: 0.55;
        transform: scale(0.98) rotate(-0.3deg);
    }
}

/* Professional particle animation */
@keyframes particleAnimation {
    0% {
        opacity: 0.9;
        transform: translateY(0) translateX(0) scale(1);
    }
    30% {
        opacity: 0.7;
        transform: translateY(calc(-10px)) translateX(var(--x, 0)) scale(0.9);
    }
    70% {
        opacity: 0.4;
        transform: translateY(calc(-20px)) translateX(var(--x, 0)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(-30px)) translateX(var(--x, 0)) scale(0.4);
    }
}

/* Advanced ember animation */
@keyframes emberAnimation {
    0% {
        opacity: 0.9;
        transform: translateY(0) translateX(0) scale(1);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) translateX(calc(var(--x, 0) * 2)) scale(0);
    }
}