/* ================= FIRE HOVER EFFECT ================= */
#container{
    transition: box-shadow 0.6s ease;
}

/* 🔥 flame overlay */
#container::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at bottom center,
            rgba(37, 99, 235, 0.24),
            rgba(59, 130, 246, 0.1),
            transparent 70%
        );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

/* 🔥 flame shimmer on hover */
#container:hover::after{
    opacity: 1;
    animation: flameWave 2.5s ease-in-out infinite;
}

/* 🔥 glowing heat */
#container:hover{
    box-shadow:
        inset 0 -40px 120px rgba(37, 99, 235, 0.22),
        inset 0 0 80px rgba(191, 219, 254, 0.35);
}

/* 🔥 flame movement */
@keyframes flameWave {
    0% {
        background-position: 50% 100%;
        filter: blur(6px);
    }
    50% {
        background-position: 50% 80%;
        filter: blur(10px);
    }
    100% {
        background-position: 50% 100%;
        filter: blur(6px);
    }
}
/* ================= EDUCATION POP HOVER ================= */

/* soft pop on hover */
#container{
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* pop + glow */
#container{
    transform-origin: center center;
}

/* controlled pop layer */
#container::before{
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

/* pop + glow on hover (inside bounds) */
#container:hover::before{
    box-shadow:
        0 18px 50px rgba(37, 99, 235, 0.22),
        inset 0 0 30px rgba(147, 197, 253, 0.28);
    transform: scale(1.01);
}
#container::after{
    border-radius: 18px;
}

/* content gentle lift */
#container:hover #container-inside{
    transform: translateY(-6px);
    transition: transform 0.35s ease;
}

/* circles react slightly (NO animation override) */
#container:hover #circle-small,
#container:hover #circle-medium,
#container:hover #circle-large{
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

/* mobile safety */
@media (max-width: 768px){
    #container:hover{
        transform: none;
        box-shadow: none;
    }
}