/*
 * Quran Academy Theme Styles
 * Additional styles beyond Tailwind
 */

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

/* Custom animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in-up 0.4s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reading progress bar */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #A78BFA, #D4AF37);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* Sticky enrollment bar */
#enrollment-sticky {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* Details/summary styling for FAQs */
summary::-webkit-details-marker {
    display: none;
}

/* Print styles */
@media print {
    #promo-bar,
    #main-nav,
    #sticky-cta,
    #reading-progress,
    #enrollment-sticky,
    .widget-area,
    footer {
        display: none !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}