/* Custom Styles for CleverTech */
::selection { background-color: #ddd6fe; color: #1e293b; }
.dark ::selection { background-color: #4f46e5; color: #f1f5f9; }
body { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }

.fade-in-element { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.fade-in-element.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.card-hover-effect { 
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; 
}
.card-hover-effect:hover { 
    transform: translateY(-8px); 
}
/* Note: Shadow styles are handled by Tailwind classes mixed with apply in CSS if configured, 
   but since we are extracting inline CSS, we rely on standard CSS or utility classes in HTML. 
   Ideally these hover states should be mostly utility classes. 
   The original CSS had: @apply shadow-2xl dark:shadow-brand-violet/20; 
   We will keep it as standard CSS here or assume Tailwind processes it if we had a build step.
   Since we don't have a build step, we'll use CSS properties directly.
*/
.card-hover-effect:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.dark .card-hover-effect:hover {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

.channel-pill { 
    background-color: #f1f5f9; 
    color: #64748b; 
    font-size: 0.875rem; 
    font-weight: 500; 
    padding: 0.25rem 0.75rem; 
    border-radius: 9999px; 
    transition: background-color 0.2s, color 0.2s; 
}
.dark .channel-pill { 
    background-color: #1e293b; 
    color: #475569; 
}

.animated-gradient-bg {
    background: linear-gradient(125deg, #020617, #0f172a, #13224a, #0f172a, #020617);
    background-size: 400% 400%;
    animation: background-pan 15s ease-in-out infinite;
}