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

Space Vanta Theme 1.0

Module:
Hero Motion System

File:
public/hero/hero-motion.css

Version:
1.4 Spatial Layer Hierarchy

Purpose:
Hero spatial transition system

Responsibilities:
- Carousel transition
- Image depth
- Previous / Next state
- Active slide hierarchy
- Editorial content state
- Drag state
- Reduced motion

Design Principle:
Motion supports the Space,
never becomes the Space.

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


/*
---------------------------------
01. Track Motion
---------------------------------
*/

.sv-hero__track {

    transition:
        transform .65s cubic-bezier(.22, .61, .36, 1);

}


/*
---------------------------------
02. Slide Foundation
---------------------------------
*/

.sv-hero__slide {

    position: relative;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform:
        translateZ(0);

    transition:
        z-index 0s linear .35s;

}


/*
---------------------------------
03. Base Image
---------------------------------
*/

.sv-hero__image {

    transform:
        scale(1.015);

    transform-origin:
        center center;

    transition:
        transform .8s cubic-bezier(.22, .61, .36, 1),
        opacity .8s cubic-bezier(.22, .61, .36, 1);

}


/*
---------------------------------
04. Active Slide
---------------------------------

The active slide is always the
primary visual layer.

---------------------------------
*/

.sv-hero__slide.is-active {

    z-index: 3;

    transition-delay: 0s;

}


.sv-hero__slide.is-active .sv-hero__image {

    transform:
        scale(1);

    opacity: 1;

}


/*
---------------------------------
05. Previous Slide
---------------------------------

Previous remains visually behind
the current slide.

---------------------------------
*/

.sv-hero__slide.is-prev {

    z-index: 1;

    transition-delay: .08s;

}


.sv-hero__slide.is-prev .sv-hero__image {

    transform:
        scale(1.028) translate3d(-.7%, 0, 0);

    opacity: .88;

}


/*
---------------------------------
06. Next Slide
---------------------------------

Next is slightly more present than
Previous so the direction of the
carousel remains readable.

---------------------------------
*/

.sv-hero__slide.is-next {

    z-index: 2;

    transition-delay: 0s;

}


.sv-hero__slide.is-next .sv-hero__image {

    transform:
        scale(1.024) translate3d(.55%, 0, 0);

    opacity: .94;

}


/*
---------------------------------
07. Inactive Slides
---------------------------------

Slides outside the immediate
Previous / Current / Next states
remain visually quiet.

---------------------------------
*/

.sv-hero__slide:not(.is-active):not(.is-prev):not(.is-next) {

    z-index: 0;

}


.sv-hero__slide:not(.is-active):not(.is-prev):not(.is-next) .sv-hero__image {

    opacity: .82;

    transform:
        scale(1.03);

}


/*
---------------------------------
08. Content Foundation
---------------------------------
*/

.sv-hero__content-inner {

    opacity: .94;

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

    transition:
        opacity .55s cubic-bezier(.22, .61, .36, 1),
        transform .65s cubic-bezier(.22, .61, .36, 1);

}


/*
---------------------------------
09. Active Content
---------------------------------
*/

.sv-hero__slide.is-active .sv-hero__content-inner {

    opacity: 1;

    transform:
        translate3d(0, 0, 0);

}


/*
---------------------------------
10. Previous Content
---------------------------------
*/

.sv-hero__slide.is-prev .sv-hero__content-inner {

    opacity: .58;

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

}


/*
---------------------------------
11. Next Content
---------------------------------
*/

.sv-hero__slide.is-next .sv-hero__content-inner {

    opacity: .78;

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

}


/*
---------------------------------
12. Content Hierarchy
---------------------------------

The visual hierarchy intentionally
differs from the image hierarchy:

Current  >  Next  >  Previous

This gives the incoming scene slightly
more presence than the outgoing scene.

---------------------------------
*/


/*
---------------------------------
13. Drag State
---------------------------------
*/

.sv-hero__track.is-dragging .sv-hero__image {

    transition: none;

}


.sv-hero__track.is-dragging .sv-hero__content-inner {

    transition: none;

}


.sv-hero__track.is-dragging .sv-hero__slide {

    transition: none;

}


/*
---------------------------------
14. Motion Layer
---------------------------------
*/

.sv-hero__motion-layer {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 4;

}


/*
---------------------------------
15. Desktop Spatial Hierarchy
---------------------------------
*/

@media (min-width: 768px) {

    .sv-hero__slide.is-active {

        z-index: 3;

    }


    .sv-hero__slide.is-next {

        z-index: 2;

    }


    .sv-hero__slide.is-prev {

        z-index: 1;

    }

}


/*
---------------------------------
16. Mobile
---------------------------------
*/

@media (max-width: 767px) {

    .sv-hero__slide.is-prev .sv-hero__image {

        transform:
            scale(1.02) translate3d(-.4%, 0, 0);

        opacity: .9;

    }


    .sv-hero__slide.is-next .sv-hero__image {

        transform:
            scale(1.018) translate3d(.3%, 0, 0);

        opacity: .95;

    }


    .sv-hero__slide.is-prev .sv-hero__content-inner {

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

        opacity: .62;

    }


    .sv-hero__slide.is-next .sv-hero__content-inner {

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

        opacity: .80;

    }

}


/*
---------------------------------
17. Reduced Motion
---------------------------------
*/

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

    .sv-hero__track {

        transition: none;

    }


    .sv-hero__slide {

        transition: none;

    }


    .sv-hero__image {

        transform: none;

        opacity: 1;

        transition: none;

    }


    .sv-hero__content-inner {

        opacity: 1;

        transform: none;

        transition: none;

    }

}