/**
 * Demo Center - Custom Styles
 * Supplements Tailwind with animations and utility classes
 */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Line clamp utility for card descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card hover glow effect */
.demo-card {
    box-shadow: 0 0 0 transparent;
}

.demo-card:hover {
    box-shadow: 0 8px 32px rgba(12, 140, 233, 0.15);
}

/* Placeholder image styling */
img[src*="placeholder"] {
    object-fit: contain;
    padding: 2rem;
    background: #22272E;
}

/* Focus states for accessibility */
a:focus-visible {
    outline: 2px solid #0C8CE9;
    outline-offset: 2px;
    border-radius: 0.75rem;
}

/* Loading animation */
#loading {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}