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

Space Vanta Theme 1.0

Module:
Find / Cube / Motion

Version:
FIND-CUBE-MOTION-FOUNDATION-004

Purpose:
Cube spatial motion

Responsibilities:
1. Fragment spatial motion
2. Inner Box spatial motion
3. Hover response
4. Response variable integration

Does NOT control:
- Base geometry
- Material
- Visibility ownership
- Panel layout
- JavaScript orchestration
- Discovery

Motion Principle:

Base geometry remains owned by geometry.css.

Motion uses additive longhand properties.

Response variables are consumed here.

Lifecycle state and visual response remain
independent systems.

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


/* =================================================
   01. MOTION BASE
================================================= */

.sv-find-cube__fragment,
.sv-find-inner-box {

    transition:
        translate 560ms cubic-bezier(.22, .72, .28, 1),
        rotate 620ms cubic-bezier(.22, .72, .28, 1),
        scale 560ms cubic-bezier(.22, .72, .28, 1);

}


/* =================================================
   02. RESPONSE INTEGRATION BASE

   This layer allows the visual response system
   to move the Panel Cube even when the Cube is
   not currently carrying a lifecycle state.

   geometry.css owns the original Z relationship.

   Response only adds X / Y offsets.

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

.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--a {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--b {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 1px;

}


.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--c {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--d {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) -1px;

}


.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--e {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 2px;

}


.sv-featured-panel--find [data-featured-transition="find"] .sv-find-cube .sv-find-cube__fragment--f {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


/* =================================================
   03. REST
================================================= */

.sv-find-cube[data-find-cube-state="rest"] .sv-find-cube__fragment {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px);

    rotate:
        0deg;

    scale:
        1;

}


.sv-find-cube[data-find-cube-state="rest"] .sv-find-inner-box {

    translate:
        -50% -50%;

    rotate:
        0deg;

    scale:
        .78;

}


/* =================================================
   04. HOVER

   Controlled central opening.

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

.sv-featured-trigger--find:hover .sv-find-cube__fragment--a {

    translate:
        calc(0px + var(--find-cube-response-x, 0px)) calc(-2px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-cube__fragment--b {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(-1px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-cube__fragment--c {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-cube__fragment--d {

    translate:
        calc(-1px + var(--find-cube-response-x, 0px)) calc(2px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-cube__fragment--e {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-cube__fragment--f {

    translate:
        calc(1px + var(--find-cube-response-x, 0px)) calc(2px + var(--find-cube-response-y, 0px));

}


.sv-featured-trigger--find:hover .sv-find-inner-box {

    translate:
        -50% -50% 2px;

    rotate:
        2deg;

    scale:
        .94;

}


/* =================================================
   05. ACTIVE

   Central twist.

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

.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--a {

    translate:
        calc(-1px + var(--find-cube-response-x, 0px)) calc(-2px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--b {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(-1px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--c {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--d {

    translate:
        calc(-1px + var(--find-cube-response-x, 0px)) calc(2px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--e {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-cube__fragment--f {

    translate:
        calc(1px + var(--find-cube-response-x, 0px)) calc(2px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="active"] .sv-find-inner-box {

    translate:
        -50% -50% 3px;

    rotate:
        4deg;

    scale:
        1;

}


/* =================================================
   06. OPENING
================================================= */

.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--a {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(-4px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--b {

    translate:
        calc(3px + var(--find-cube-response-x, 0px)) calc(-2px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--c {

    translate:
        calc(-4px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--d {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(4px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--e {

    translate:
        calc(4px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-cube__fragment--f {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(4px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="opening"] .sv-find-inner-box {

    translate:
        -50% -50% 5px;

    rotate:
        7deg;

    scale:
        1.08;

}


/* =================================================
   07. FRACTURE

   Maximum controlled opening.

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

.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--a {

    translate:
        calc(-4px + var(--find-cube-response-x, 0px)) calc(-7px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--b {

    translate:
        calc(6px + var(--find-cube-response-x, 0px)) calc(-4px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--c {

    translate:
        calc(-7px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--d {

    translate:
        calc(-4px + var(--find-cube-response-x, 0px)) calc(7px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--e {

    translate:
        calc(7px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-cube__fragment--f {

    translate:
        calc(4px + var(--find-cube-response-x, 0px)) calc(7px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="fracture"] .sv-find-inner-box {

    translate:
        -50% -50% 8px;

    rotate:
        12deg;

    scale:
        1.18;

}


/* =================================================
   08. ASSEMBLY
================================================= */

.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--a {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(-3px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--b {

    translate:
        calc(3px + var(--find-cube-response-x, 0px)) calc(-2px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--c {

    translate:
        calc(-3px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--d {

    translate:
        calc(-2px + var(--find-cube-response-x, 0px)) calc(3px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--e {

    translate:
        calc(3px + var(--find-cube-response-x, 0px)) calc(0px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-cube__fragment--f {

    translate:
        calc(2px + var(--find-cube-response-x, 0px)) calc(3px + var(--find-cube-response-y, 0px));

}


.sv-find-cube[data-find-cube-state="assembly"] .sv-find-inner-box {

    translate:
        -50% -50% 4px;

    rotate:
        5deg;

    scale:
        1;

}


/* =================================================
   09. STABLE
================================================= */

/*
   Stable preserves the geometry.css spatial
   relationship and allows the response layer
   to add X / Y movement.

*/

.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--a {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--b {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 1px;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--c {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--d {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) -1px;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--e {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 2px;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-cube__fragment--f {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px) 0;

}


.sv-find-cube[data-find-cube-state="stable"] .sv-find-inner-box {

    translate:
        calc(-50% + var(--find-cube-response-x, 0px)) calc(-50% + var(--find-cube-response-y, 0px)) calc(3px + var(--find-cube-response-z, 0px));

    rotate:
        3deg;

    scale:
        .94;

}


/* =================================================
   10. CLOSING
================================================= */

.sv-find-cube[data-find-cube-state="closing"] .sv-find-cube__fragment {

    translate:
        var(--find-cube-response-x, 0px) var(--find-cube-response-y, 0px);

    rotate:
        0deg;

    scale:
        1;

}


.sv-find-cube[data-find-cube-state="closing"] .sv-find-inner-box {

    translate:
        -50% -50%;

    rotate:
        0deg;

    scale:
        .78;

}


/* =================================================
   11. REDUCED MOTION
================================================= */

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

    .sv-find-cube__fragment,
    .sv-find-inner-box {

        transition:
            none;

    }

}