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

Space Vanta Theme 1.0

Module:
Collection Bundle Stream

File:
motion.css

Version:
1.0

Purpose:
Dynamic Spatial Flow

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


/* =================================================
   MOTION VARIABLES
================================================= */

.sv-collection-bundle {

    --sv-flow-progress: 0;
    --sv-flow-offset: 0px;
    --sv-flow-focus: 0;

    --sv-flow-reflection: 0px;

    --sv-motion-duration:
        720ms cubic-bezier(0.22, 1, 0.36, 1);

    --sv-motion-duration-slow:
        1400ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   AMBIENT SURFACE FLOW
================================================= */

.sv-collection-bundle__bundle {

    --sv-bundle-flow-offset:
        var(--sv-flow-offset);

    transform:
        translate3d(0,
            calc(var(--sv-bundle-flow-offset) * 0.035),
            0);

    transition:
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 1 IMAGE DEPTH
================================================= */

.sv-collection-bundle__bundle-choice-image-frame {

    transform:
        translate3d(0,
            calc(var(--sv-flow-offset) * -0.045),
            0);

    transition:
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 1 IMAGE REFLECTION
================================================= */

.sv-collection-bundle__bundle-choice-image-frame::after {

    content: "";

    position: absolute;

    inset: -20%;

    pointer-events: none;

    background:
        linear-gradient(112deg,
            transparent 28%,
            rgba(255, 255, 255, 0.16) 43%,
            rgba(255, 255, 255, 0.42) 48%,
            rgba(255, 255, 255, 0.08) 53%,
            transparent 68%);

    transform:
        translate3d(calc(var(--sv-flow-progress) * 28%),
            0,
            0);

    opacity: 0.24;

    transition:
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   CONSTRUCTION FLOW
================================================= */

.sv-collection-bundle__bundle-choice::after {

    transform:
        translate3d(calc(var(--sv-flow-offset) * 0.018),
            0,
            0);

    transition:
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 1 FOCUS
================================================= */

.sv-collection-bundle__bundle.is-motion-focus .sv-collection-bundle__bundle-choice {

    filter:
        brightness(1.025) contrast(1.015);

}


.sv-collection-bundle__bundle:not(.is-motion-focus) .sv-collection-bundle__bundle-choice {

    filter:
        brightness(0.985);

    transition:
        filter 700ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   GUIDED BUNDLE ENTRY
================================================= */

.sv-collection-bundle[data-motion-guidance="bundle"] .sv-collection-bundle__bundle.is-motion-guidance {

    --sv-guidance-scale: 1.008;

}


.sv-collection-bundle[data-motion-guidance="bundle"] .sv-collection-bundle__bundle.is-motion-guidance .sv-collection-bundle__bundle-choice {

    transform:
        scale(var(--sv-guidance-scale));

    transition:
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 2 OPTION FLOW
================================================= */

.sv-collection-bundle[data-stream-state="bundle-options"] .sv-collection-bundle__option {

    transform:
        translate3d(0,
            calc(var(--sv-flow-offset) * 0.018),
            0);

    transition:
        transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   OPTION FOCUS
================================================= */

.sv-collection-bundle__option.is-motion-focus .sv-collection-bundle__option-choice {

    filter:
        brightness(1.025) contrast(1.015);

    transform:
        translate3d(0, -3px, 0);

}


.sv-collection-bundle__option:not(.is-motion-focus) .sv-collection-bundle__option-choice {

    filter:
        brightness(0.985);

}


/* =================================================
   OPTION IMAGE REFLECTION
================================================= */

.sv-collection-bundle__option-choice-image-frame::after {

    content: "";

    position: absolute;

    inset: -25%;

    pointer-events: none;

    background:
        linear-gradient(116deg,
            transparent 31%,
            rgba(255, 255, 255, 0.10) 44%,
            rgba(255, 255, 255, 0.36) 49%,
            rgba(255, 255, 255, 0.06) 54%,
            transparent 67%);

    transform:
        translate3d(calc(var(--sv-flow-progress) * 18%),
            0,
            0);

    opacity: 0.18;

}


/* =================================================
   OPTION GUIDANCE
================================================= */

.sv-collection-bundle[data-motion-guidance="option"] .sv-collection-bundle__option.is-motion-guidance .sv-collection-bundle__option-choice {

    transform:
        translate3d(0, -5px, 0);

    transition:
        transform 850ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 3 SPATIAL STABILITY
================================================= */

.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__option.is-active {

    transform:
        none;

}


.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__option.is-active .sv-collection-bundle__option-image-frame {

    transform:
        translate3d(0,
            calc(var(--sv-flow-offset) * -0.012),
            0);

    transition:
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);

}


/* =================================================
   LEVEL 3 IMAGE REFLECTION
================================================= */

.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__option.is-active .sv-collection-bundle__option-image-frame::after {

    content: "";

    position: absolute;

    inset: -18%;

    pointer-events: none;

    background:
        linear-gradient(112deg,
            transparent 34%,
            rgba(255, 255, 255, 0.16) 47%,
            rgba(255, 255, 255, 0.28) 50%,
            transparent 63%);

    transform:
        translate3d(calc(var(--sv-flow-progress) * 10%),
            0,
            0);

    opacity: 0.12;

}


/* =================================================
   COMMERCE STABILITY
================================================= */

.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__option-information {

    transform: none;

}


.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__option-purchase {

    transform: none;

}


/* =================================================
   RELATED DIRECTIONAL FLOW
================================================= */

.sv-collection-bundle__related-item {

    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

}


.sv-collection-bundle__related-item:hover {

    transform:
        translate3d(6px, 0, 0);

}


/* =================================================
   STATE TRANSITION VISUAL
================================================= */

.sv-collection-bundle[data-motion-transition="bundle-options"] .sv-collection-bundle__bundle-flow {

    animation:
        svBundleSpaceEnter 720ms cubic-bezier(0.22, 1, 0.36, 1) both;

}


.sv-collection-bundle[data-motion-transition="option-detail"] .sv-collection-bundle__option-detail {

    animation:
        svOptionSpaceEnter 820ms cubic-bezier(0.22, 1, 0.36, 1) both;

}


@keyframes svBundleSpaceEnter {

    from {
        opacity: 0;
        transform:
            translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0);
    }

}


@keyframes svOptionSpaceEnter {

    from {
        opacity: 0;
        transform:
            translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0);
    }

}


/* =================================================
   MOBILE INTENSITY
================================================= */

@media (max-width: 767px) {

    .sv-collection-bundle {

        --sv-flow-offset: 0px;

    }


    .sv-collection-bundle__bundle {

        transform:
            translate3d(0, 0, 0);

    }


    .sv-collection-bundle__bundle-choice-image-frame {

        transform:
            translate3d(0,
                calc(var(--sv-flow-offset) * -0.02),
                0);

    }


    .sv-collection-bundle__option {

        transform:
            translate3d(0, 0, 0);

    }


    .sv-collection-bundle__option.is-motion-focus .sv-collection-bundle__option-choice {

        transform:
            translate3d(0, -2px, 0);

    }


    .sv-collection-bundle__related-item:hover {

        transform:
            none;

    }

}


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

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

    .sv-collection-bundle,
    .sv-collection-bundle *,
    .sv-collection-bundle *::before,
    .sv-collection-bundle *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;

    }


    .sv-collection-bundle__bundle,
    .sv-collection-bundle__bundle-choice-image-frame,
    .sv-collection-bundle__option,
    .sv-collection-bundle__option-choice,
    .sv-collection-bundle__option-image-frame {

        transform: none !important;

    }

}