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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / Geometry

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

Version:
FIND-CUBE-GEOMETRY-007

Purpose:
Integrated Spatial Fragment Cube

Responsibilities:
- Cube geometry field
- Unified cube silhouette
- Seven-fragment construction
- Spatial depth
- Fragment layering
- Static 3D orientation
- Controlled internal seams
- Central spatial core geometry

Does NOT handle:
- Material
- Color
- Shadow
- Hover
- Animation
- Interaction
- Transition
- Panel presentation

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


/* =========================================================
   01. CUBE FIELD
========================================================= */

.sv-find-cube {

    position:
        relative;

    display:
        block;

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    transform:
        perspective(220px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

}


/* =========================================================
   02. SHARED FRAGMENT FIELD
========================================================= */

.sv-find-cube__fragment {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        52px;

    height:
        52px;

    box-sizing:
        border-box;

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

}


/* =========================================================
   03. TOP / REAR FRAGMENT
   A
========================================================= */

.sv-find-cube__fragment--a {

    z-index:
        2;

    clip-path:
        polygon(50% 0%,
            100% 25%,
            50% 50%,
            0% 25%);

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

}


/* =========================================================
   04. TOP / FRONT FRAGMENT
   B
========================================================= */

.sv-find-cube__fragment--b {

    z-index:
        3;

    clip-path:
        polygon(50% 34%,
            72% 23%,
            100% 25%,
            50% 50%,
            50% 66%,
            36% 58%);

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

}


/* =========================================================
   05. LEFT / UPPER FRAGMENT
   C
========================================================= */

.sv-find-cube__fragment--c {

    z-index:
        4;

    clip-path:
        polygon(0% 25%,
            50% 50%,
            50% 66%,
            0% 41%);

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

}


/* =========================================================
   06. LEFT / LOWER FRAGMENT
   D
========================================================= */

.sv-find-cube__fragment--d {

    z-index:
        3;

    clip-path:
        polygon(0% 41%,
            50% 66%,
            50% 100%,
            0% 75%);

    transform:
        translate3d(-1px,
            1px,
            3px);

}


/* =========================================================
   07. RIGHT / UPPER FRAGMENT
   E
========================================================= */

.sv-find-cube__fragment--e {

    z-index:
        5;

    clip-path:
        polygon(50% 50%,
            100% 25%,
            100% 41%,
            50% 66%);

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

}


/* =========================================================
   08. RIGHT / LOWER FRAGMENT
   F
========================================================= */

.sv-find-cube__fragment--f {

    z-index:
        4;

    clip-path:
        polygon(50% 66%,
            100% 41%,
            100% 75%,
            50% 100%);

    transform:
        translate3d(1px,
            1px,
            4px);

}


/* =========================================================
   09. STATIC DEPTH RELATIONSHIP
========================================================= */

.sv-find-cube__fragment--a {

    translate:
        0 0 0;

}


.sv-find-cube__fragment--b {

    translate:
        0 0 1px;

}


.sv-find-cube__fragment--c {

    translate:
        0 0 0;

}


.sv-find-cube__fragment--d {

    translate:
        0 0 -1px;

}


.sv-find-cube__fragment--e {

    translate:
        0 0 2px;

}


.sv-find-cube__fragment--f {

    translate:
        0 0 0;

}


/* =========================================================
   10. DESKTOP
========================================================= */

@media (min-width: 768px) {

    .sv-find-cube {

        width:
            52px;

        height:
            52px;

        flex-basis:
            52px;

        transform:
            perspective(220px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

    }


    .sv-find-cube__fragment {

        width:
            52px;

        height:
            52px;

    }

}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 767px) {

    .sv-find-cube {

        width:
            48px;

        height:
            48px;

        flex-basis:
            48px;

        transform:
            perspective(190px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

    }


    .sv-find-cube__fragment {

        width:
            48px;

        height:
            48px;

    }

}


/* =========================================================
   12. REDUCED MOTION
========================================================= */

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

    .sv-find-cube {

        transform:
            perspective(220px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

    }

}