/* =========================================================
   FESTIVE BALLOON BLAST & FIREWORKS EFFECT
   St. Teresa School - Birthday Celebrations
========================================================= */

/* Relative positioning for parent cards */
.bday-card,
.bday-slide-item,
.bday-grid-card {
    position: relative;
    overflow: hidden;
}

/* Layering: ensure text & avatar are above celebration background */
.bday-profile,
.bday-grid-card > div,
.bday-card-header,
.bday-card-footer {
    position: relative;
    z-index: 5;
}

/* FX Background Container */
.bday-celebration-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

/* =========================================================
   1. CONTINUOUS CSS FIREWORKS BURSTS (Celebration Ambient Sparkle)
========================================================= */
.card-firework {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
}

.fw-pos-1 {
    top: 22px;
    right: 25px;
    animation: fireworkExplode1 5.2s ease-out infinite;
}

.fw-pos-2 {
    top: 60px;
    left: 20px;
    animation: fireworkExplode2 5.8s ease-out 2.6s infinite;
}

.fw-pos-3 {
    bottom: 50px;
    right: 20px;
    animation: fireworkExplode1 6.2s ease-out 1.5s infinite;
}

@keyframes fireworkExplode1 {
    0% {
        transform: scale(0.1);
        opacity: 0;
        box-shadow: 0 0 0 0 transparent;
    }
    12% {
        opacity: 0.8;
        transform: scale(0.75);
        box-shadow:
            0 -15px 0 1.5px #ff4757,
            11px -11px 0 1.5px #ffa502,
            15px 0 0 1.5px #2ed573,
            11px 11px 0 1.5px #1e90ff,
            0 15px 0 1.5px #e056fd,
            -11px 11px 0 1.5px #f1c40f,
            -15px 0 0 1.5px #ff6b81,
            -11px -11px 0 1.5px #2bcbba;
    }
    28% {
        opacity: 0.65;
        transform: scale(1.15);
        box-shadow:
            0 -26px 2.5px 1px #ff4757,
            18px -18px 2.5px 1px #ffa502,
            26px 0 2.5px 1px #2ed573,
            18px 18px 2.5px 1px #1e90ff,
            0 26px 2.5px 1px #e056fd,
            -18px 18px 2.5px 1px #f1c40f,
            -26px 0 2.5px 1px #ff6b81,
            -18px -18px 2.5px 1px #2bcbba;
    }
    48%, 100% {
        opacity: 0;
        transform: scale(1.45);
        box-shadow:
            0 -36px 5px 0 transparent,
            25px -25px 5px 0 transparent,
            36px 0 5px 0 transparent,
            25px 25px 5px 0 transparent,
            0 36px 5px 0 transparent,
            -25px 25px 5px 0 transparent,
            -36px 0 5px 0 transparent,
            -25px -25px 5px 0 transparent;
    }
}

@keyframes fireworkExplode2 {
    0% {
        transform: scale(0.1);
        opacity: 0;
        box-shadow: 0 0 0 0 transparent;
    }
    12% {
        opacity: 0.8;
        transform: scale(0.75);
        box-shadow:
            0 -14px 0 1.5px #fed330,
            10px -10px 0 1.5px #fc5c65,
            14px 0 0 1.5px #45aaf2,
            10px 10px 0 1.5px #26de81,
            0 14px 0 1.5px #fd9644,
            -10px 10px 0 1.5px #a55eea,
            -14px 0 0 1.5px #2bcbba,
            -10px -10px 0 1.5px #fed330;
    }
    28% {
        opacity: 0.65;
        transform: scale(1.15);
        box-shadow:
            0 -24px 2.5px 1px #fed330,
            17px -17px 2.5px 1px #fc5c65,
            24px 0 2.5px 1px #45aaf2,
            17px 17px 2.5px 1px #26de81,
            0 24px 2.5px 1px #fd9644,
            -17px 17px 2.5px 1px #a55eea,
            -24px 0 2.5px 1px #2bcbba,
            -17px -17px 2.5px 1px #fed330;
    }
    48%, 100% {
        opacity: 0;
        transform: scale(1.4);
        box-shadow:
            0 -34px 5px 0 transparent,
            24px -24px 5px 0 transparent,
            34px 0 5px 0 transparent,
            24px 24px 5px 0 transparent,
            0 34px 5px 0 transparent,
            -24px 24px 5px 0 transparent,
            -34px 0 5px 0 transparent,
            -24px -24px 5px 0 transparent;
    }
}

/* =========================================================
   2. TWINKLING SPARKLE STARS
========================================================= */
.sparkle-star {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff 15%, #ffd32a 70%, transparent 90%);
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    pointer-events: none;
}

