/* Popup Burst – frontend styles */

.pb-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
}

.pb-popup {
    position: absolute;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    will-change: transform, opacity;
}

/* ── Close button ───────────────────────────────────────────────── */
.pb-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    border: 2px solid #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
    transition: background .15s ease, transform .1s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.pb-close:hover {
    background: #c00;
    transform: scale(1.15);
}

/* ── Image / SVG inside popup ───────────────────────────────────── */
.pb-popup img,
.pb-popup svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.pb-popup .pb-svg-wrap svg {
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
}

/* ── Progress bar (timeout indicator) ──────────────────────────── */
.pb-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,.75);
    border-radius: 0 0 4px 4px;
    transform-origin: left center;
    transition: none; /* driven by JS animation */
}

/* ══ ANIMATIONS ════════════════════════════════════════════════════ */

/* fade */
.pb-anim-fade {
    animation: pb-fade-in .3s ease forwards;
}
.pb-anim-fade.pb-hiding {
    animation: pb-fade-out .25s ease forwards;
}

@keyframes pb-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* scale */
.pb-anim-scale {
    animation: pb-scale-in .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.pb-anim-scale.pb-hiding {
    animation: pb-scale-out .25s ease forwards;
}

@keyframes pb-scale-in  { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
@keyframes pb-scale-out { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.4); } }

/* slide (direction set dynamically via custom property) */
.pb-anim-slide {
    animation: pb-slide-in .3s ease forwards;
}
.pb-anim-slide.pb-hiding {
    animation: pb-slide-out .25s ease forwards;
}

@keyframes pb-slide-in  { from { opacity:0; transform: translate(var(--pb-slide-dx,0), var(--pb-slide-dy,20px)); }
                          to   { opacity:1; transform: translate(0,0); } }
@keyframes pb-slide-out { from { opacity:1; transform: translate(0,0); }
                          to   { opacity:0; transform: translate(var(--pb-slide-dx,0), var(--pb-slide-dy,20px)); } }

/* bounce */
.pb-anim-bounce {
    animation: pb-bounce-in .5s cubic-bezier(.36,.07,.19,.97) forwards;
}
.pb-anim-bounce.pb-hiding {
    animation: pb-fade-out .25s ease forwards;
}

@keyframes pb-bounce-in {
    0%   { opacity:0; transform:scale(.3)   translateY(-30px); }
    50%  { opacity:1; transform:scale(1.1)  translateY(6px); }
    70%  {            transform:scale(.95)  translateY(-3px); }
    90%  {            transform:scale(1.02) translateY(2px); }
    100% {            transform:scale(1)    translateY(0); }
}

/* flip */
.pb-anim-flip {
    animation: pb-flip-in .4s ease forwards;
    transform-style: preserve-3d;
    perspective: 600px;
}
.pb-anim-flip.pb-hiding {
    animation: pb-flip-out .3s ease forwards;
}

@keyframes pb-flip-in  { from { opacity:0; transform:rotateY(-90deg); } to { opacity:1; transform:rotateY(0); } }
@keyframes pb-flip-out { from { opacity:1; transform:rotateY(0); } to { opacity:0; transform:rotateY(90deg); } }

/* none */
.pb-anim-none { }
.pb-anim-none.pb-hiding { display:none!important; }