/* =========================================================
   AURELIA JEWELLERY
   ASAREH ANIMATIONS STYLESHEET

   File:
   assets/css/asareh-animations.css

   Purpose:
   Luxury Motion System
   Scroll Reveals
   Hero Entrance
   Image Motion
   Product Micro Interactions
   Navigation Motion
   Loader Motion
   Page Transitions
========================================================= */


/* =========================================================
   01. ANIMATION VARIABLES
========================================================= */

:root {

    --asareh-motion-fast:
        220ms cubic-bezier(.2, .7, .2, 1);

    --asareh-motion-base:
        480ms cubic-bezier(.16, 1, .3, 1);

    --asareh-motion-medium:
        700ms cubic-bezier(.16, 1, .3, 1);

    --asareh-motion-slow:
        1000ms cubic-bezier(.16, 1, .3, 1);

    --asareh-motion-luxury:
        1300ms cubic-bezier(.16, 1, .3, 1);

    --asareh-motion-expo:
        cubic-bezier(.19, 1, .22, 1);

    --asareh-motion-out:
        cubic-bezier(.22, 1, .36, 1);

    --asareh-reveal-distance:
        52px;

    --asareh-reveal-distance-small:
        28px;
}


/* =========================================================
   02. GLOBAL MOTION BASE
========================================================= */

.asareh-body {
    opacity: 1;
}

.asareh-body.is-loading {
    overflow: hidden;
}

.asareh-body.is-menu-open,
.asareh-body.is-search-open {
    overflow: hidden;
}


/* =========================================================
   03. PAGE LOADER
========================================================= */

.asareh-loader {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 700ms var(--asareh-motion-out),
        visibility 700ms var(--asareh-motion-out);
}

.asareh-loader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.asareh-loader__inner {
    opacity: 0;

    transform:
        translateY(22px);

    animation:
        asarehLoaderContentIn
        900ms
        var(--asareh-motion-out)
        100ms
        forwards;
}

.asareh-loader__brand {
    opacity: 0;

    transform:
        translateY(14px);

    animation:
        asarehLoaderBrandIn
        850ms
        var(--asareh-motion-out)
        180ms
        forwards;
}

.asareh-loader__text {
    opacity: 0;

    animation:
        asarehLoaderTextIn
        700ms
        ease
        450ms
        forwards;
}

