/**
 * File: /sisme-games-editor/includes/user/user-header-menu/assets/user-header-menu.css
 * Styles pour le menu utilisateur du header
 * 
 * RESPONSABILITÉ:
 * - Avatar utilisateur rond 32x32px avec hover
 * - Tooltip menu déroulant avec actions utilisateur
 * - Animations transitions et effects hover
 * - Intégration visuelle système tooltip ALPHA
 * 
 * DÉPENDANCES:
 * - Système tooltip existant (.sisme-tooltip)
 * - Design tokens frontend (si disponibles)
 */

/* =========================
   USER HEADER MENU
   ========================= */

.sisme-header-user-menu {
    font-size: var(--sisme-size-icon-l);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

/* Animation hover avec effet de pulsation et glow */
.sisme-header-user-menu:hover {
    transform: scale(1.15) rotate(5deg);
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(66, 153, 225, 0.4),
        0 0 30px rgba(66, 153, 225, 0.3);
    filter: brightness(1.2) saturate(1.3);
}

/* Effet de cercle qui grandit au hover */
.sisme-header-user-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(66, 153, 225, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

.sisme-header-user-menu:hover::before {
    width: 60px;
    height: 60px;
}

/* Animation de "bounce" subtile */
.sisme-header-user-menu:active {
    transform: scale(0.95) rotate(-2deg);
    transition: all 0.1s ease;
}

/* Keyframe pour effet de pulsation continue (optionnel) */
@keyframes user-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.05); 
        opacity: 1;
    }
}

.sisme-header-user-menu:hover {
    animation: user-pulse 1.5s ease-in-out infinite;
}
