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

Space Vanta Theme 1.0

Module:
Vision Spatial Architecture

Version:
VISION-SPATIAL-BASE-003

Responsibility:
- Spatial registration
- Corner geometry
- Central axis
- Spatial traces

Does NOT control:
- Node content
- Node state
- Node navigation
- Passage interaction
- Transition
- Aperture

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


/* =========================================================
   VISION SPACE
========================================================= */

.sv-vision-space {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    color: #343b42;

    --sv-vision-metal:
        rgba(154, 164, 173, .42);

    --sv-vision-metal-bright:
        rgba(238, 242, 244, .68);

    --sv-vision-metal-cool:
        rgba(112, 151, 184, .24);

    --sv-vision-line:
        rgba(126, 137, 147, .24);

    --sv-vision-line-soft:
        rgba(126, 137, 147, .10);

}


/* =========================================================
   SPATIAL ARCHITECTURE
========================================================= */

.sv-vision-space__frame {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}


/* =========================================================
   CENTRAL AXIS
========================================================= */

.sv-vision-space__frame::after {

    content: "";

    position: absolute;

    top: 12vh;
    bottom: 8vh;

    left: 50%;

    width: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(154, 164, 173, .08) 16%,
            rgba(154, 164, 173, .18) 42%,
            rgba(112, 151, 184, .20) 62%,
            rgba(154, 164, 173, .10) 82%,
            transparent 100%);

    opacity: .72;

}


/* =========================================================
   REGISTRATION MARKS
========================================================= */

.sv-vision-space__edge {

    position: absolute;

    display: block;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(154, 164, 173, .44),
            rgba(238, 242, 244, .72),
            rgba(112, 151, 184, .26));

}


/* =========================================================
   TOP REGISTRATION
========================================================= */

.sv-vision-space__edge--top {

    top: 8vh;

    left: 6vw;

    width: 74px;

    height: 1px;

}


.sv-vision-space__edge--top::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 1px;

    height: 18px;

    background:
        rgba(154, 164, 173, .38);

}


/* =========================================================
   LEFT REGISTRATION
========================================================= */

.sv-vision-space__edge--left {

    top: 8vh;

    left: 6vw;

    width: 1px;

    height: 74px;

    background:
        linear-gradient(180deg,
            rgba(238, 242, 244, .66),
            rgba(154, 164, 173, .30),
            rgba(112, 151, 184, .18));

}


.sv-vision-space__edge--left::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 18px;

    height: 1px;

    background:
        rgba(154, 164, 173, .38);

}


/* =========================================================
   RIGHT REGISTRATION
========================================================= */

.sv-vision-space__edge--right {

    top: 8vh;

    right: 6vw;

    width: 1px;

    height: 74px;

    background:
        linear-gradient(180deg,
            rgba(238, 242, 244, .20),
            rgba(154, 164, 173, .30),
            rgba(112, 151, 184, .28));

}


.sv-vision-space__edge--right::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 18px;

    height: 1px;

    background:
        rgba(112, 151, 184, .30);

}


/* =========================================================
   BOTTOM REGISTRATION
========================================================= */

.sv-vision-space__edge--bottom {

    right: 6vw;

    bottom: 8vh;

    width: 74px;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(112, 151, 184, .22),
            rgba(238, 242, 244, .62),
            rgba(154, 164, 173, .32));

}


.sv-vision-space__edge--bottom::after {

    content: "";

    position: absolute;

    right: 0;

    top: -17px;

    width: 1px;

    height: 18px;

    background:
        rgba(154, 164, 173, .32);

}


/* =========================================================
   SPATIAL TRACES
========================================================= */

.sv-vision-space__rail {

    position: absolute;

    display: block;

    height: 1px;

    pointer-events: none;

    opacity: .50;

}


.sv-vision-space__rail--1 {

    top: 24vh;

    left: 7vw;

    width: 44px;

    background:
        linear-gradient(90deg,
            rgba(154, 164, 173, .30),
            transparent);

}


.sv-vision-space__rail--2 {

    top: 50%;

    right: 8vw;

    width: 54px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(112, 151, 184, .30));

}


.sv-vision-space__rail--3 {

    bottom: 22vh;

    left: 10vw;

    width: 32px;

    background:
        linear-gradient(90deg,
            rgba(154, 164, 173, .22),
            transparent);

}


/* =========================================================
   TRACE ENDS
========================================================= */

.sv-vision-space__rail::before {

    content: "";

    position: absolute;

    top: -2px;
    left: 0;

    width: 4px;
    height: 4px;

    border:
        1px solid rgba(205, 213, 218, .44);

    background:
        rgba(235, 239, 242, .12);

}


/* =========================================================
   CONTENT VIEWPORT
========================================================= */

.sv-vision-space__content {

    position: absolute;

    inset: 0;

    z-index: 5;

    width: 100%;
    height: 100%;

    overflow: visible;

}


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

@media (max-width: 767px) {

    .sv-vision-space__edge--top {

        top: 7vh;

        left: 5vw;

        width: 46px;

    }


    .sv-vision-space__edge--left {

        top: 7vh;

        left: 5vw;

        height: 46px;

    }


    .sv-vision-space__edge--right {

        top: 7vh;

        right: 5vw;

        height: 46px;

    }


    .sv-vision-space__edge--bottom {

        right: 5vw;

        bottom: 7vh;

        width: 46px;

    }


    .sv-vision-space__rail--1 {

        left: 8vw;

        width: 28px;

    }


    .sv-vision-space__rail--2 {

        right: 8vw;

        width: 34px;

    }


    .sv-vision-space__rail--3 {

        left: 10vw;

        width: 24px;

    }

}


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

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

    .sv-vision-space__frame::after {

        transition: none;

    }

}