/**
 * ============================================================================
 * GURABASNEED ULTRA-PREMIUM GLOBAL ENTRANCE & MOTION ENGINE (CSS)
 * Lightweight, GPU-Accelerated, High-Speed Perceived Performance System
 * ============================================================================
 */

/* --------------------------------------------------------------------------
 * 1. Global Content Entrance Animation (Triggered after Skeleton Dismissal)
 * -------------------------------------------------------------------------- */
.gb-content-wrapper.gb-revealed {
    animation: gb-reveal-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, transform;
}

@keyframes gb-reveal-in {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.994);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
 * 2. Capped Staggered Grid Reveal (0ms - 175ms Max, Never Delays Users)
 * -------------------------------------------------------------------------- */
.gb-content-wrapper.gb-revealed .product_item,
.gb-content-wrapper.gb-revealed .product-item,
.gb-content-wrapper.gb-revealed .category-item,
.gb-content-wrapper.gb-revealed .feature-box {
    animation: gb-item-entrance 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gb-item-entrance {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger indices 1 to 8 (max delay 175ms) */
.gb-content-wrapper.gb-revealed .product_item:nth-child(1),
.gb-content-wrapper.gb-revealed .product-item:nth-child(1) { animation-delay: 0ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(2),
.gb-content-wrapper.gb-revealed .product-item:nth-child(2) { animation-delay: 25ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(3),
.gb-content-wrapper.gb-revealed .product-item:nth-child(3) { animation-delay: 50ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(4),
.gb-content-wrapper.gb-revealed .product-item:nth-child(4) { animation-delay: 75ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(5),
.gb-content-wrapper.gb-revealed .product-item:nth-child(5) { animation-delay: 100ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(6),
.gb-content-wrapper.gb-revealed .product-item:nth-child(6) { animation-delay: 125ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(7),
.gb-content-wrapper.gb-revealed .product-item:nth-child(7) { animation-delay: 150ms; }
.gb-content-wrapper.gb-revealed .product_item:nth-child(8),
.gb-content-wrapper.gb-revealed .product-item:nth-child(8) { animation-delay: 175ms; }
/* Items 9+ reveal together immediately with index 8 */
.gb-content-wrapper.gb-revealed .product_item:nth-child(n+9),
.gb-content-wrapper.gb-revealed .product-item:nth-child(n+9) { animation-delay: 175ms; }

/* --------------------------------------------------------------------------
 * 3. Premium Micro-Interactions (Hover & Active Press)
 * -------------------------------------------------------------------------- */
.product_item,
.product-item {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
    transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
    .product_item:hover,
    .product-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.07);
    }
}

/* Subtle button press feedback */
.addcartbutton,
.order_now,
#order_now_btn,
.premium-large-order-btn,
.home-order-btn,
#homeOrderSubmitBtn {
    transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), opacity 0.15s ease;
    transform: translateZ(0);
}

.addcartbutton:active,
.order_now:active,
#order_now_btn:active,
.premium-large-order-btn:active,
.home-order-btn:active,
#homeOrderSubmitBtn:active {
    transform: scale(0.978) !important;
}

/* --------------------------------------------------------------------------
 * 4. Detail Page Gallery & Hero Grouped Transitions
 * -------------------------------------------------------------------------- */
.details-image-box,
.details-summary-box {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

/* --------------------------------------------------------------------------
 * 4.1. Detail Page Related Products Smooth Entrance Animation
 * -------------------------------------------------------------------------- */
.related-product-section .premium-product-card,
.related_slider .premium-product-card {
    animation: gb-item-entrance 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform;
    transform: translateZ(0);
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.related-product-section .premium-product-card:hover,
.related_slider .premium-product-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
 * 5. Mobile & Tablet GPU Containment & Content Visibility
 * -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Optimize below-the-fold rows so mobile CPU doesn't choke */
    .homeproduct:nth-of-type(n+3) {
        content-visibility: auto;
        contain-intrinsic-size: 0 420px;
    }
    
    /* Hardware acceleration for mobile cards & modal dialogs */
    .modal-dialog {
        transform: translateZ(0);
        will-change: transform;
    }
}

/* --------------------------------------------------------------------------
 * 6. Full Accessibility: Reduced-Motion Support
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gb-content-wrapper.gb-revealed,
    .gb-content-wrapper.gb-revealed .product_item,
    .gb-content-wrapper.gb-revealed .product-item,
    .gb-content-wrapper.gb-revealed .category-item,
    .gb-content-wrapper.gb-revealed .feature-box,
    .product_item,
    .product-item,
    .related-product-section .premium-product-card,
    .related_slider .premium-product-card,
    .addcartbutton,
    .order_now,
    #order_now_btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}