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

Space Vanta Theme 1.0

Featured Function:
Vision

File:
public/header/featured-functions/vision/panel.css

Version:
VISION-PANEL-STRUCTURE-004

Responsibility:
- Host Vision Spatial Environment
- Remove conventional modal appearance
- Preserve full viewport geometry
- Own Vision Panel Close control

Does NOT control:
- Vision Space geometry
- Frame
- Rails
- Aperture
- Passage
- Nodes
- Vision transition sequence

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


/* =================================================
   VISION PANEL
   ================================================= */

.sv-featured-panel--vision {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    overflow:
        hidden;

}


/* =================================================
   CLOSE
================================================= */

.sv-vision-panel__close {

    position:
        absolute;

    top:
        28px;

    right:
        32px;

    z-index:
        20;

    width:
        36px;

    pointer-events: 
         auto;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        0;

    background:
        transparent;

    color:
        rgba(70, 82, 94, .72);

    font-size:
        24px;

    font-weight:
        300;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        color .24s ease,
        transform .24s ease;

}


/* =================================================
   CLOSE HOVER
================================================= */

@media (min-width: 768px) {

    .sv-vision-panel__close:hover {

        color:
            rgba(42, 64, 86, .94);

        transform:
            rotate(90deg);

    }

}


/* =================================================
   MOBILE
================================================= */

@media (max-width: 767px) {

    .sv-vision-panel__close {

        top:
            18px;

        right:
            18px;

        width:
            34px;

        height:
            34px;

        font-size:
            22px;

    }

}


/* =================================================
   REDUCED MOTION
================================================= */

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

    .sv-vision-panel__close {

        transition:
            none;

    }

}