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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / Material

Version:
FIND-CUBE-MATERIAL-002

Purpose:
Cold Metallic Blue Spatial Material

Responsibilities:
- Metallic surface
- Cold blue / silver material character
- Fragment material variation
- Directional reflection
- Surface depth
- Fragment integration

Does NOT handle:
- Geometry
- Clip-path
- Position
- Spatial coordinates
- Hover
- Animation
- Transition
- Interaction
- Panel presentation
- Discovery

Design Principle:

Metal is DNA.
Color is spatial hierarchy.

The Find Cube is a cold metallic
spatial object rather than a flat UI icon.

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


/* =========================================================
   01. BASE METALLIC SURFACE
========================================================= */

.sv-find-cube__fragment {

    background:
        linear-gradient(142deg,
            rgba(218, 231, 238, .96) 0%,
            rgba(145, 174, 190, .94) 34%,
            rgba(82, 119, 141, .96) 68%,
            rgba(42, 71, 91, .96) 100%);

    border:
        1px solid rgba(231, 242, 247, .58);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .68),
        inset 0 -1px 0 rgba(18, 43, 58, .32),
        inset 1px 0 0 rgba(255, 255, 255, .16);

}


/* =========================================================
   02. TOP / REAR
   A

   Upper surface establishes the main metallic
   reflection and provides the brightest plane.
========================================================= */

.sv-find-cube__fragment--a {

    background:
        linear-gradient(145deg,
            rgba(232, 241, 245, .98) 0%,
            rgba(180, 203, 214, .96) 30%,
            rgba(112, 150, 168, .94) 64%,
            rgba(58, 91, 110, .96) 100%);

    border-color:
        rgba(246, 250, 252, .68);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .76),
        inset 0 -1px 0 rgba(25, 51, 66, .26),
        inset 1px 0 0 rgba(255, 255, 255, .18);

}


/* =========================================================
   03. TOP / FRONT
   B

   B carries a stronger blue metallic transition.
========================================================= */

.sv-find-cube__fragment--b {

    background:
        linear-gradient(135deg,
            rgba(225, 238, 244, .98) 0%,
            rgba(155, 187, 202, .96) 30%,
            rgba(83, 124, 146, .96) 67%,
            rgba(39, 70, 91, .98) 100%);

    border-color:
        rgba(239, 248, 252, .62);

}


/* =========================================================
   04. LEFT / UPPER
   C

   C receives a slightly warmer silver reflection
   before transitioning into cold blue.
========================================================= */

.sv-find-cube__fragment--c {

    background:
        linear-gradient(135deg,
            rgba(229, 239, 243, .97) 0%,
            rgba(169, 195, 207, .95) 35%,
            rgba(101, 139, 157, .95) 70%,
            rgba(49, 82, 101, .97) 100%);

    border-color:
        rgba(242, 249, 252, .58);

}


/* =========================================================
   05. LEFT / LOWER
   D

   D is intentionally darker.

   This creates vertical material hierarchy
   and allows the Inner Box to remain visible.
========================================================= */

.sv-find-cube__fragment--d {

    background:
        linear-gradient(145deg,
            rgba(203, 220, 228, .94) 0%,
            rgba(135, 166, 182, .94) 34%,
            rgba(72, 109, 128, .96) 68%,
            rgba(35, 61, 78, .98) 100%);

    border-color:
        rgba(226, 239, 245, .52);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .52),
        inset 0 -1px 0 rgba(17, 40, 54, .38);

}


/* =========================================================
   06. RIGHT / UPPER
   E

   E carries the strongest cold reflection.
   This becomes the visual blue-metal signature.
========================================================= */

.sv-find-cube__fragment--e {

    background:
        linear-gradient(150deg,
            rgba(239, 247, 250, .98) 0%,
            rgba(177, 204, 216, .96) 28%,
            rgba(94, 139, 161, .97) 62%,
            rgba(39, 75, 98, .99) 100%);

    border-color:
        rgba(248, 252, 254, .70);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset -1px 0 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(18, 43, 59, .30);

}


/* =========================================================
   07. RIGHT / LOWER
   F

   F acts as the deep metallic anchor.
========================================================= */

.sv-find-cube__fragment--f {

    background:
        linear-gradient(150deg,
            rgba(211, 228, 235, .95) 0%,
            rgba(148, 179, 193, .94) 34%,
            rgba(76, 115, 135, .96) 70%,
            rgba(34, 61, 80, .98) 100%);

    border-color:
        rgba(231, 243, 248, .56);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .58),
        inset 0 -1px 0 rgba(18, 41, 55, .36);

}


/* =========================================================
   08. METALLIC DIRECTION
========================================================= */

.sv-find-cube__fragment {

    background-blend-mode:
        normal;

    filter:
        drop-shadow(0 2px 3px rgba(24, 48, 63, .14));

}


/* =========================================================
   09. GROUP DEPTH
========================================================= */

.sv-find-cube {

    filter:
        drop-shadow(0 5px 11px rgba(28, 54, 70, .11));

}


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

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

    .sv-find-cube__fragment,
    .sv-find-cube {

        transition:
            none;

    }

}