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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / State

File:
public/header/featured-functions/find/cube/state.css

Version:
FIND-CUBE-STATE-001

Purpose:
Cube State Foundation

Responsibilities:
- Cube state definitions
- State-specific CSS variables
- State hierarchy
- Future motion handoff values

Does NOT handle:
- Geometry
- Material
- Animation
- Transition
- Panel
- Interaction
- Discovery

State Model:

REST
HOVER
ACTIVE
OPENING
FRACTURE
ASSEMBLY
STABLE
CLOSING

Important:
This file intentionally produces
no visible movement by itself.

Motion behavior belongs to motion.css.

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


/* =================================================
   01. STATE FOUNDATION
================================================= */

.sv-find-cube {

    /*
     * Default state.
     *
     * Geometry remains completely responsible
     * for the actual Cube transform.
     */

    --find-cube-state:
        rest;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   02. REST
================================================= */

/*
 * Natural resting state.
 *
 * No additional transformation is applied here.
 */

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

    --find-cube-state:
        rest;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   03. HOVER
================================================= */

/*
 * Desktop interaction state.
 *
 * Values are intentionally neutral at this stage.
 *
 * motion.css will later decide how the Cube
 * actually responds to these values.
 */

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

    --find-cube-state:
        hover;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   04. ACTIVE
================================================= */

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

    --find-cube-state:
        active;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   05. OPENING
================================================= */

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

    --find-cube-state:
        opening;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   06. FRACTURE
================================================= */

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

    --find-cube-state:
        fracture;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   07. ASSEMBLY
================================================= */

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

    --find-cube-state:
        assembly;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   08. STABLE
================================================= */

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

    --find-cube-state:
        stable;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   09. CLOSING
================================================= */

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

    --find-cube-state:
        closing;

    --find-cube-state-opacity:
        1;

    --find-cube-state-scale:
        1;

    --find-cube-state-rotate-x:
        0deg;

    --find-cube-state-rotate-y:
        0deg;

    --find-cube-state-rotate-z:
        0deg;

}


/* =================================================
   10. REDUCED MOTION
================================================= */

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

    .sv-find-cube {

        --find-cube-state-scale:
            1;

        --find-cube-state-rotate-x:
            0deg;

        --find-cube-state-rotate-y:
            0deg;

        --find-cube-state-rotate-z:
            0deg;

    }

}