// DAMAGE OVERLAY — the blood vignette, from the GMod addon's own textures.
//
// ⚠️ Opacity is driven per frame from code, NOT by a keyframe. The pulse has to
// stay in phase with the health-driven base layer, and two independent CSS
// animations would drift apart from each other.

.blood {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;

    // ⛔ Behind nothing and in front of the world. It must not sit over the HUD
    // itself — a health bar you cannot read at low health is the opposite of the
    // point — and it is a separate PanelComponent (so a separate ScreenPanel
    // layer) rather than a child of SurvivalHud for exactly that reason.
    z-index: -1;
}

.layer {
    position: absolute;
    width: 100%;
    height: 100%;

    // ⚠️ 100% 100%, not cover. These are authored 16:9 vignettes whose dark edge
    // is meant to land ON the screen edge; `cover` would crop that edge away on
    // any other aspect ratio and leave a hard line where the fade should be.
    background-size: 100% 100%;
    background-repeat: no-repeat;

    // Set from code every frame. Starting at 0 means a fresh spawn never flashes
    // a full-strength overlay for the frame before OnUpdate first runs.
    opacity: 0;
}

.damage {
    background-image: url( "ui/blood/blood_damage.png" );
}

.highlights {
    background-image: url( "ui/blood/blood_highlights.png" );
}