/* =========================================================
   ZUCK STORY RING
========================================================= */

#stories .story{
    width:45px !important;
}

#stories .story .item-preview{
    position:relative;
    width:45px !important;
    height:45px !important;
    overflow:hidden;
    border-radius:50%;
    padding:1px;
}

/* Instagram Gradient Ring */
#stories .story .item-preview::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(
        from 220deg,
        #fdf497,
        #fd5949,
        #d6249f,
        #962fbf,
        #285AEB,
        #fdf497
    );
    z-index:0;
}

/* Profile Image */
#stories .story .item-preview img{
    position:absolute;
    inset:2px;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    object-fit:cover;
    border-radius:50%;
    border:1px solid #111827;
    background:#111827;
    z-index:1;
}

/* Rotate only when opening */
#stories .story.active .item-preview::before{
    animation:ringSpin .8s linear;
}

/* Hide Username */
#stories .story .info{
    display:none !important;
}

/* =========================================================
   STORY LOADER
========================================================= */

.story-loading-ring{
    position:relative;
    width:45px;
    height:45px;
    border-radius:50%;
    overflow:hidden;
    padding:1px;
}

/* Rotating Gradient */
.story-loading-ring::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(
        from 220deg,
        #fdf497,
        #fd5949,
        #d6249f,
        #962fbf,
        #285AEB,
        #fdf497
    );
    animation:ringSpin .8s linear infinite;
    z-index:0;
}

/* Profile Image */
.story-loading-ring img{
    position:absolute;
    inset:2px;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    object-fit:cover;
    border-radius:50%;
    border:1px solid #111827;
    background:#111827;
    z-index:1;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes ringSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}