/**
 * Homepage-only motion: hero entrance + scroll reveals.
 * Respects prefers-reduced-motion.
 */

@media (prefers-reduced-motion: reduce) {
    .ux-hero .ux-hero__left,
    .ux-hero .ux-hero__right > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ux-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Hero (first fold) ---------- */
.home-section.ux-hero .home-left-img {
    animation: uxHeroLeft 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-section.ux-hero .home-right-img > div:first-child > span {
    display: inline-block;
    animation: uxFadeDown 0.65s ease 0.05s both;
}

.home-section.ux-hero .home-right-img > div:first-child h1 {
    animation: uxFadeUp 0.75s ease 0.12s both;
}

.home-section.ux-hero .home-right-img > div:first-child h4 {
    animation: uxFadeUp 0.75s ease 0.22s both;
}

.home-section.ux-hero .home-right-img > div:first-child .btn_black {
    animation: uxFadeUp 0.75s ease 0.32s both;
}

@keyframes uxHeroLeft {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes uxFadeDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Scroll sections ---------- */
.ux-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ux-delay, 0s);
    will-change: opacity, transform;
}

.ux-reveal.ux-inview {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Brand spotlight slider: real <img> + aspect ratio (theme .bg-img relies on bg-size + load script) ---------- */
.home-brands-spotlight .product-box-3 .img-wrapper .product-image.ratio_apos {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home-brands-spotlight .product-box-3 .img-wrapper .product-image.ratio_apos::before {
    content: "";
    display: block;
    padding-top: 127.7777778%;
}

.home-brands-spotlight .product-box-3 .img-wrapper .product-image a.pro-first,
.home-brands-spotlight .product-box-3 .img-wrapper .product-image a.pro-sec {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.home-brands-spotlight .product-box-3 .home-brand-product-img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}