/* ========== ROTATING GLOW ANIMATION ========== */
@property --rotate-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateGlow {
    0% {
        --rotate-angle: 0deg;
    }
    100% {
        --rotate-angle: 360deg;
    }
}

/* ========== UI PREVIEW CARD ========== */
.ui-preview-card {
    padding: 0;
    background: #141414;
    border-radius: 16px;
    text-align: center;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(5deg) rotateX(-3deg);
    transition: transform 0.1s ease-out;
}

.card-glow-border {
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    padding: 3px;
    background: conic-gradient(from var(--glow-angle, 180deg) at var(--glow-x, 50%) var(--glow-y, 50%), 
        #fff 0deg, 
        #f44444 90deg, 
        #8b0000 180deg, 
        #f44444 270deg, 
        #fff 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.ui-preview-card:hover .card-glow-border {
    opacity: 1;
}

.glow-label {
    background: rgba(255,255,255,0.03);
}

.label-glow-border {
    position: absolute;
    inset: -3px;
    border-radius: 30px;
    padding: 3px;
    background: conic-gradient(from var(--rotate-angle, 0deg) at 50% 50%, 
        #fff 0deg, 
        #f44444 90deg, 
        #8b0000 180deg, 
        #f44444 270deg, 
        #fff 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    animation: rotateGlow 4s linear infinite;
}

.card-glow-border-ai {
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    padding: 3px;
    background: conic-gradient(from var(--ai-glow-angle, 180deg) at var(--ai-glow-x, 50%) var(--ai-glow-y, 50%), 
        #fff 0deg, 
        #f44444 90deg, 
        #8b0000 180deg, 
        #f44444 270deg, 
        #fff 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#aiPreviewCard:hover .card-glow-border-ai {
    opacity: 1;
}

.label-glow-border-ai {
    position: absolute;
    inset: -3px;
    border-radius: 30px;
    padding: 3px;
    background: conic-gradient(from var(--rotate-angle, 0deg) at 50% 50%, 
        #fff 0deg, 
        #f44444 90deg, 
        #8b0000 180deg, 
        #f44444 270deg, 
        #fff 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    animation: rotateGlow 4s linear infinite;
}