/* ON state */
#profile_pic_box.live > img {
    animation: floatAvatar 6s ease-in-out infinite alternate;
    transform-origin: center;
    object-fit: cover;       /* avoids letterbox while live */
    background: transparent; /* avoid dark fill while live */
}
/* shimmer (above image) */
#profile_pic_box { position: relative; } /* create stacking context */
#profile_pic_box.live::before{
    content:""; position:absolute; inset:0; border-radius:60%;
    background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
    transform: translateX(-160%); animation: shimmerMove 3.6s ease-in-out infinite;
    pointer-events:none; z-index:3;
}
/* rotating ring */
#profile_pic_box.live::after{
    content:""; position:absolute; inset:-3px; border-radius:60%; padding:3px;
    background: conic-gradient(from 0deg,#ff7a7a,#ffd36b,#6bf0ff,#b07aff,#ff7a7a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ringSpin 8s linear infinite; z-index:4;
}
@keyframes floatAvatar{
    0%{transform:scale(1) translateY(0); filter:brightness(1)}
    50%{transform:scale(1.04) translateY(-3px); filter:brightness(1.05)}
    100%{transform:scale(1) translateY(0); filter:brightness(1)}
}
@keyframes shimmerMove{50%{transform: translateX(160%)} 100%{transform: translateX(160%)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
    #profile_pic_box.live > img,
    #profile_pic_box.live::before,
    #profile_pic_box.live::after{ animation:none !important; }
}
#profile_pic_box:hover::before,
#profile_pic_box:hover::after,
#profile_pic_box:hover > img {
  animation-play-state: paused;
}
.animationBtn {
    background: none;
    border: solid 2px #ff0000;
    color: #ececec;
    margin-top: 7px;
}
.animationBtn:hover {
    border: solid 2px #ececec;
    color: #ff0000;
}