/* ============================
   LOGO / NÚCLEO PRINCIPAL
============================ */

#bolinha {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}


#logo {
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(34, 211, 238, .9)) drop-shadow(0 0 18px rgba(124, 58, 237, .7)) drop-shadow(0 0 30px rgba(236, 72, 153, .5));

    animation: pulsarLogo 2s ease-in-out infinite;
}


/* Respiração suave do logo */

@keyframes pulsarLogo {

    0%,
    100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px rgba(34, 211, 238, .8)) drop-shadow(0 0 18px rgba(124, 58, 237, .6));
    }

    50% {
        transform: scale(1.06);
        filter:
            drop-shadow(0 0 14px rgba(34, 211, 238, 1)) drop-shadow(0 0 28px rgba(124, 58, 237, .9)) drop-shadow(0 0 40px rgba(236, 72, 153, .6));
    }

}


/* ============================
   SPINNER DE ENERGIA
============================ */

#spinner {

    position: absolute;
    inset: -10px;

    padding: 3px;
    border-radius: 50%;

    background: conic-gradient(from 0deg,
            #00E5FF,
            #3B82F6,
            #7C3AED,
            #EC4899,
            #00E5FF);


    animation: girar .9s linear infinite;


    /* cria apenas o anel */

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;


    pointer-events: none;


    /* brilho neon */

    filter:
        drop-shadow(0 0 6px rgba(0, 229, 255, .95)) drop-shadow(0 0 12px rgba(59, 130, 246, .85)) drop-shadow(0 0 22px rgba(124, 58, 237, .8)) drop-shadow(0 0 35px rgba(236, 72, 153, .6));

}


/* ============================
   ANIMAÇÃO DO SPINNER
============================ */

@keyframes girar {

    0% {

        transform: rotate(0deg) scale(1);

        filter:
            brightness(.9) drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 18px rgba(124, 58, 237, .7));

    }


    50% {

        transform: rotate(180deg) scale(1.05);

        filter:
            brightness(1.35) drop-shadow(0 0 12px rgba(0, 229, 255, 1)) drop-shadow(0 0 30px rgba(236, 72, 153, .8));

    }


    100% {

        transform: rotate(360deg) scale(1);

        filter:
            brightness(.9) drop-shadow(0 0 6px rgba(0, 229, 255, .9)) drop-shadow(0 0 18px rgba(124, 58, 237, .7));

    }

}