@keyframes asarehLoaderContentIn {

    0% {
        opacity: 0;
        transform: translateY(22px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes asarehLoaderBrandIn {

    0% {
        opacity: 0;
        letter-spacing: 0.42em;
        transform: translateY(14px);
    }

    100% {
        opacity: 1;
        letter-spacing: 0.24em;
        transform: translateY(0);
    }

}

@keyframes asarehLoaderTextIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }

}


/* =========================================================
   04. PAGE ENTRANCE
========================================================= */

.asareh-page-enter {

    opacity: 0;

    transform:
        translateY(12px);
}

.asareh-page-enter.is-ready {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        800ms
        var(--asareh-motion-out),

        transform
        800ms
        var(--asareh-motion-out);
}


/* =========================================================
   05. GENERIC REVEAL SYSTEM
========================================================= */

.asareh-reveal {

    opacity: 0;

    transform:
        translateY(
            var(--asareh-reveal-distance)
        );

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   06. REVEAL UP
========================================================= */

.asareh-reveal-up {

    opacity: 0;

    transform:
        translateY(
            var(--asareh-reveal-distance)
        );

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal-up.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   07. REVEAL DOWN
========================================================= */

.asareh-reveal-down {

    opacity: 0;

    transform:
        translateY(
            calc(
                var(--asareh-reveal-distance)
                * -1
            )
        );

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal-down.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   08. REVEAL FROM RIGHT
========================================================= */

.asareh-reveal-right {

    opacity: 0;

    transform:
        translateX(60px);

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal-right.is-visible {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   09. REVEAL FROM LEFT
========================================================= */

.asareh-reveal-left {

    opacity: 0;

    transform:
        translateX(-60px);

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal-left.is-visible {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   10. REVEAL SCALE
========================================================= */

.asareh-reveal-scale {

    opacity: 0;

    transform:
        scale(0.96);

    transition:
        opacity
        var(--asareh-motion-slow),

        transform
        var(--asareh-motion-slow);
}

.asareh-reveal-scale.is-visible {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   11. REVEAL BLUR
========================================================= */

.asareh-reveal-blur {

    opacity: 0;

    filter:
        blur(12px);

    transform:
        translateY(30px);

    transition:
        opacity
        900ms
        var(--asareh-motion-out),

        filter
        900ms
        var(--asareh-motion-out),

        transform
        900ms
        var(--asareh-motion-out);
}

.asareh-reveal-blur.is-visible {

    opacity: 1;

    filter:
        blur(0);

    transform:
        translateY(0);
}


/* =========================================================
   12. REVEAL CLIP
========================================================= */

.asareh-reveal-clip {

    clip-path:
        inset(
            0
            0
            100%
            0
        );

    transition:
        clip-path
        1200ms
        var(--asareh-motion-expo);
}

.asareh-reveal-clip.is-visible {

    clip-path:
        inset(
            0
            0
            0
            0
        );
}


/* =========================================================
   13. IMAGE REVEAL
========================================================= */

.asareh-image-reveal {

    position: relative;

    overflow: hidden;
}

.asareh-image-reveal::after {

    position: absolute;

    z-index: 5;

    inset: 0;

    content: "";

    background:
        var(--asareh-color-espresso-900);

    transform:
        translateX(0);

    transition:
        transform
        1300ms
        var(--asareh-motion-expo);
}

.asareh-image-reveal img {

    transform:
        scale(1.12);

    transition:
        transform
        1600ms
        var(--asareh-motion-expo);
}

.asareh-image-reveal.is-visible::after {

    transform:
        translateX(-101%);
}

.asareh-image-reveal.is-visible img {

    transform:
        scale(1);
}


/* =========================================================
   14. IMAGE REVEAL RTL
========================================================= */

.asareh-image-reveal--rtl::after {

    transform:
        translateX(0);
}

.asareh-image-reveal--rtl.is-visible::after {

    transform:
        translateX(101%);
}


/* =========================================================
   15. STAGGER SYSTEM
========================================================= */

.asareh-stagger-item {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity
        800ms
        var(--asareh-motion-out),

        transform
        800ms
        var(--asareh-motion-out);
}

.asareh-stagger-group.is-visible
.asareh-stagger-item {

    opacity: 1;

    transform:
        translateY(0);
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(1) {

    transition-delay:
        40ms;
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(2) {

    transition-delay:
        110ms;
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(3) {

    transition-delay:
        180ms;
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(4) {

    transition-delay:
        250ms;
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(5) {

    transition-delay:
        320ms;
}

.asareh-stagger-group.is-visible
.asareh-stagger-item:nth-child(6) {

    transition-delay:
        390ms;
}


/* =========================================================
   16. HERO INITIAL STATE
========================================================= */

.asareh-hero
.asareh-eyebrow {

    opacity: 0;

    transform:
        translateY(18px);
}

.asareh-hero__title {

    opacity: 0;

    transform:
        translateY(32px);
}

.asareh-hero__title span {

    opacity: 0;

    transform:
        translateY(22px);
}

.asareh-hero__description {

    opacity: 0;

    transform:
        translateY(22px);
}

.asareh-hero__actions {

    opacity: 0;

    transform:
        translateY(22px);
}

.asareh-scroll-indicator {

    opacity: 0;
}


/* =========================================================
   17. HERO READY STATE
========================================================= */

.asareh-hero.is-ready
.asareh-eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        900ms
        var(--asareh-motion-out)
        100ms,

        transform
        900ms
        var(--asareh-motion-out)
        100ms;
}

.asareh-hero.is-ready
.asareh-hero__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        1100ms
        var(--asareh-motion-out)
        180ms,

        transform
        1100ms
        var(--asareh-motion-out)
        180ms;
}

.asareh-hero.is-ready
.asareh-hero__title span {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        1100ms
        var(--asareh-motion-out)
        340ms,

        transform
        1100ms
        var(--asareh-motion-out)
        340ms;
}

.asareh-hero.is-ready
.asareh-hero__description {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        900ms
        var(--asareh-motion-out)
        470ms,

        transform
        900ms
        var(--asareh-motion-out)
        470ms;
}

.asareh-hero.is-ready
.asareh-hero__actions {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        900ms
        var(--asareh-motion-out)
        590ms,

        transform
        900ms
        var(--asareh-motion-out)
        590ms;
}

.asareh-hero.is-ready
.asareh-scroll-indicator {

    opacity: 1;

    transition:
        opacity
        900ms
        ease
        900ms;
}


/* =========================================================
   18. HERO IMAGE ENTRANCE
========================================================= */

.asareh-hero__image {

    transform:
        scale(1.07);

    transition:
        transform
        2200ms
        var(--asareh-motion-expo);
}

.asareh-hero.is-ready
.asareh-hero__image {

    transform:
        scale(1);
}


/* =========================================================
   19. HERO PARALLAX PREPARATION
========================================================= */

.asareh-hero__media {

    will-change:
        transform;
}

.asareh-hero__image {

    will-change:
        transform;
}


/* =========================================================
   20. HEADER INITIAL MOTION
========================================================= */

.asareh-header {

    opacity: 0;

    transform:
        translateY(-18px);
}

.asareh-header.is-ready {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        850ms
        var(--asareh-motion-out),

        transform
        850ms
        var(--asareh-motion-out),

        height
        var(--asareh-transition-base),

        color
        var(--asareh-transition-base),

        background
        var(--asareh-transition-base),

        border-color
        var(--asareh-transition-base),

        box-shadow
        var(--asareh-transition-base);
}


/* =========================================================
   21. HEADER LOGO MOTION
========================================================= */

.asareh-header__logo-main {

    transition:
        letter-spacing
        var(--asareh-motion-medium),

        opacity
        var(--asareh-motion-fast);
}

.asareh-header__logo:hover
.asareh-header__logo-main {

    letter-spacing:
        0.28em;
}


/* =========================================================
   22. HEADER NAV LINK MOTION
========================================================= */

.asareh-header__nav-link {

    transition:
        color
        var(--asareh-motion-fast),

        opacity
        var(--asareh-motion-fast);
}

.asareh-header__nav:hover
.asareh-header__nav-link {

    opacity:
        0.52;
}

.asareh-header__nav
.asareh-header__nav-link:hover {

    opacity:
        1;
}


/* =========================================================
   23. MOBILE MENU BACKDROP
========================================================= */

.asareh-menu-backdrop {

    position: fixed;

    z-index: 2900;

    inset: 0;

    background:
        rgba(
            10,
            6,
            4,
            0.64
        );

    opacity: 0;

    visibility: hidden;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        opacity
        500ms
        ease,

        visibility
        500ms
        ease;
}

.asareh-menu-backdrop.is-visible {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   24. MOBILE MENU ITEMS
========================================================= */

.asareh-mobile-menu__link {

    opacity: 0;

    transform:
        translateX(22px);

    transition:
        opacity
        500ms
        var(--asareh-motion-out),

        transform
        500ms
        var(--asareh-motion-out),

        color
        var(--asareh-motion-fast),

        padding-right
        var(--asareh-motion-base);
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link {

    opacity: 1;

    transform:
        translateX(0);
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(1) {

    transition-delay:
        80ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(2) {

    transition-delay:
        120ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(3) {

    transition-delay:
        160ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(4) {

    transition-delay:
        200ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(5) {

    transition-delay:
        240ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(6) {

    transition-delay:
        280ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(7) {

    transition-delay:
        320ms;
}

.asareh-mobile-menu.is-open
.asareh-mobile-menu__link:nth-child(8) {

    transition-delay:
        360ms;
}


/* =========================================================
   25. SEARCH DRAWER CONTENT
========================================================= */

.asareh-search-drawer__header,
.asareh-search-form {

    opacity: 0;

    transform:
        translateY(-12px);

    transition:
        opacity
        500ms
        var(--asareh-motion-out),

        transform
        500ms
        var(--asareh-motion-out);
}

.asareh-search-drawer.is-open
.asareh-search-drawer__header {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        150ms;
}

.asareh-search-drawer.is-open
.asareh-search-form {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        220ms;
}


/* =========================================================
   26. BUTTON LUXURY FILL EFFECT
========================================================= */

.asareh-button {

    isolation:
        isolate;
}

.asareh-button::before {

    position: absolute;

    z-index: -1;

    inset: 0;

    content: "";

    background:
        var(--asareh-color-champagne-500);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        650ms
        var(--asareh-motion-expo);
}

.asareh-button:hover::before {

    transform:
        scaleX(1);
}

.asareh-button--light::before {

    background:
        var(--asareh-color-espresso-900);
}

.asareh-button--ghost-light::before {

    background:
        var(--asareh-color-ivory-50);
}

.asareh-button--dark::before {

    background:
        var(--asareh-color-champagne-500);
}


/* =========================================================
   27. BUTTON TEXT SAFETY
========================================================= */

.asareh-button > * {

    position: relative;

    z-index: 2;
}


/* =========================================================
   28. CATEGORY CARD MOTION
========================================================= */

.asareh-category-card {

    isolation:
        isolate;
}

.asareh-category-card__content {

    transition:
        transform
        850ms
        var(--asareh-motion-expo);
}

.asareh-category-card:hover
.asareh-category-card__content {

    transform:
        translateY(-10px);
}

.asareh-category-card__number {

    transition:
        color
        var(--asareh-motion-fast);
}

.asareh-category-card:hover
.asareh-category-card__number {

    color:
        var(--asareh-color-champagne-400);
}


/* =========================================================
   29. CATEGORY IMAGE LUXURY ZOOM
========================================================= */

.asareh-category-card__image {

    will-change:
        transform;
}

.asareh-category-card:hover
.asareh-category-card__image {

    transform:
        scale(1.075);
}


/* =========================================================
   30. PRODUCT CARD MICRO MOTION
========================================================= */

.asareh-product-card {

    transition:
        transform
        500ms
        var(--asareh-motion-out);
}

.asareh-product-card:hover {

    transform:
        translateY(-5px);
}

.asareh-product-card__media {

    transition:
        box-shadow
        550ms
        var(--asareh-motion-out);
}

.asareh-product-card:hover
.asareh-product-card__media {

    box-shadow:
        0
        24px
        55px
        rgba(
            38,
            25,
            16,
            0.12
        );
}


/* =========================================================
   31. PRODUCT IMAGE SECONDARY EFFECT
========================================================= */

.asareh-product-card__media::after {

    position: absolute;

    z-index: 1;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0
            )
            65%,

            rgba(
                28,
                19,
                13,
                0.05
            )
            100%
        );

    opacity: 0;

    transition:
        opacity
        500ms
        ease;
}

.asareh-product-card:hover
.asareh-product-card__media::after {

    opacity: 1;
}


/* =========================================================
   32. PRODUCT WISHLIST
========================================================= */

.asareh-product-card__wishlist {

    opacity: 0;

    transform:
        translateY(8px)
        scale(0.92);

    transition:
        opacity
        350ms
        var(--asareh-motion-out),

        transform
        350ms
        var(--asareh-motion-out),

        color
        var(--asareh-motion-fast),

        background
        var(--asareh-motion-fast);
}

.asareh-product-card:hover
.asareh-product-card__wishlist {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.asareh-product-card__wishlist.is-active {

    opacity: 1;

    color:
        var(--asareh-color-white);

    background:
        var(--asareh-color-espresso-900);

    transform:
        scale(1);
}


/* =========================================================
   33. WISHLIST HEART PULSE
========================================================= */

.asareh-product-card__wishlist.is-pulsing {

    animation:
        asarehWishlistPulse
        450ms
        var(--asareh-motion-out);
}

@keyframes asarehWishlistPulse {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   34. PRODUCT TITLE MOTION
========================================================= */

.asareh-product-card__title {

    transition:
        transform
        450ms
        var(--asareh-motion-out);
}

.asareh-product-card:hover
.asareh-product-card__title {

    transform:
        translateY(-2px);
}


/* =========================================================
   35. FEATURED STORY IMAGE
========================================================= */

.asareh-featured__story-media img {

    transform:
        scale(1.03);

    transition:
        transform
        1600ms
        var(--asareh-motion-expo);
}

.asareh-featured__story:hover
.asareh-featured__story-media img {

    transform:
        scale(1.075);
}


/* =========================================================
   36. FEATURED STORY CONTENT
========================================================= */

.asareh-featured__story-content {

    transition:
        transform
        900ms
        var(--asareh-motion-expo);
}

.asareh-featured__story:hover
.asareh-featured__story-content {

    transform:
        translateY(-8px);
}


/* =========================================================
   37. BRAND STORY IMAGE
========================================================= */

.asareh-brand-story__media {

    overflow:
        hidden;
}

.asareh-brand-story__media img {

    transform:
        scale(1.03);

    transition:
        transform
        1800ms
        var(--asareh-motion-expo);
}

.asareh-brand-story__media:hover img {

    transform:
        scale(1.065);
}


/* =========================================================
   38. SIGNATURE IMAGE
========================================================= */

.asareh-signature__media {

    overflow:
        hidden;
}

.asareh-signature__media img {

    transform:
        scale(1.03);

    transition:
        transform
        1800ms
        var(--asareh-motion-expo);
}

.asareh-signature__media:hover img {

    transform:
        scale(1.065);
}


/* =========================================================
   39. EDITORIAL IMAGE
========================================================= */

.asareh-editorial__media img {

    transform:
        scale(1.035);

    transition:
        transform
        2000ms
        var(--asareh-motion-expo);
}

.asareh-editorial:hover
.asareh-editorial__media img {

    transform:
        scale(1.075);
}


/* =========================================================
   40. SERVICE CARD
========================================================= */

.asareh-service-card {

    position: relative;

    overflow: hidden;

    transition:
        background
        600ms
        var(--asareh-motion-out);
}

.asareh-service-card::before {

    position: absolute;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(
                204,
                178,
                153,
                0.10
            ),
            transparent
            58%
        );

    opacity: 0;

    transition:
        opacity
        600ms
        var(--asareh-motion-out);
}

.asareh-service-card:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}

.asareh-service-card:hover::before {

    opacity: 1;
}

.asareh-service-card__number,
.asareh-service-card h3,
.asareh-service-card p {

    position: relative;

    z-index: 2;

    transition:
        transform
        600ms
        var(--asareh-motion-out),

        color
        300ms
        ease;
}

.asareh-service-card:hover h3 {

    transform:
        translateY(-5px);
}

.asareh-service-card:hover p {

    transform:
        translateY(-5px);
}


/* =========================================================
   41. JOURNAL CARD
========================================================= */

.asareh-journal-card {

    transition:
        transform
        700ms
        var(--asareh-motion-out);
}

.asareh-journal-card:hover {

    transform:
        translateY(-6px);
}

.asareh-journal-card__content {

    transition:
        transform
        600ms
        var(--asareh-motion-out);
}

.asareh-journal-card:hover
.asareh-journal-card__content {

    transform:
        translateY(-3px);
}


/* =========================================================
   42. NEWSLETTER BACKGROUND MOTION
========================================================= */

.asareh-newsletter {

    position: relative;

    overflow: hidden;

    isolation:
        isolate;
}

.asareh-newsletter::before {

    position: absolute;

    z-index: -1;

    top: -40%;

    right: -10%;

    width: 60vw;

    height: 60vw;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                204,
                178,
                153,
                0.13
            )
            0%,

            rgba(
                204,
                178,
                153,
                0
            )
            67%
        );

    animation:
        asarehNewsletterGlow
        12s
        ease-in-out
        infinite
        alternate;
}

@keyframes asarehNewsletterGlow {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    100% {

        transform:
            translate3d(
                -8%,
                6%,
                0
            )
            scale(1.08);
    }

}


/* =========================================================
   43. NEWSLETTER INPUT MOTION
========================================================= */

.asareh-newsletter__form::after {

    position: absolute;

    right: 0;

    bottom: -1px;

    width: 0;

    height: 1px;

    content: "";

    background:
        var(--asareh-color-champagne-400);

    transition:
        width
        650ms
        var(--asareh-motion-expo);
}

.asareh-newsletter__form:focus-within::after {

    width: 100%;
}


/* =========================================================
   44. FOOTER LINKS
========================================================= */

.asareh-footer__column a {

    position: relative;
}

.asareh-footer__column a::after {

    position: absolute;

    right: 0;

    bottom: -2px;

    width: 0;

    height: 1px;

    content: "";

    background:
        var(--asareh-color-champagne-400);

    transition:
        width
        420ms
        var(--asareh-motion-out);
}

.asareh-footer__column a:hover::after {

    width: 100%;
}


/* =========================================================
   45. BACK TO TOP MOTION
========================================================= */

.asareh-back-to-top {

    transition:
        opacity
        400ms
        var(--asareh-motion-out),

        visibility
        400ms
        var(--asareh-motion-out),

        transform
        400ms
        var(--asareh-motion-out),

        background
        300ms
        ease;
}

.asareh-back-to-top:hover {

    transform:
        translateY(-4px);
}


/* =========================================================
   46. FLOATING MOTION
========================================================= */

.asareh-floating {

    animation:
        asarehFloating
        5.5s
        ease-in-out
        infinite;
}

@keyframes asarehFloating {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-12px);
    }

}


/* =========================================================
   47. SOFT FLOATING MOTION
========================================================= */

.asareh-floating-soft {

    animation:
        asarehFloatingSoft
        8s
        ease-in-out
        infinite;
}

@keyframes asarehFloatingSoft {

    0%,
    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {

        transform:
            translate3d(
                0,
                -7px,
                0
            );
    }

}


/* =========================================================
   48. LUXURY SHIMMER
========================================================= */

.asareh-shimmer {

    position: relative;

    overflow: hidden;
}

.asareh-shimmer::after {

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent
            0%,

            rgba(
                255,
                255,
                255,
                0.06
            )
            35%,

            rgba(
                255,
                255,
                255,
                0.22
            )
            50%,

            rgba(
                255,
                255,
                255,
                0.06
            )
            65%,

            transparent
            100%
        );

    transform:
        skewX(-12deg);

    transition:
        left
        1200ms
        var(--asareh-motion-expo);
}

.asareh-shimmer:hover::after {

    left:
        140%;
}


/* =========================================================
   49. TEXT MASK REVEAL
========================================================= */

.asareh-text-mask {

    display: inline-block;

    overflow: hidden;
}

.asareh-text-mask > span {

    display: inline-block;

    opacity: 0;

    transform:
        translateY(110%);

    transition:
        opacity
        850ms
        var(--asareh-motion-out),

        transform
        850ms
        var(--asareh-motion-out);
}

.asareh-text-mask.is-visible > span {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   50. WORD REVEAL
========================================================= */

.asareh-word {

    display: inline-block;

    opacity: 0;

    transform:
        translateY(28px);

    filter:
        blur(4px);

    transition:
        opacity
        750ms
        var(--asareh-motion-out),

        transform
        750ms
        var(--asareh-motion-out),

        filter
        750ms
        var(--asareh-motion-out);
}

.asareh-word.is-visible {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


/* =========================================================
   51. PARALLAX ELEMENTS
========================================================= */

[data-asareh-parallax] {

    will-change:
        transform;
}

[data-asareh-parallax-image] {

    will-change:
        transform;
}


/* =========================================================
   52. MAGNETIC BUTTON PREPARATION
========================================================= */

[data-asareh-magnetic] {

    transition:
        transform
        280ms
        var(--asareh-motion-out);
}

[data-asareh-magnetic] > * {

    pointer-events:
        none;
}


/* =========================================================
   53. CURSOR FOLLOW PREPARATION
========================================================= */

.asareh-cursor {

    position: fixed;

    z-index: 9998;

    top: 0;

    left: 0;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    pointer-events: none;

    background:
        var(--asareh-color-champagne-500);

    opacity: 0;

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        width
        260ms
        var(--asareh-motion-out),

        height
        260ms
        var(--asareh-motion-out),

        opacity
        260ms
        ease,

        background
        260ms
        ease;

    mix-blend-mode:
        difference;
}

.asareh-cursor.is-visible {

    opacity: 1;
}

.asareh-cursor.is-hover {

    width: 42px;

    height: 42px;

    background:
        rgba(
            255,
            255,
            255,
            0.9
        );
}


/* =========================================================
   54. SCROLL PROGRESS
========================================================= */

.asareh-scroll-progress {

    position: fixed;

    z-index: 5000;

    top: 0;

    right: 0;

    left: 0;

    height: 2px;

    pointer-events: none;

    background:
        transparent;
}

.asareh-scroll-progress__bar {

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--asareh-color-bronze-500),
            var(--asareh-color-champagne-400)
        );

    transform-origin:
        right center;
}


/* =========================================================
   55. ACTIVE LINK MOTION
========================================================= */

.asareh-header__nav-link.is-active::after {

    right: 0;

    left: 0;
}


/* =========================================================
   56. CART COUNT MOTION
========================================================= */

.asareh-cart-button__count.is-updated {

    animation:
        asarehCartCount
        500ms
        var(--asareh-motion-out);
}

@keyframes asarehCartCount {

    0% {

        transform:
            scale(1);
    }

    35% {

        transform:
            scale(1.35);
    }

    70% {

        transform:
            scale(0.92);
    }

    100% {

        transform:
            scale(1);
    }

}


/* =========================================================
   57. ELEMENT FADE
========================================================= */

.asareh-fade {

    opacity: 0;

    transition:
        opacity
        700ms
        ease;
}

.asareh-fade.is-visible {

    opacity: 1;
}


/* =========================================================
   58. LINE DRAW ANIMATION
========================================================= */

.asareh-line-draw {

    position: relative;
}

.asareh-line-draw::after {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    content: "";

    background:
        currentColor;

    transition:
        width
        900ms
        var(--asareh-motion-expo);
}

.asareh-line-draw.is-visible::after {

    width: 100%;
}


/* =========================================================
   59. SCROLL INDICATOR FLOAT
========================================================= */

.asareh-hero.is-ready
.asareh-scroll-indicator {

    animation:
        asarehScrollIndicatorFloat
        3s
        ease-in-out
        1.2s
        infinite;
}

@keyframes asarehScrollIndicatorFloat {

    0%,
    100% {

        transform:
            translateX(50%)
            translateY(0);
    }

    50% {

        transform:
            translateX(50%)
            translateY(6px);
    }

}


/* =========================================================
   60. SOFT GOLD GLOW
========================================================= */

.asareh-gold-glow {

    position: relative;
}

.asareh-gold-glow::before {

    position: absolute;

    z-index: -1;

    top: 50%;

    right: 50%;

    width: 70%;

    height: 70%;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                204,
                178,
                153,
                0.22
            )
            0%,

            rgba(
                204,
                178,
                153,
                0
            )
            70%
        );

    opacity: 0;

    transform:
        translate(
            50%,
            -50%
        )
        scale(0.85);

    transition:
        opacity
        700ms
        var(--asareh-motion-out),

        transform
        700ms
        var(--asareh-motion-out);
}

.asareh-gold-glow:hover::before {

    opacity: 1;

    transform:
        translate(
            50%,
            -50%
        )
        scale(1);
}


/* =========================================================
   61. LOADING SKELETON
========================================================= */

.asareh-skeleton {

    position: relative;

    overflow: hidden;

    background:
        rgba(
            144,
            111,
            86,
            0.10
        );
}

.asareh-skeleton::after {

    position: absolute;

    inset: 0;

    content: "";

    background:
        linear-gradient(
            100deg,
            transparent
            20%,

            rgba(
                255,
                255,
                255,
                0.45
            )
            50%,

            transparent
            80%
        );

    transform:
        translateX(-100%);

    animation:
        asarehSkeleton
        1.5s
        ease-in-out
        infinite;
}

@keyframes asarehSkeleton {

    100% {

        transform:
            translateX(100%);
    }

}


/* =========================================================
   62. SECTION TRANSITION LINE
========================================================= */

.asareh-section-transition {

    position: relative;
}

.asareh-section-transition::before {

    position: absolute;

    z-index: 5;

    top: 0;

    right: 50%;

    width: 0;

    height: 1px;

    content: "";

    background:
        rgba(
            144,
            111,
            86,
            0.35
        );

    transform:
        translateX(50%);

    transition:
        width
        1200ms
        var(--asareh-motion-expo);
}

.asareh-section-transition.is-visible::before {

    width:
        min(
            90%,
            1400px
        );
}


/* =========================================================
   63. HOVER LIFT
========================================================= */

.asareh-hover-lift {

    transition:
        transform
        550ms
        var(--asareh-motion-out),

        box-shadow
        550ms
        var(--asareh-motion-out);
}

.asareh-hover-lift:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0
        28px
        70px
        rgba(
            31,
            20,
            12,
            0.12
        );
}


/* =========================================================
   64. OPACITY SHIFT
========================================================= */

.asareh-opacity-shift {

    transition:
        opacity
        400ms
        ease;
}

.asareh-opacity-shift:hover {

    opacity:
        0.72;
}


/* =========================================================
   65. HORIZONTAL REVEAL LINE
========================================================= */

.asareh-horizontal-line {

    width: 0;

    height: 1px;

    background:
        currentColor;

    transition:
        width
        1100ms
        var(--asareh-motion-expo);
}

.asareh-horizontal-line.is-visible {

    width:
        100%;
}


/* =========================================================
   66. CONTENT SCALE IN
========================================================= */

.asareh-scale-in {

    opacity: 0;

    transform:
        scale(0.92);

    transition:
        opacity
        900ms
        var(--asareh-motion-out),

        transform
        900ms
        var(--asareh-motion-out);
}

.asareh-scale-in.is-visible {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   67. ROTATE REVEAL
========================================================= */

.asareh-rotate-reveal {

    opacity: 0;

    transform:
        translateY(24px)
        rotate(2deg);

    transform-origin:
        center bottom;

    transition:
        opacity
        900ms
        var(--asareh-motion-out),

        transform
        900ms
        var(--asareh-motion-out);
}

.asareh-rotate-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0)
        rotate(0);
}


/* =========================================================
   68. DESKTOP ONLY HOVER MOTION
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .asareh-category-card,
    .asareh-product-card,
    .asareh-journal-card,
    .asareh-featured__story,
    .asareh-service-card {

        cursor:
            pointer;
    }

}


/* =========================================================
   69. TABLET MOTION ADJUSTMENTS
========================================================= */

@media (max-width: 1024px) {

    :root {

        --asareh-reveal-distance:
            40px;
    }

    .asareh-product-card__wishlist {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    .asareh-product-card:hover {

        transform:
            none;
    }

}


/* =========================================================
   70. MOBILE MOTION ADJUSTMENTS
========================================================= */

@media (max-width: 768px) {

    :root {

        --asareh-reveal-distance:
            30px;

        --asareh-reveal-distance-small:
            18px;
    }


    .asareh-reveal-right {

        transform:
            translateX(25px);
    }

    .asareh-reveal-left {

        transform:
            translateX(-25px);
    }


    .asareh-reveal-blur {

        filter:
            blur(6px);

        transform:
            translateY(20px);
    }


    .asareh-category-card:hover
    .asareh-category-card__content {

        transform:
            none;
    }


    .asareh-featured__story:hover
    .asareh-featured__story-content {

        transform:
            none;
    }


    .asareh-journal-card:hover {

        transform:
            none;
    }


    .asareh-cursor {

        display:
            none;
    }


    .asareh-newsletter::before {

        width:
            120vw;

        height:
            120vw;

        right:
            -50%;
    }

}


/* =========================================================
   71. TOUCH DEVICE MOTION SAFETY
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .asareh-category-card__image,
    .asareh-featured__story-media img,
    .asareh-brand-story__media img,
    .asareh-signature__media img,
    .asareh-editorial__media img {

        transform:
            none;
    }


    .asareh-product-card__wishlist {

        opacity:
            1;

        transform:
            none;
    }


    .asareh-product-card:hover,
    .asareh-journal-card:hover,
    .asareh-hover-lift:hover {

        transform:
            none;
    }


    .asareh-category-card:hover
    .asareh-category-card__image,

    .asareh-featured__story:hover
    .asareh-featured__story-media img,

    .asareh-brand-story__media:hover img,

    .asareh-signature__media:hover img,

    .asareh-editorial:hover
    .asareh-editorial__media img {

        transform:
            none;
    }

}


/* =========================================================
   72. REDUCED MOTION
========================================================= */

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

    html {

        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        transition-delay:
            0ms !important;
    }


    .asareh-reveal,
    .asareh-reveal-up,
    .asareh-reveal-down,
    .asareh-reveal-right,
    .asareh-reveal-left,
    .asareh-reveal-scale,
    .asareh-reveal-blur,
    .asareh-scale-in,
    .asareh-rotate-reveal,
    .asareh-stagger-item {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;
    }


    .asareh-image-reveal::after {

        display:
            none;
    }


    .asareh-image-reveal img {

        transform:
            none !important;
    }


    .asareh-hero
    .asareh-eyebrow,

    .asareh-hero__title,

    .asareh-hero__title span,

    .asareh-hero__description,

    .asareh-hero__actions,

    .asareh-scroll-indicator {

        opacity:
            1 !important;

        transform:
            none !important;
    }


    .asareh-header {

        opacity:
            1 !important;

        transform:
            none !important;
    }


    [data-asareh-parallax],
    [data-asareh-parallax-image] {

        transform:
            none !important;
    }


    .asareh-newsletter::before {

        animation:
            none;
    }

}


/* =========================================================
   73. PRINT SAFETY
========================================================= */

@media print {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;

        filter:
            none !important;

        opacity:
            1 !important;
    }

}