/* Custom styles complementary to Tailwind CSS */
/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}
/* Custom focus visible for accessibility */
*:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}
/* Card hover micro-animations */
.trending-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.trending-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-color: #c7d2fe; /* indigo-200 */
}
/* Result container pop animation */
@keyframes pop {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}
.animate-pop {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* Prose styling tweaks for the guide section */
.prose h2, .prose h3 {
    scroll-margin-top: 5rem;
}
/* Hide scrollbar for cleaner UI in some elements if needed */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}