/* ==========================================================================
   Xuan Cuong Handicraft – motion.css (BẢN ĐỀ XUẤT, trang chủ)
   Thêm vào cuối style.css, hoặc enqueue SAU tất cả module CSS.
   Đi kèm animations-gsap.js v2.
   ========================================================================== */

:root {
    /* Bộ easing dùng chung cho mọi transition CSS – khớp với GSAP power3.out / expo.out */
    --xc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --xc-ease-image: cubic-bezier(0.16, 1, 0.3, 1);
    --xc-dur-fast: 0.25s;
    --xc-dur: 0.45s;
    --xc-dur-slow: 0.8s;
}

/* ---- 1. Nền khối Quà tặng doanh nghiệp: thu lớp nền cho vừa biên độ parallax mới
   (130% thay vì 160% → ảnh ít bị phóng, nét hơn; dư 15% mỗi phía đủ cho ±8%) */
.corporate-parallax-bg {
    top: -15%;
    height: 130%;
}

/* ---- 2. Header ẩn/hiện khi cuộn: cùng một easing, nhanh khi ẩn, êm khi hiện */
.site-header {
    transition:
        transform var(--xc-dur) var(--xc-ease-out),
        box-shadow var(--xc-dur) ease,
        background-color var(--xc-dur) ease;
}

/* ---- 3. Nút: thay hiệu ứng phóng to (scale 1.03 bằng GSAP) bằng nhấc nhẹ + mũi tên trượt */
.btn-hero-red,
.btn-story-red,
.btn-favorite-all,
.btn-sale-view-all {
    transition:
        background-color var(--xc-dur-fast) ease,
        color var(--xc-dur-fast) ease,
        border-color var(--xc-dur-fast) ease,
        transform var(--xc-dur) var(--xc-ease-out),
        box-shadow var(--xc-dur) var(--xc-ease-out);
}

.btn-hero-red .arrow-symbol,
.btn-story-red .arrow-symbol,
.corp-box-link .arrow,
.link-view-all .arrow {
    display: inline-block;
    transition: transform var(--xc-dur) var(--xc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .btn-hero-red:hover,
    .btn-story-red:hover,
    .btn-favorite-all:hover,
    .btn-sale-view-all:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
    }

    .btn-hero-red:hover .arrow-symbol,
    .btn-story-red:hover .arrow-symbol,
    .corp-box-link:hover .arrow,
    .link-view-all:hover .arrow {
        transform: translateX(4px);
    }

    /* ---- 4. Ảnh Journal: phóng rất chậm khi rê chuột (cảm giác "nhìn gần") */
    .article-card-thumb-wrap {
        overflow: hidden;
    }

    .article-card-thumb-wrap img {
        transition: transform 1.2s var(--xc-ease-image);
    }

    .journal-article-card:hover .article-card-thumb-wrap img {
        transform: scale(1.04);
    }

    /* ---- 5. Thẻ Quà tặng doanh nghiệp: viền sáng dần thay vì đổ bóng */
    .corporate-box-card {
        transition: border-color var(--xc-dur) ease, background-color var(--xc-dur) ease,
                    transform var(--xc-dur) var(--xc-ease-out);
    }

    .corporate-box-card:hover {
        transform: translateY(-4px);
    }

    /* ---- 6. Logo đối tác: xám → màu khi rê chuột */
    .partner-img-brand {
        filter: grayscale(1);
        opacity: 0.7;
        transition: filter var(--xc-dur-slow) ease, opacity var(--xc-dur-slow) ease,
                    transform var(--xc-dur-slow) var(--xc-ease-out);
    }

    /* Ghi đè hover cũ (scale 1.08 ở partners.css) cho nhẹ hơn */
    .partner-logo-item:hover .partner-img-brand,
    .partner-logo-link:hover .partner-img-brand {
        filter: grayscale(0);
        opacity: 1;
        transform: scale(1.03);
    }
}

