/* 
   Laflo LMS Frontend - Supplementary Custom CSS
   Extends Tailwind CSS utilities with animations and keyframe rules
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* Page scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Skeleton Shimmer Animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

.skeleton-shimmer {
    background-image: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%) !important;
    background-size: 400px 100% !important;
    animation: skeleton-shimmer 1.4s ease infinite !important;
}

/* Custom Slide Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease forwards;
}

/* Collapsible transitions helper */
.accordion-content {
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* Hide scrollbars but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}