/* ==========================================================
   HANIYEL
========================================================== */

@import url("base/reset.css");
@import url("base/variables.css");
@import url("base/spacing.css");
@import url("base/layout.css");
@import url("base/utilities.css");
@import url("base/typography.css");
@import url("base/global.css");
@import url("layout/header.css");
@import url("components.css");
@import url("components/buttons.css");
@import url("components/header-search.css");
@import url("components/header-actions.css");
@import url("components/navigation.css");
@import url("components/category-navigation.css");
@import url("sections/hero.css");
@import url("sections/categories.css");
@import url("sections/mega-menu.css");
@import url("sections/featured-products.css");
@import url("sections/product-card.css");
@import url("sections/editors-picks.css");
@import url("sections/collection-banner.css");
@import url("sections/lifestyle-inspiration.css");
@import url("sections/why-haniyel.css");
@import url("sections/newsletter.css");
@import url("sections/instagram-gallery.css");
@import url("sections/footer.css");
@import url("components/mobile-slide-menu.css");
@import url("sections/shop.css");
@import url("responsive.css");

/* ==================================================
   GLOBAL REVEAL ANIMATIONS
================================================== */

.section-hidden{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity 1.1s ease,

        transform 1.1s cubic-bezier(.2,.8,.2,1);

    will-change:opacity,transform;

}

.section-visible{

    opacity:1;

    transform:translateY(0);

}

/* ============================ */

.hero.section-hidden{

    transform:none;

    opacity:1;

}

/* ============================ */

img{

    transition:

        transform .8s ease,

        filter .8s ease;

}

/* ============================ */

button,
.button,
a{

    transition:

        all .35s ease;

}

/* ============================ */

@media(prefers-reduced-motion:reduce){

    .section-hidden,
    .section-visible{

        transition:none;

        transform:none;

        opacity:1;

    }

}