/* ============================================================
   BADGE BUBBLE — Système de bulle liquide animée
   Adapté du prototype HTML/CSS/JS vers Stimulus + Twig
   ============================================================ */

/* ---------- LA BULLE ---------- */
.badge-bubble {
    --fill:    0%;
    --accent:  #CD7F32;
    --accent-2:#E8C49A;
    --base:    transparent;

    width:        120px;
    height:       120px;
    position:     relative;
    border-radius:50%;
    background:   #ffffff;
    border:       1px solid rgba(255,255,255,0.9);
    box-shadow:
        0 20px 50px -15px var(--bubble-glow, rgba(12,129,228,0.18)),
        inset 0 4px 10px rgba(255,255,255,0.9),
        inset 0 -8px 22px rgba(0,0,0,0.04);
    overflow:     hidden;
    transition:   transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink:  0;
}

@media (max-width: 639px) {
    .badge-bubble {
        width:  80px;
        height: 80px;
    }
}

@keyframes badge-bubble-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.badge-bubble.levelup { animation: badge-bubble-pop 0.6s cubic-bezier(0.34,1.56,0.64,1); }

/* Fond = couleur du palier déjà acquis */
.badge-bubble__base {
    position:   absolute;
    inset:      0;
    background: var(--base);
    transition: background 0.5s ease;
}

/* Liquide — sa hauteur est la CSS custom property --fill */
.badge-bubble__liquid {
    position:   absolute;
    left:       -50%;
    bottom:     0;
    width:      200%;
    height:     var(--fill);
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    transition: height 1.1s cubic-bezier(0.45,0,0.2,1), opacity 0.4s ease;
}

/* Bulle vide → masquer liquide et bulles d'air */
.badge-bubble.empty .badge-bubble__liquid,
.badge-bubble.empty .badge-bubble__air { opacity: 0; }

/* Vagues SVG à la surface du liquide */
.badge-bubble__wave {
    position:        absolute;
    left:            0;
    bottom:          100%;
    width:           200%;
    margin-bottom:   -1px;
    pointer-events:  none;
}
.badge-bubble__wave path { fill: var(--accent-2); }

.badge-bubble__wave--back  { animation: badge-wave-move 7s   linear infinite reverse; }
.badge-bubble__wave--front { animation: badge-wave-move 4.5s linear infinite; }
.badge-bubble__wave--back path { fill: var(--accent); opacity: 0.5; }

@keyframes badge-wave-move {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Bulles d'air — confinées à la hauteur du liquide */
.badge-bubble__air {
    position:        absolute;
    left:            0;
    bottom:          0;
    width:           100%;
    height:          var(--fill);
    overflow:        hidden;
    pointer-events:  none;
    transition:      height 1.1s cubic-bezier(0.45,0,0.2,1);
}
.badge-bubble__air span {
    position:     absolute;
    bottom:       -6%;
    border-radius:50%;
    background:   rgba(255,255,255,0.5);
    box-shadow:   inset 0 0 4px rgba(255,255,255,0.7);
    animation:    badge-air-rise linear infinite;
}
@keyframes badge-air-rise {
    0%   { bottom:-6%; transform:scale(0.5) translateX(0);  opacity:0; }
    15%  { opacity:.85; }
    70%  { opacity:.85; }
    100% { bottom:104%;transform:scale(1)   translateX(6px);opacity:0; }
}

/* Désactive transitions pendant le changement de niveau */
.badge-bubble.no-anim .badge-bubble__liquid,
.badge-bubble.no-anim .badge-bubble__air { transition: none; }

/* Reflet spéculaire */
.badge-bubble__gloss {
    position:     absolute;
    border-radius:50%;
    background:   radial-gradient(closest-side, rgba(255,255,255,0.95), transparent);
    transform:    rotate(-18deg);
    pointer-events:none;
    z-index:      4;
    top:          10%;
    left:         16%;
    width:        36%;
    height:       22%;
}

/* Texte central — % */
.badge-bubble__center {
    position:       absolute;
    inset:          0;
    z-index:        3;
    display:        flex;
    align-items:    center;
    justify-content:center;
    pointer-events: none;
    text-shadow:    0 1px 2px rgba(0,0,0,0.12);
}
.badge-bubble__pct {
    font-weight:800;
    letter-spacing:-0.5px;
    color:#fff;
}
/* Quasi-vide : texte coloré pour rester lisible sur fond blanc */
.badge-bubble.low .badge-bubble__pct {
    color: var(--accent);
    text-shadow: none;
}