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

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / Inner Box / Material

Version:
FIND-INNER-BOX-MATERIAL-003

Purpose:
Luminous Mineral Interior

Responsibilities:
- Inner Box surface material
- Warm mineral reflection
- Interior / exterior contrast
- Spatial chamber definition
- Core visual separation

Does NOT control:
- Geometry
- Position
- Visibility
- Motion
- Transition
- Panel
- Discovery

Material Direction:

Luminous Mineral Silver
Warm Pearl
Soft Champagne Reflection
Graphite Interior Core

Design Principle:

Outer Cube = Structure
Inner Box = Chamber
Core = Function

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


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

.sv-find-inner-box__surface {

    box-sizing:
        border-box;

    border:
        1px solid rgba(255, 253, 247, .82);

    background:
        linear-gradient(135deg,
            rgba(255, 254, 249, .98) 0%,
            rgba(235, 231, 219, .97) 34%,
            rgba(194, 187, 169, .95) 68%,
            rgba(118, 114, 104, .96) 100%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .86),
        inset 0 -2px 4px rgba(61, 58, 50, .16),
        inset 1px 0 0 rgba(255, 255, 255, .24);

}


/* =========================================================
   02. TOP SURFACE
========================================================= */

.sv-find-inner-box__surface--top {

    background:
        linear-gradient(135deg,
            rgba(255, 255, 252, 1) 0%,
            rgba(247, 244, 235, .99) 32%,
            rgba(221, 215, 199, .97) 65%,
            rgba(171, 164, 146, .96) 100%);

    border-color:
        rgba(255, 255, 250, .92);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        inset 0 -2px 4px rgba(78, 73, 61, .12);

}


/* =========================================================
   03. LEFT SURFACE
========================================================= */

.sv-find-inner-box__surface--left {

    background:
        linear-gradient(115deg,
            rgba(246, 243, 234, .98) 0%,
            rgba(218, 212, 197, .97) 42%,
            rgba(166, 158, 141, .95) 100%);

    border-color:
        rgba(255, 252, 244, .72);

}


/* =========================================================
   04. RIGHT SURFACE
========================================================= */

.sv-find-inner-box__surface--right {

    background:
        linear-gradient(250deg,
            rgba(255, 254, 249, .99) 0%,
            rgba(228, 223, 210, .97) 42%,
            rgba(153, 148, 136, .95) 100%);

    border-color:
        rgba(255, 253, 247, .78);

}


/* =========================================================
   05. FRONT SURFACE
========================================================= */

.sv-find-inner-box__surface--front {

    background:
        linear-gradient(145deg,
            rgba(248, 246, 239, .99) 0%,
            rgba(218, 212, 198, .97) 38%,
            rgba(168, 161, 146, .96) 70%,
            rgba(101, 98, 91, .98) 100%);

    border-color:
        rgba(255, 253, 247, .76);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        inset 0 -3px 5px rgba(55, 53, 47, .17);

}


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

.sv-find-inner-box__core {

    box-sizing:
        border-box;

    border:
        1px solid rgba(220, 225, 220, .72);

    background:
        radial-gradient(circle at 30% 25%,
            rgba(226, 230, 224, .96) 0%,
            rgba(129, 139, 134, .96) 30%,
            rgba(55, 65, 65, .98) 63%,
            rgba(20, 28, 31, 1) 100%);

    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, .24),
        inset 0 -2px 3px rgba(9, 15, 18, .42),
        0 0 7px rgba(73, 82, 78, .16);

}