// CHERRY SHOCK — Elemental Pop's reload discharge, a baked 21-frame overlay.
//
// ⚠️ The image, opacity and shake offset are all written from code per frame. No
// keyframe animation: the sequence has to start on a gameplay event and a CSS
// animation cannot be triggered from C# without rebuilding the panel.

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

    // ⛔ BEHIND THE HUD, IN FRONT OF THE WORLD — the same choice DamageOverlay
    // documents, and for the same reason: an effect that hides your ammo count and
    // your health at the moment you are reloading in a crowd is actively hostile.
    // A separate PanelComponent, so a separate ScreenPanel layer, rather than a
    // child of SurvivalHud.
    z-index: -1;
}

.frame {
    position: absolute;

    // ⚠️ OVERSIZED AND OFFSET, because the panel is SHAKEN. At exactly 100% the
    // shake would drag an empty edge in from whichever side it moved away from.
    // 8px of bleed on all sides covers the 3.5px default with room to raise it.
    left: -8px;
    top: -8px;
    width: 100%;
    height: 100%;
    margin-right: -16px;
    margin-bottom: -16px;

    // ⚠️ 100% 100%, NOT cover. The frames are authored 16:9 with the vignette's
    // dark edge landing ON the screen edge; `cover` would crop that away on any
    // other aspect ratio and leave a hard line where the falloff should be. Same
    // reasoning as the blood overlay.
    background-size: 100% 100%;
    background-repeat: no-repeat;

    // Set from code. Starting at 0 means a fresh spawn cannot flash frame zero for
    // the one frame before OnUpdate first runs.
    opacity: 0;
}