.sbw-container {
    position:relative;
    background:linear-gradient(135deg,#ff9a9e 0%,#fad0c4 30%,#a18cd1 70%,#fbc2eb 100%);
    padding:35px 20px;
    border-radius:20px;
    overflow:hidden;
    margin:35px 0;
    box-shadow:0 15px 50px rgba(0,0,0,.25);
    color:#1a1a1a;
    font-family:system-ui,sans-serif;
}

.sbw-header {
    text-align:center;
    margin-bottom:30px;
    position:relative;
    z-index:3;
}

.sbw-logo {
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
    border:5px solid #fff;
    box-shadow:0 6px 18px rgba(0,0,0,.3);
}

.sbw-school {
    margin:0;
    font-size:2rem;
    font-weight:800;
    color:#fff;
    text-shadow:2px 2px 6px rgba(0,0,0,.4);
}

.sbw-title {
    font-size:2.4rem;
    margin:15px 0 25px;
    color:#fff;
    text-shadow:0 3px 10px rgba(0,0,0,.5);
    position:relative;
    display:inline-block;
}

.sparkle {
    position:absolute;
    font-size:1.8rem;
    color:#ffeb3b;
    animation:sparkle 1.8s infinite ease-in-out;
    text-shadow:0 0 10px #ffeb3b;
}

@keyframes sparkle {
    0%,100%{opacity:.7;transform:scale(.9) rotate(0)}
    50%{opacity:1;transform:scale(1.5) rotate(360deg)}
}

/* Balloons */
.balloon {
    position:absolute;
    width:38px;
    height:50px;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
    opacity:.85;
    animation:float 10s infinite ease-in-out;
    z-index:1;
    background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),transparent 50%);
    will-change:transform;
}

.balloon-1{left:8%;bottom:-70px;background:#ff4757;animation-duration:9s}
.balloon-2{left:28%;bottom:-90px;background:#1e90ff;animation-duration:11s;animation-delay:1.5s}
.balloon-3{left:48%;bottom:-60px;background:#2ed573;animation-duration:13s;animation-delay:3s}
.balloon-4{left:68%;bottom:-80px;background:#ffa502;animation-duration:10s;animation-delay:.8s}
.balloon-5{left:88%;bottom:-65px;background:#9b59b6;animation-duration:12s;animation-delay:2.2s}

@keyframes float {
    0%{transform:translate3d(0,0,0) rotate(-4deg)}
    100%{transform:translate3d(0,-520px,0) rotate(12deg)}
}

/* Marquee */
.sbw-marquee-wrapper {
    overflow:hidden;
    position:relative;
    padding:25px 0;
}

.sbw-marquee {
    display:flex;
    animation:scroll var(--sbw-speed,20s) linear infinite;
    width:max-content;
    will-change:transform;
    backface-visibility:hidden;
    transform-style:preserve-3d;
}

.sbw-marquee-wrapper:hover .sbw-marquee{animation-play-state:paused}

.sbw-card {
    background:rgba(255,255,255,.92);
    border-radius:16px;
    padding:20px 26px;
    margin:0 16px;
    min-width:230px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
    transition:all .35s cubic-bezier(.175,.885,.32,1.275);
    animation:bounceIn .9s cubic-bezier(.22,.61,.36,1) forwards;
    opacity:0;
    border:2px solid transparent;
}

.sbw-card:hover {
    transform:scale(1.12) translate3d(0,-12px,0);
    box-shadow:0 16px 40px rgba(0,0,0,.3);
    border-color:#ffeb3b;
}

.sbw-photo {
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #fff;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    margin-bottom:15px;
}

.sbw-name {
    margin:10px 0 8px;
    font-size:1.35rem;
    font-weight:800;
    color:#2c3e50;
}

.sbw-info {
    font-size:1rem;
    color:#555;
}

.sbw-age {
    color:#e84393;
    font-weight:700;
    font-size:1.05rem;
    margin-top:6px;
}

/* Mobile */
@media (max-width:1024px) {
    .sbw-marquee-wrapper {
        overflow-x:auto;
        overflow-y:hidden;
        padding:15px 0;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x;
        scrollbar-width:none;
    }
    .sbw-marquee-wrapper::-webkit-scrollbar{display:none}
    .sbw-marquee{animation:none!important;flex-wrap:wrap;justify-content:flex-start;gap:clamp(12px,3vw,18px);width:100%;padding:0 12px}
    .sbw-card{min-width:44%;max-width:48%;margin:0;padding:clamp(12px,3vw,16px);animation:bounceIn .9s forwards;opacity:1}
    .sbw-card:active{transform:scale(.97)}
    .sbw-photo{width:80px;height:80px;border-width:3px;margin-bottom:10px}
    .sbw-name{font-size:1.15rem;margin:6px 0 4px}
    .sbw-info,.sbw-age{font-size:.9rem}
}

@media (max-width:480px) {
    .sbw-marquee-wrapper{padding:12px 0}
    .sbw-marquee{gap:14px;padding:0 10px}
    .sbw-card{min-width:82%;max-width:88%;padding:12px 14px}
    .sbw-photo{width:72px;height:72px;margin-bottom:8px}
    .sbw-name{font-size:1.08rem}
    .sbw-info,.sbw-age{font-size:.88rem}
}

/* Animations */
@keyframes scroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.6) translate3d(0,50px,0)}60%{opacity:.9;transform:scale(1.06) translate3d(0,-12px,0)}100%{opacity:1;transform:scale(1) translate3d(0,0,0)}}

/* No birthdays */
.sbw-no-birthdays {
    text-align:center;
    padding:50px 20px;
    font-size:1.5rem;
    color:#fff;
    text-shadow:2px 2px 8px rgba(0,0,0,.6);
    font-weight:600;
}
.extra-sparkle {
    position:absolute;
    width:8px;
    height:8px;
    background:#ffeb3b;
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    animation:twinkle 2.8s infinite ease-in-out;
    z-index:2;
    box-shadow:0 0 12px currentColor;
    will-change:transform,opacity;
}

.extra-sparkle:nth-child(odd){background:#ff4757}
.extra-sparkle:nth-child(3n){background:#2ed573}
.extra-sparkle:nth-child(4n){background:#1e90ff}

@keyframes twinkle {
    0%,100%{opacity:0;transform:translate3d(0,0,0) scale(.4)}
    50%{opacity:.9;transform:translate3d(0,-35px,0) scale(1.4)}
}