/* ========================================
   UX Improvements - Animations
   ======================================== */

/* Card Entry Animation (Fade In Up) - סעיף 6 */
.book-card {
    animation: fadeInUpCards 0.4s ease-out;
}

@keyframes fadeInUpCards {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reset Button Shake Animation - סעיף 23 */
#resetFilters:active {
    animation: shake 0.5s ease-in-out;
}

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

/* Staggered animation for multiple cards */
.book-card:nth-child(1) { animation-delay: 0ms; }
.book-card:nth-child(2) { animation-delay: 50ms; }
.book-card:nth-child(3) { animation-delay: 100ms; }
.book-card:nth-child(4) { animation-delay: 150ms; }
.book-card:nth-child(5) { animation-delay: 200ms; }
.book-card:nth-child(6) { animation-delay: 250ms; }
.book-card:nth-child(7) { animation-delay: 300ms; }
.book-card:nth-child(8) { animation-delay: 350ms; }
.book-card:nth-child(9) { animation-delay: 400ms; }
.book-card:nth-child(10) { animation-delay: 450ms; }
.book-card:nth-child(11) { animation-delay: 500ms; }
.book-card:nth-child(12) { animation-delay: 550ms; }
.book-card:nth-child(13) { animation-delay: 600ms; }
.book-card:nth-child(14) { animation-delay: 650ms; }
.book-card:nth-child(15) { animation-delay: 700ms; }
.book-card:nth-child(16) { animation-delay: 750ms; }
.book-card:nth-child(17) { animation-delay: 800ms; }
.book-card:nth-child(18) { animation-delay: 850ms; }
.book-card:nth-child(19) { animation-delay: 900ms; }
.book-card:nth-child(20) { animation-delay: 950ms; }

/* Note: סעיף 60 (אנימציית לב) כבר קיים ב-style.css
   (.pulsing class with pulse-heart animation) */

/* Description Templates Menu - סעיף 32 */
.template-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
}

.template-item:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateX(-3px);
}

/* Carousel Thumbnails - סעיף 68 */
.carousel-thumbnails {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap;
    padding: 0 10px;
}

.carousel-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.carousel-thumbnail:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.carousel-thumbnail.active {
    opacity: 1;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

/* Messages Badge - סעיף 95 */
.messages-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-color);
}

.messages-badge.has-count {
    width: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ========================================
   Accessibility - Reduced Motion Support
   ======================================== */

/* Respect user's motion preferences for accessibility
   Users with vestibular disorders, motion sickness, epilepsy,
   ADHD, or autism may enable "Reduce Motion" in their OS.
   This ensures the site is usable for everyone. */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for accessibility */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations */
    .book-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable hover transforms */
    .template-item:hover,
    .carousel-thumbnail:hover {
        transform: none !important;
    }

    /* Keep essential visual feedback without motion */
    .carousel-thumbnail.active {
        border-color: var(--primary-gold);
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
    }
}