if (!supportsViewTransition()) {

  changeTheme();

  document.body.classList.add("theme-explosion");

  setTimeout(() => {

    document.body.classList.remove("theme-explosion");

  },800);

  return;

}


document.body.classList.add("theme-explosion");

setTimeout(() => {

  document.body.classList.remove("theme-explosion");

},800);


document.startViewTransition(changeTheme);

/*====================================================
    ARATECH SIDEBAR NOTIFICATION BADGES
====================================================*/


.sb-badge {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    min-width:24px;

    height:24px;


    padding:0 7px;


    margin-left:auto;


    border-radius:999px;


    background:#ff1744;

    color:white;


    font-size:11px;

    font-weight:800;


    line-height:1;


    box-shadow:

        0 0 12px rgba(255,23,68,.45);


    transition:

        transform .25s ease,
        box-shadow .25s ease;


    animation:

        badgeIdle 10s infinite;

}



/* movimiento "hey estoy aquí" */

@keyframes badgeIdle {


    0%,
    85%,
    100% {

        transform:
            translateX(0);

    }


    88% {

        transform:
            translateX(-4px)
            rotate(-5deg);

    }


    91% {

        transform:
            translateX(5px)
            rotate(5deg);

    }


    94% {

        transform:
            translateX(-2px)
            rotate(-2deg);

    }


}



/* cuando recibe actualización */

.sb-badge.update {


    animation:

        badgeUpdate .55s cubic-bezier(.22,1,.36,1);


}



@keyframes badgeUpdate {


    0% {

        transform:
            scale(1);

    }


    40% {

        transform:
            scale(1.35);


        box-shadow:

            0 0 25px rgba(255,23,68,.9);

    }


    100% {

        transform:
            scale(1);

    }

}

/*====================================================
    BADGE LEVELS
====================================================*/


.sb-badge.low {

    background:#10b981;

    box-shadow:
        0 0 12px rgba(16,185,129,.45);

}



.sb-badge.medium {

    background:#f59e0b;

    box-shadow:
        0 0 14px rgba(245,158,11,.55);

}



.sb-badge.high {

    background:#ef4444;

    box-shadow:
        0 0 18px rgba(239,68,68,.75);

}



.sb-badge.critical {


    background:#dc2626;


    animation:

        badgeCritical 2s infinite;


}



@keyframes badgeCritical {


    0%,
    100% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.12);

        box-shadow:

        0 0 28px rgba(220,38,38,.95);

    }

}