/* NightVenture - Combat UI animations */

.combat-resource-slot {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

.combat-resource-slot--popup {
    z-index: 8;
}

.combat-shell .combat-resource-slot .barre--combat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 0;
}

.combat-shell .barre--combat .barre-pv,
.combat-shell .barre--combat .barre-mana,
.combat-shell .barre--combat .barre-stamina,
.combat-shell .barre--combat .barre-xp {
    will-change: width, filter, box-shadow;
    transition: none;
}

.combat-shell--impact .combat-bar-fill--animated {
    animation: nvCombatResourceBarChange 680ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.combat-shell--impact .barre--combat:has(.combat-bar-fill--animated)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    animation: nvCombatResourceBarFlash 680ms ease-out both;
}

.combat-shell--impact .combat-bar-fill--animated::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 18px;
    height: 100%;
    background: rgba(255, 255, 255, 0.42);
    filter: blur(4px);
    opacity: 0;
    animation: nvCombatResourceBarEdge 680ms ease-out both;
    pointer-events: none;
}

.combat-resource-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 2px 12px;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 4.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    -webkit-text-stroke: 0.7px rgba(255, 255, 255, 0.96);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85),
        0 -1px 0 rgba(255, 255, 255, 0.65),
        1px 0 0 rgba(255, 255, 255, 0.65),
        -1px 0 0 rgba(255, 255, 255, 0.65),
        0 4px 12px rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0;
    animation: nvCombatResourcePopup 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.combat-resource-popup--damage {
    color: #ff2222;
}

.combat-resource-popup--heal {
    color: #32ff67;
}

.combat-float {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes nvCombatResourceBarChange {
    0% {
        width: var(--bar-from, 0%);
        filter: brightness(1.45) saturate(1.22);
    }

    65% {
        filter: brightness(1.18) saturate(1.1);
    }

    100% {
        width: var(--bar-to, 0%);
        filter: brightness(1) saturate(1);
    }
}

@keyframes nvCombatResourceBarFlash {
    0% {
        box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 215, 0, 0);
        opacity: 0;
    }

    18% {
        box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.22), 0 0 14px rgba(255, 215, 0, 0.18);
        opacity: 1;
    }

    100% {
        box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 215, 0, 0);
        opacity: 0;
    }
}

@keyframes nvCombatResourceBarEdge {
    0% {
        opacity: 0.85;
        transform: scaleX(0.7);
    }

    100% {
        opacity: 0;
        transform: scaleX(1.25);
    }
}

@keyframes nvCombatResourcePopup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55) translateY(8px);
        filter: brightness(1.45);
    }

    16% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.22) translateY(0);
        filter: brightness(1.35);
    }

    45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: brightness(1.05);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92) translateY(-14px);
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-shell--impact .combat-bar-fill--animated,
    .combat-shell--impact .barre--combat:has(.combat-bar-fill--animated)::after,
    .combat-shell--impact .combat-bar-fill--animated::before,
    .combat-resource-popup {
        animation: none;
    }
}