/* Animated Glowing Border for Vials */

.vial-glow-container {
    position: relative;
    display: inline-block;
    padding: 2px;
    /* Performance: isolate vial frame rendering */
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.vial-animated-border-glow,
.vial-animated-border {
    position: absolute;
    overflow: hidden;
    border-radius: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.vial-animated-border-glow {
    overflow: hidden;
    filter: blur(20px);
    /* Reduce blur performance impact */
    will-change: transform;
}

.vial-animated-border:before,
.vial-animated-border-glow:before {
    content: '';
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    position: absolute;
    /* OPTIMIZED: Reduced from 99999px - still covers avatar but less intensive */
    width: 500px;
    height: 500px;
    background-repeat: no-repeat;
    background-position: 0 0;
    /* SLOWED DOWN: 4s → 12s to reduce CPU load */
    animation: vialRotate 12s linear infinite;
    /* GPU acceleration */
    will-change: transform;
}


/* Color variations based on vial type */

.vial-glow-yellow .vial-animated-border:before,
.vial-glow-yellow .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ffa500, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-red .vial-animated-border:before,
.vial-glow-red .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ff3333, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-blue .vial-animated-border:before,
.vial-glow-blue .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #1976ed, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-purple .vial-animated-border:before,
.vial-glow-purple .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #c946ff, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-green .vial-animated-border:before,
.vial-glow-green .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #00ff00, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-orange .vial-animated-border:before,
.vial-glow-orange .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ff6600, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-indigo .vial-animated-border:before,
.vial-glow-indigo .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #8a2be2, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-cyan .vial-animated-border:before,
.vial-glow-cyan .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #00d9ff, rgba(0, 0, 0, 0) 25%);
}


/* Gradient Variations */

.vial-glow-fire .vial-animated-border:before,
.vial-glow-fire .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ff0000, #ff6600, #ffa500, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-ice .vial-animated-border:before,
.vial-glow-ice .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #00d9ff, #1976ed, #00ffff, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-poison .vial-animated-border:before,
.vial-glow-poison .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #00ff00, #7fff00, #adff2f, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-galaxy .vial-animated-border:before,
.vial-glow-galaxy .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #c946ff, #8a2be2, #1976ed, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-sunset .vial-animated-border:before,
.vial-glow-sunset .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ff6600, #ffa500, #ff69b4, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-ocean .vial-animated-border:before,
.vial-glow-ocean .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #00d9ff, #1976ed, #00ff00, rgba(0, 0, 0, 0) 25%);
}

.vial-glow-royal .vial-animated-border:before,
.vial-glow-royal .vial-animated-border-glow:before {
    background-image: conic-gradient(rgba(0, 0, 0, 0), #ffd700, #c946ff, #8a2be2, rgba(0, 0, 0, 0) 25%);
}


/* Rainbow Effect */

.vial-glow-rainbow .vial-animated-border:before,
.vial-glow-rainbow .vial-animated-border-glow:before {
    background-image: conic-gradient( rgba(0, 0, 0, 0), #ff0000, #ff6600, #ffa500, #ffff00, #00ff00, #00d9ff, #1976ed, #8a2be2, #c946ff, rgba(0, 0, 0, 0) 50%);
}

.vial-animated-border:after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 3px;
    background: #1d2125;
    border-radius: 0;
}

.vial-glow-container .avatar {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

.vial-glow-container img {
    position: relative;
    z-index: 1;
}

.vial-glow-container .dune-portrait {
    position: relative;
    z-index: 1;
}

@keyframes vialRotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}