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

Space Vanta Theme 1.0

Module:
Hero Motion System

File:
public/hero/hero-motion.css

Version:
1.1

Purpose:
Hero spatial transition system

Responsibilities:
- Carousel transition
- Spatial image movement
- Slide depth perception
- Drag state motion control
- Reduced motion support

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
---------------------------------

Each slide remains visually stable
while participating in the spatial
movement of the track.
---------------------------------
*/

.sv-hero__slide {

    backface-visibility: hidden;

    transform:
        translateZ(0);

}


/*
---------------------------------
03. Image Spatial Motion
---------------------------------

The image begins slightly enlarged
and settles into its natural scale.

This creates a subtle sense of a
new visual space entering the frame.
---------------------------------
*/

.sv-hero__image {

    transform:
        scale(1.015);

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

}


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

.sv-hero__slide:first-child .sv-hero__image {

    transform:
        scale(1);

}


/*
---------------------------------
05. Drag State
---------------------------------

Disable visual interpolation while
the user is manually controlling
the carousel.
---------------------------------
*/

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

    transition: none;

}


/*
---------------------------------
06. Motion Layer
---------------------------------

Reserved for future spatial visual
layers.

No visual effect is currently
applied here.
---------------------------------
*/

.sv-hero__motion-layer {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 4;

}


/*
---------------------------------
07. Reduced Motion
---------------------------------
*/

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


    .sv-hero__track {

        transition: none;

    }


    .sv-hero__image {

        transform:
            none;

        transition: none;

    }


}