/* ==========================================================================
   UI ENHANCEMENTS & ENTRANCE ANIMATIONS (Category Archives)
   ========================================================================== */

/* 1. Hardware Accelerated Entrance Keyframes */
@keyframes elFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 2. Sequence Staggering for Listing Grid Items */
.tax-hp_listing_category .hp-grid__item,
.post-type-archive-hp_listing .hp-grid__item {
    opacity: 0;
    animation: elFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tax-hp_listing_category .hp-grid__item:nth-child(1),
.post-type-archive-hp_listing .hp-grid__item:nth-child(1) {
    animation-delay: 0.04s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(2),
.post-type-archive-hp_listing .hp-grid__item:nth-child(2) {
    animation-delay: 0.08s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(3),
.post-type-archive-hp_listing .hp-grid__item:nth-child(3) {
    animation-delay: 0.12s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(4),
.post-type-archive-hp_listing .hp-grid__item:nth-child(4) {
    animation-delay: 0.16s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(5),
.post-type-archive-hp_listing .hp-grid__item:nth-child(5) {
    animation-delay: 0.2s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(6),
.post-type-archive-hp_listing .hp-grid__item:nth-child(6) {
    animation-delay: 0.24s;
}

.tax-hp_listing_category .hp-grid__item:nth-child(n+7),
.post-type-archive-hp_listing .hp-grid__item:nth-child(n+7) {
    animation-delay: 0.28s;
}

/* 3. Smooth Card Image Zoom & Outline glows */
.hp-grid__item .hp-listing {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
}

.hp-grid__item .hp-listing:hover {
    transform: translate3d(0, -6px, 0) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: #3b82f6 !important;
}

.hp-listing__image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 4. Mobile Overlap Alignments for Fixed bottom navigation compatibility */
@media (max-width: 768px) {
    .el-fab-container {
        bottom: 90px !important;
        width: 92% !important;
        padding: 10px 15px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    }

    .hp-template--listing-view-page .hp-page__content {
        padding-bottom: 160px !important;
    }
}