/* ---- 7. Ảnh sản phẩm yêu thích: trượt ảnh khi hover chậm hơn, cùng easing */
.favorite-thumb-wrap .fav-img {
    transition-duration: 0.9s;
    transition-timing-function: var(--xc-ease-image);
}

/* ---- 8. Nút play video: nhịp "thở" chậm, nhẹ thay cho pulse (nếu đang có) */
@keyframes xc-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    50%      { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

.btn-video-play-pulse {
    animation: xc-breathe 3.2s ease-in-out infinite;
}

/* ---- 9. Trong lúc GSAP đang chạy hiệu ứng xuất hiện: tắt CSS transition của phần tử
   (nhiều thành phần có "transition: all" → hai hệ thống giành nhau gây giật) */
.xc-animating {
    transition: none !important;
}

/* ---- 9b. Khung ảnh có ảnh phóng/trôi bên trong: luôn cắt mép */
.logo-bulk-photo-col,
.custom-process-photo,
.catalog-product-item .item-thumb-link,
.featured-post-thumb-wrap {
    overflow: hidden;
}

/* ---- 11. Các trang khác ------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* Sản phẩm (cửa hàng, chất liệu, kỹ thuật): ảnh phóng rất chậm, tên đổi màu */
    .catalog-product-item .item-thumb-link img,
    .featured-post-thumb-wrap img,
    .next-article-card .next-thumb img,
    .related-product-thumb img {
        transition: transform 1.2s var(--xc-ease-image);
    }

    .catalog-product-item:hover .item-thumb-link img,
    .journal-featured-post:hover .featured-post-thumb-wrap img,
    .next-article-card:hover .next-thumb img,
    .related-product-card:hover .related-product-thumb img {
        transform: scale(1.04);
    }

    /* Nút thứ cấp: cùng kiểu nhấc nhẹ như nút chính */
    .btn-artisan-more,
    .btn-brief-gold,
    .btn-invitation-gold,
    .btn-rfq-submit-gold,
    .btn-vip-readmore,
    .btn-card-directions,
    .btn-detail-rfq,
    .btn-detail-custom,
    .social-pill-btn,
    .contact-social-pill,
    .partner-pill,
    .tag-pill {
        transition:
            background-color var(--xc-dur-fast) ease,
            color var(--xc-dur-fast) ease,
            border-color var(--xc-dur-fast) ease,
            transform var(--xc-dur) var(--xc-ease-out),
            box-shadow var(--xc-dur) var(--xc-ease-out);
    }

    .btn-artisan-more:hover,
    .btn-brief-gold:hover,
    .btn-invitation-gold:hover,
    .btn-rfq-submit-gold:hover,
    .btn-vip-readmore:hover,
    .btn-card-directions:hover,
    .btn-detail-rfq:hover,
    .btn-detail-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
    }

    .social-pill-btn:hover,
    .contact-social-pill:hover,
    .partner-pill:hover,
    .tag-pill:hover {
        transform: translateY(-1px);
    }

    .btn-artisan-more .arrow,
    .btn-detail-custom .arrow,
    .view-all-faq-link .arrow,
    .promo-action-btn .arrow {
        display: inline-block;
        transition: transform var(--xc-dur) var(--xc-ease-out);
    }

    .btn-artisan-more:hover .arrow,
    .btn-detail-custom:hover .arrow,
    .view-all-faq-link:hover .arrow,
    .promo-action-btn:hover .arrow {
        transform: translateX(4px);
    }
}

/* Câu hỏi FAQ: icon +/− xoay êm cùng nhịp mở ngăn kéo */
.faq-toggle-icon {
    transition: transform var(--xc-dur) var(--xc-ease-out);
}

/* ---- 10. Giảm chuyển động: tắt mọi chuyển động trang trí */
@media (prefers-reduced-motion: reduce) {
    .btn-video-play-pulse { animation: none; }
    .article-card-thumb-wrap img,
    .favorite-thumb-wrap .fav-img,
    .corporate-box-card,
    .partner-img-brand { transition: none; }
}