/* ============================================================
   LUXEAURA ANIMATIONS
============================================================ */


/* ============================================================
   FLOAT
============================================================ */

@keyframes luxeFloat {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            translate3d(
                0,
                -10px,
                0
            );
    }
}


/* ============================================================
   SOFT FLOAT
============================================================ */

@keyframes luxeFloatSoft {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(
                0,
                -7px,
                0
            )
            rotate(1deg);
    }
}


/* ============================================================
   PULSE
============================================================ */

@keyframes luxePulse {

    0%,
    100% {
        opacity: .55;

        transform:
            scale(1);
    }

    50% {
        opacity: .85;

        transform:
            scale(1.045);
    }
}


/* ============================================================
   SHIMMER
============================================================ */

@keyframes luxeShimmer {

    from {
        background-position:
            200% 0;
    }

    to {
        background-position:
            -200% 0;
    }
}


/* ============================================================
   REVEAL
============================================================ */

@keyframes luxeReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   FADE
============================================================ */

@keyframes luxeFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ============================================================
   SCALE
============================================================ */

@keyframes luxeScale {

    from {
        opacity: 0;

        transform:
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* ============================================================
   ROTATING GLOW
============================================================ */

@keyframes luxeGlow {

    0% {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(180deg)
            scale(1.08);
    }

    100% {
        transform:
            rotate(360deg)
            scale(1);
    }
}


/* ============================================================
   FLOATING ELEMENTS
============================================================ */

.floating-tile {
    animation:
        luxeFloat
        6s
        ease-in-out
        infinite;
}

.tile-watch {
    animation-delay: -2s;
}

.tile-boutique {
    animation-delay: -4s;
}

.gift-box {
    animation:
        luxeFloatSoft
        5.5s
        ease-in-out
        infinite;
}


/* ============================================================
   RINGS
============================================================ */

.about-symbol .symbol-ring,
.orbit {
    animation:
        luxePulse
        7s
        ease-in-out
        infinite;
}


/* ============================================================
   BACKGROUND AURORA
============================================================ */

.page-aurora {
    animation:
        luxeFloat
        10s
        ease-in-out
        infinite;
}

.aurora-b {
    animation-delay: -4s;
}


/* ============================================================
   AUTH ORBS
============================================================ */

.auth-orb {
    animation:
        luxePulse
        8s
        ease-in-out
        infinite;
}

.auth-orb.orb-b {
    animation-delay: -3s;
}


/* ============================================================
   GIFT RINGS
============================================================ */

.gift-ring {
    animation:
        luxePulse
        8s
        ease-in-out
        infinite;
}

.ring-b {
    animation-delay: -3s;
}


/* ============================================================
   SCROLL REVEAL
============================================================ */

.reveal-up {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity
        .65s
        cubic-bezier(.2,.7,.2,1)
        var(--delay, 0ms),

        transform
        .65s
        cubic-bezier(.2,.7,.2,1)
        var(--delay, 0ms);
}

.reveal-up.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   PRODUCT IMAGE SHIMMER
============================================================ */

.product-media.loading::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );

    background-size:
        200% 100%;

    animation:
        luxeShimmer
        1.4s
        linear
        infinite;
}


/* ============================================================
   BUTTON ICON MOTION
============================================================ */

.luxe-btn i,
.text-link i {
    transition:
        transform .22s ease;
}

.luxe-btn:hover .bi-arrow-right {
    transform:
        translateX(4px);
}

.luxe-btn:hover .bi-arrow-up-right {
    transform:
        translate(3px,-3px);
}


/* ============================================================
   CARD HOVER
============================================================ */

.product-card,
.philosophy-card,
.account-stat,
.search-result {
    will-change: transform;
}


/* ============================================================
   NAVIGATION
============================================================ */

.store-header.scrolled .luxe-navbar {
    box-shadow:
        0 17px 48px
        rgba(37,27,42,.12);
}


/* ============================================================
   HEART
============================================================ */

.product-heart.active i {
    animation:
        heartPop
        .35s
        ease;
}

@keyframes heartPop {

    0% {
        transform:
            scale(.7);
    }

    55% {
        transform:
            scale(1.25);
    }

    100% {
        transform:
            scale(1);
    }
}


/* ============================================================
   CART BUTTON SUCCESS
============================================================ */

.quick-cart button.success {
    animation:
        cartSuccess
        .45s
        ease;
}

@keyframes cartSuccess {

    0% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(.96);
    }

    100% {
        transform:
            scale(1);
    }
}


/* ============================================================
   TOAST ENTRANCE
============================================================ */

.luxe-toast.show {
    animation:
        luxeScale
        .25s
        ease both;
}


/* ============================================================
   SEARCH OVERLAY
============================================================ */

.search-overlay.show .search-shell {
    animation:
        luxeReveal
        .35s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* ============================================================
   PAGE HERO
============================================================ */

.page-hero-card::after,
.hero-default::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(226,201,157,.10),
            transparent 68%
        );

    animation:
        luxePulse
        7s
        ease-in-out
        infinite;
}

.page-hero-card::after {
    right: -80px;
    top: -100px;
}

.hero-default::before {
    left: 45%;
    bottom: -150px;
}


/* ============================================================
   REDUCED MOTION / ACCESSIBILITY
============================================================ */

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

    html {
        scroll-behavior: auto !important;
    }

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

    .reveal-up {
        opacity:
            1 !important;

        transform:
            none !important;
    }

    .hero-art {
        transform:
            none !important;
    }
}