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

Space Vanta Theme 1.0

Feature:
Featured Functions / Find

Module:
Find Atmosphere

Version:
FIND-BRAND-ATMOSPHERE-002

Responsibility:
- Metallic atmosphere
- Architectural side structures
- Reflection fields
- Spatial guide elements

Does NOT control:
- Layout
- Typography
- Controls
- Cube geometry
- Discovery

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


/* =========================================================
   01. GLOBAL LIGHT FIELD
   ========================================================= */

.sv-featured-panel--find::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(ellipse at 50% 12%,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.30) 23%,
            rgba(255, 255, 255, 0) 48%),

        radial-gradient(ellipse at 8% 42%,
            rgba(193, 202, 205, 0.22),
            rgba(193, 202, 205, 0) 28%),

        radial-gradient(ellipse at 92% 58%,
            rgba(126, 151, 163, 0.16),
            rgba(126, 151, 163, 0) 28%);

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   02. TOP REFLECTIVE EDGE
   ========================================================= */

.sv-featured-panel--find::after {

    content:
        "";

    position:
        absolute;

    top:
        clamp(14px, 2.4vw, 30px);

    left:
        50%;

    width:
        min(1120px, 82vw);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            rgba(80, 98, 106, 0.10) 12%,
            rgba(255, 255, 255, 0.78) 30%,
            rgba(92, 111, 119, 0.18) 50%,
            rgba(255, 255, 255, 0.70) 70%,
            rgba(80, 98, 106, 0.10) 88%,
            transparent);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.44);

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   03. LEFT METAL ARCHITECTURE
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__content::before {

    content:
        "";

    position:
        absolute;

    left:
        clamp(8px, 2vw, 34px);

    top:
        clamp(190px, 27vh, 300px);

    width:
        clamp(110px, 12vw, 190px);

    height:
        330px;

    background:

        linear-gradient(118deg,
            rgba(255, 255, 255, 0.56) 0%,
            rgba(205, 212, 214, 0.34) 22%,
            rgba(134, 147, 153, 0.18) 48%,
            rgba(255, 255, 255, 0.28) 58%,
            rgba(150, 163, 168, 0.08) 78%,
            transparent 100%);

    clip-path:
        polygon(0 0,
            76% 0,
            100% 12%,
            100% 78%,
            72% 78%,
            72% 100%,
            0 100%);

    border-left:
        1px solid rgba(84, 102, 110, 0.20);

    border-top:
        1px solid rgba(255, 255, 255, 0.68);

    opacity:
        0.76;

    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.36),
        14px 18px 44px rgba(55, 65, 69, 0.05);

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   04. RIGHT METAL ARCHITECTURE
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__content::after {

    content:
        "";

    position:
        absolute;

    right:
        clamp(8px, 2vw, 34px);

    top:
        clamp(240px, 34vh, 380px);

    width:
        clamp(120px, 13vw, 210px);

    height:
        380px;

    background:

        linear-gradient(242deg,
            rgba(255, 255, 255, 0.64) 0%,
            rgba(208, 215, 217, 0.38) 20%,
            rgba(120, 139, 147, 0.17) 46%,
            rgba(255, 255, 255, 0.24) 57%,
            rgba(117, 139, 148, 0.08) 78%,
            transparent 100%);

    clip-path:
        polygon(24% 0,
            100% 0,
            100% 100%,
            28% 100%,
            28% 86%,
            0 78%,
            0 18%);

    border-right:
        1px solid rgba(78, 100, 110, 0.22);

    border-top:
        1px solid rgba(255, 255, 255, 0.72);

    opacity:
        0.72;

    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.34),
        -14px 20px 48px rgba(55, 65, 69, 0.055);

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   05. LEFT REFLECTIVE CUT
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__visual::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(640px, 60vw);

    height:
        min(240px, 22vw);

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(ellipse at center,
            rgba(166, 186, 195, 0.16),
            rgba(166, 186, 195, 0.045) 34%,
            transparent 72%);

    pointer-events:
        none;

    z-index:
        -1;
}


/* =========================================================
   06. VISUAL REFLECTION LINE
   ========================================================= */

.sv-featured-panel--find .sv-featured-panel__visual::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        2px;

    width:
        min(560px, 64vw);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            rgba(89, 112, 122, 0.16) 24%,
            rgba(255, 255, 255, 0.62) 50%,
            rgba(89, 112, 122, 0.16) 76%,
            transparent);

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   07. SEARCH METAL FRAME
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__input-wrap {

    position:
        relative;

    border:
        1px solid rgba(77, 95, 102, 0.38);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 253, 0.90),
            rgba(220, 225, 226, 0.64) 48%,
            rgba(244, 246, 244, 0.82));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(104, 119, 125, 0.12),
        0 18px 44px rgba(49, 60, 64, 0.08);
}


.sv-featured-panel--find .sv-find-discovery__input-wrap::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.92) 25%,
            rgba(255, 255, 255, 0.48) 72%,
            rgba(255, 255, 255, 0));

    pointer-events:
        none;
}


.sv-featured-panel--find .sv-find-discovery__input-wrap:focus-within {

    border-color:
        rgba(70, 97, 109, 0.62);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(104, 119, 125, 0.16),
        0 20px 52px rgba(49, 63, 69, 0.12);
}


/* =========================================================
   08. SEARCH CORE MARK
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__search::before {

    content:
        "";

    display:
        block;

    width:
        min(300px, 36%);

    height:
        1px;

    margin:
        0 auto 18px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(91, 115, 126, 0.34),
            transparent);

    opacity:
        0.80;

    pointer-events:
        none;
}


/* =========================================================
   09. RESULTS REFLECTION
   ========================================================= */

.sv-featured-panel--find .sv-find-discovery__results {

    position:
        relative;
}


.sv-featured-panel--find .sv-find-discovery__results::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        min(720px, 70%);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.62),
            transparent);

    pointer-events:
        none;

    opacity:
        0.56;
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-featured-panel--find .sv-featured-panel__content::before {

        left:
            -26px;

        top:
            190px;

        width:
            80px;

        height:
            240px;

        opacity:
            0.40;
    }


    .sv-featured-panel--find .sv-featured-panel__content::after {

        right:
            -28px;

        top:
            260px;

        width:
            86px;

        height:
            270px;

        opacity:
            0.38;
    }


    .sv-featured-panel--find .sv-featured-panel__visual::before {

        width:
            94vw;

        height:
            150px;
    }


    .sv-featured-panel--find .sv-featured-panel__visual::after {

        width:
            78vw;
    }


    .sv-featured-panel--find .sv-find-discovery__search::before {

        width:
            44%;

        margin-bottom:
            15px;
    }


    .sv-featured-panel--find .sv-find-discovery__results::after {

        width:
            76%;
    }

}