/* Notifications Hexagon phpBB */

/* Badge compteur */
#notification_list_button .badge {
    background: #ff2d2d !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 2px 7px !important;
    margin-left: 4px;
    box-shadow: 0 0 8px rgba(255,45,45,.8);
}

/* Badge visible */
#notification_list_button .badge:not(.hidden) {
    animation: notifBadgePulse 1.4s infinite ease-in-out;
}

/* Cloche avec notification */
#notification_list_button:has(.badge:not(.hidden)) .fa-bell {
    color: #ff2d2d !important;
    text-shadow: 0 0 10px rgba(255,45,45,.9);
    transform-origin: top center;
    animation: notifBellFacebook 2.2s infinite ease-in-out;
}

/* Halo autour de la cloche */
#notification_list_button:has(.badge:not(.hidden)) .fa-bell::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,45,45,.65);
    animation: notifBellHalo 2.2s infinite ease-out;
}

/* Corrige le positionnement du halo */
#notification_list_button .fa-bell {
    position: relative;
    display: inline-block;
}

/* Pulse badge */
@keyframes notifBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(255,45,45,.6);
    }

    50% {
        transform: scale(1.22);
        box-shadow: 0 0 16px rgba(255,45,45,1);
    }
}

/* Mouvement type Facebook/Discord */
@keyframes notifBellFacebook {
    0%, 70%, 100% {
        transform: scale(1) rotate(0deg);
    }

    8% {
        transform: scale(1.18) rotate(16deg);
    }

    16% {
        transform: scale(1.18) rotate(-16deg);
    }

    24% {
        transform: scale(1.14) rotate(10deg);
    }

    32% {
        transform: scale(1.1) rotate(-10deg);
    }

    40% {
        transform: scale(1.08) rotate(0deg);
    }
}

/* Halo lumineux */
@keyframes notifBellHalo {
    0% {
        box-shadow: 0 0 0 0 rgba(255,45,45,.65);
        opacity: 1;
    }

    45% {
        box-shadow: 0 0 0 12px rgba(255,45,45,0);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 12px rgba(255,45,45,0);
        opacity: 0;
    }
}