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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Panel Cube

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

Version:
FIND-PANEL-CUBE-FOUNDATION-004

Purpose:
Find Panel Cube Static Spatial Presentation

Responsibilities:
- Panel Cube presentation size
- Panel Cube position
- Panel spatial perspective
- Static outer-shell opening
- Static inner-core exposure
- Panel transition visibility

Does NOT handle:
- Base Cube geometry
- Material
- Color
- Hover
- Motion
- Transition orchestration
- Discovery

Design:

One Object
Seven Fragments
Controlled Spatial Opening
Visible Inner Core

Static State:

Integrated Spatial Cube

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


/* =========================================================
   01. PANEL CUBE CONTAINER
========================================================= */

.sv-find-panel-cube {

    position:
        relative;

    width:
        100%;

    height:
        176px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

    opacity:
        1;

}


/* =========================================================
   02. SPATIAL STAGE
========================================================= */

.sv-find-panel-cube__stage {

    position:
        relative;

    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    perspective:
        720px;

    perspective-origin:
        50% 46%;

    transform-style:
        preserve-3d;

}


/* =========================================================
   03. PANEL CUBE
========================================================= */

.sv-find-panel-cube__stage .sv-find-cube {

    width:
        56px;

    height:
        56px;

    flex:
        0 0 56px;

    transform:
        perspective(240px) rotateX(10deg) rotateY(-14deg) rotateZ(-3deg) translateY(-2px) scale(3.15);

    transform-origin:
        center center;

}


/* =========================================================
   04. STATIC SPATIAL OPENING

   The Panel Cube remains one coherent spatial object.

   Fragment separation is restrained and directional.

   The purpose is to expose the internal spatial
   relationship without creating an exploded cube.
========================================================= */


/* ---------------------------------------------------------
   A
   Upper / Rear
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--a {

    translate:
        -2px -3px 3px;

}


/* ---------------------------------------------------------
   B
   Upper / Front
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--b {

    translate:
        2px -2px 4px;

}


/* ---------------------------------------------------------
   C
   Left / Upper
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--c {

    translate:
        -3px 0 3px;

}


/* ---------------------------------------------------------
   D
   Left / Lower
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--d {

    translate:
        -2px 3px 2px;

}


/* ---------------------------------------------------------
   E
   Right / Upper
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--e {

    translate:
        3px 0 4px;

}


/* ---------------------------------------------------------
   F
   Right / Lower
--------------------------------------------------------- */

.sv-find-panel-cube__stage .sv-find-cube__fragment--f {

    translate:
        2px 3px 2px;

}


/* =========================================================
   05. INNER CORE
========================================================= */

.sv-find-panel-cube__stage .sv-find-cube__fragment--g {

    translate:
        0 0 14px;

    scale:
        1.22;

    opacity:
        .98;

}


/* =========================================================
   06. CORE DEPTH
========================================================= */

.sv-find-panel-cube__stage .sv-find-cube__fragment--g {

    filter:
        drop-shadow(0 5px 10px rgba(37, 61, 79, .20));

}


/* =========================================================
   07. OUTER FRAGMENT DEPTH
========================================================= */

.sv-find-panel-cube__stage .sv-find-cube__fragment--a,
.sv-find-panel-cube__stage .sv-find-cube__fragment--b {

    filter:
        drop-shadow(0 3px 6px rgba(38, 57, 70, .12));

}


.sv-find-panel-cube__stage .sv-find-cube__fragment--c,
.sv-find-panel-cube__stage .sv-find-cube__fragment--e {

    filter:
        drop-shadow(0 4px 7px rgba(38, 57, 70, .14));

}


.sv-find-panel-cube__stage .sv-find-cube__fragment--d,
.sv-find-panel-cube__stage .sv-find-cube__fragment--f {

    filter:
        drop-shadow(0 4px 8px rgba(38, 57, 70, .15));

}


/* =========================================================
   08. PANEL TRANSITION VISIBILITY

   Transition orchestration owns the state.

   This file only controls whether the static Panel Cube
   is visible during the handoff.
========================================================= */

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

    opacity:
        0;

}


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

    opacity:
        0;

}


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

    opacity:
        1;

}


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

    opacity:
        0;

}


/* =========================================================
   09. MOBILE
========================================================= */

@media (max-width: 767px) {

    .sv-find-panel-cube {

        height:
            156px;

    }


    .sv-find-panel-cube__stage {

        width:
            130px;

        height:
            130px;

        perspective:
            640px;

    }


    .sv-find-panel-cube__stage .sv-find-cube {

        transform:
            perspective(210px) rotateX(9deg) rotateY(-12deg) rotateZ(-3deg) translateY(-2px) scale(2.75);

    }


    /* -----------------------------------------------------
       Mobile Core
    ----------------------------------------------------- */

    .sv-find-panel-cube__stage .sv-find-cube__fragment--g {

        translate:
            0 0 12px;

        scale:
            1.18;

    }

}


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

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

    .sv-find-panel-cube,
    .sv-find-panel-cube__stage,
    .sv-find-panel-cube__stage .sv-find-cube {

        transition:
            none !important;

    }

}