/* AI Card Animated Border - Magic Card Style */
/* Separate file to allow @property which Razor can't parse */

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.ai-card-wrapper {
    --border-radius: var(--bs-border-radius-xl, 0.75rem);
    position: relative;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.ai-card-wrapper::before,
.ai-card-wrapper::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--border-radius);
    background: conic-gradient(
        from var(--gradient-angle),
        #5ddcff,
        #3c67e3,
        #4e00c2,
        #3c67e3,
        #5ddcff
    );
    animation: ai-gradient-rotate 6s linear infinite;
}

.ai-card-wrapper::after {
    filter: blur(12px);
    opacity: 0.4;
}

.ai-card-wrapper .ai-card-content {
    position: relative;
    height: 100%;
    border: none !important;
    background: var(--bs-body-bg, #fff);
    border-radius: calc(var(--border-radius) - 1px);
    z-index: 1;
}

@keyframes ai-gradient-rotate {
    from {
        --gradient-angle: 0deg;
    }
    to {
        --gradient-angle: 360deg;
    }
}

/* Idea Card Selection Styles - minimal custom, uses Bootstrap where possible */
.idea-card {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
    cursor: pointer;
}

.idea-card:hover:not(.border-primary) {
    transform: translateY(-2px);
    border-color: var(--bs-primary) !important;
}

/* Selected state uses Bootstrap shadow-lg class in markup */