.star-1 {
    top: 18%;
    right: 20%;
    animation: starTwinkle 3s ease-in-out infinite alternate;
}

.star-2 {
    top: 52%;
    left: 14%;
    animation: starTwinkle 3.5s ease-in-out 1.5s infinite alternate;
}

.star-3 {
    bottom: 25%;
    right: 15%;
    animation: starTwinkle 2.8s ease-in-out 0.8s infinite alternate;
}

@keyframes starTwinkle {
    0% { transform: scale(0.2) rotate(0deg); opacity: 0.1; }
    50% { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 5px #ffd32a); }
    100% { transform: scale(0.3) rotate(180deg); opacity: 0.2; }
}

/* =========================================================
   3. FLOATING 3D BALLOONS
========================================================= */
.bday-balloon-item {
    position: absolute;
    width: 26px;
    height: 33px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 6;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bday-balloon-item:hover {
    transform: scale(1.2) !important;
    filter: brightness(1.2);
}

/* 3D Gloss Highlight */
.bday-balloon-item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 7px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    transform: rotate(-30deg);
}

/* Balloon Knot */
.bday-balloon-item::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid currentColor;
}

/* Balloon Ribbon String */
.bday-balloon-item .balloon-string {
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 1.2px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
    transform-origin: top center;
    animation: stringSway 2.5s ease-in-out infinite alternate;
}

/* On Light Cards (Dedicated Birthday Pages) */
.bday-grid-card .bday-balloon-item .balloon-string {
    background: rgba(0, 0, 0, 0.25);
}

/* Balloon Color Gradients */
.balloon-red {
    background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 70%, #b71540 100%);
    color: #b71540;
    box-shadow: 0 4px 10px rgba(214, 48, 49, 0.35);
}

.balloon-gold {
    background: radial-gradient(circle at 35% 35%, #ffeaa7 0%, #f7b731 70%, #d35400 100%);
    color: #d35400;
    box-shadow: 0 4px 10px rgba(247, 183, 49, 0.35);
}

.balloon-blue {
    background: radial-gradient(circle at 35% 35%, #74b9ff 0%, #0984e3 70%, #0c2461 100%);
    color: #0c2461;
    box-shadow: 0 4px 10px rgba(9, 132, 227, 0.35);
}

.balloon-purple {
    background: radial-gradient(circle at 35% 35%, #d6a2e8 0%, #8854d0 70%, #3b1464 100%);
    color: #3b1464;
    box-shadow: 0 4px 10px rgba(136, 84, 208, 0.35);
}

.balloon-green {
    background: radial-gradient(circle at 35% 35%, #55efc4 0%, #00b894 70%, #006266 100%);
    color: #006266;
    box-shadow: 0 4px 10px rgba(0, 184, 148, 0.35);
}

/* Balloon Positions & Gentle Float Physics */
.balloon-pos-1 {
    top: 16px;
    left: 14px;
    animation: balloonFloatLeft 4.5s ease-in-out infinite;
}

.balloon-pos-2 {
    top: 20px;
    right: 16px;
    animation: balloonFloatRight 5.2s ease-in-out 1s infinite;
}

.balloon-pos-3 {
    bottom: 50px;
    left: 14px;
    animation: balloonFloatLeft 4.8s ease-in-out 2s infinite;
}

@keyframes balloonFloatLeft {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50% { transform: translate(3px, -12px) rotate(5deg); }
}

@keyframes balloonFloatRight {
    0%, 100% { transform: translate(0, 0) rotate(4deg); }
    50% { transform: translate(-4px, -13px) rotate(-6deg); }
}

@keyframes stringSway {
    0% { transform: translateX(-50%) rotate(-7deg); }
    100% { transform: translateX(-50%) rotate(7deg); }
}

/* =========================================================
   4. BALLOON BLAST / POPPING EFFECT 💥
========================================================= */
.bday-balloon-item.popping,
.bday-avatar-badge.popping {
    animation: balloonPopBoom 0.45s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

@keyframes balloonPopBoom {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.5) rotate(-12deg);
        filter: brightness(1.7);
    }
    55% {
        transform: scale(1.8) rotate(8deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* =========================================================
   5. INTERACTIVE BLAST BUTTON
========================================================= */
.bday-blast-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 50%, #ffa502 100%);
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 10px;
    letter-spacing: 0.3px;
    outline: none !important;
    position: relative;
    z-index: 6;
}

.bday-blast-btn:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 7px 18px rgba(255, 71, 87, 0.55);
    filter: brightness(1.1);
}

.bday-blast-btn:active {
    transform: scale(0.95);
}

.bday-avatar-badge {
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bday-avatar-badge:hover {
    transform: scale(1.3) !important;
}