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

Space Vanta Theme 1.0

Featured Function:
Vision

Component:
Viewport Geometry

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

Version:
VISION-GEOMETRY-005

Concept:
Expansion / Growth / Possibility

Responsibility:
- Vision Spatial Surface
- Spatial Frame
- Metallic Edges
- Spatial Rails
- Stable Aperture

Does NOT control:
- Panel
- Close
- Passage
- Nodes
- Interaction
- Transition sequence
- Viewport state

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


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

.sv-vision-space {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    height:
        100%;

    overflow:
        hidden;

    background:
        transparent;

}


/* =================================================
   SPATIAL FRAME
================================================= */

.sv-vision-space__frame {

    position:
        absolute;

    left:
        50%;

    top:
        8vh;

    width:
        min(88vw, 1180px);

    height:
        80vh;

    transform:
        translateX(-50%);

    pointer-events:
        auto;

    z-index:
        1;

}


/* =================================================
   APERTURE ANCHOR
================================================= */

.sv-vision-space__aperture-anchor {

    position:
        absolute;

    left:
        50%;

    top:
        15vh;

    width:
        30px;

    height:
        22px;

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

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        5;

    transition:
        opacity 360ms ease;

}


/* =================================================
   STABLE APERTURE
================================================= */

.sv-vision-space__aperture {

    position:
        relative;

    width:
        30px;

    height:
        22px;

    display:
        block;

    transform:
        rotate(-2deg);

    transform-style:
        preserve-3d;

}


/* =================================================
   APERTURE FRAGMENTS
================================================= */

.sv-vision-space__aperture-fragment {

    position:
        absolute;

    display:
        block;

    height:
        2px;

    transform-origin:
        center center;

    background:
        linear-gradient(90deg,
            rgba(132, 143, 154, .62),
            rgba(245, 248, 250, .98),
            rgba(104, 138, 171, .78));

    box-shadow:
        0 0 4px rgba(72, 112, 154, .12);

}


/* =================================================
   FRAGMENT A
================================================= */

.sv-vision-space__aperture-fragment--a {

    width:
        11px;

    left:
        1px;

    top:
        5px;

    transform:
        rotate(24deg);

}


/* =================================================
   FRAGMENT B
================================================= */

.sv-vision-space__aperture-fragment--b {

    width:
        11px;

    right:
        1px;

    top:
        5px;

    transform:
        rotate(-24deg);

}


/* =================================================
   FRAGMENT C
================================================= */

.sv-vision-space__aperture-fragment--c {

    width:
        11px;

    left:
        1px;

    bottom:
        5px;

    transform:
        rotate(-24deg);

}


/* =================================================
   FRAGMENT D
================================================= */

.sv-vision-space__aperture-fragment--d {

    width:
        11px;

    right:
        1px;

    bottom:
        5px;

    transform:
        rotate(24deg);

}


/* =================================================
   FRAGMENT E
================================================= */

.sv-vision-space__aperture-fragment--e {

    width:
        8px;

    left:
        7px;

    top:
        10px;

    transform:
        rotate(-90deg);

    opacity:
        .68;

}


/* =================================================
   FRAGMENT F
================================================= */

.sv-vision-space__aperture-fragment--f {

    width:
        8px;

    right:
        7px;

    top:
        10px;

    transform:
        rotate(90deg);

    opacity:
        .68;

}


/* =================================================
   APERTURE CORE
================================================= */

.sv-vision-space__aperture-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

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

    background:
        rgba(104, 150, 194, .90);

    box-shadow:
        0 0 5px rgba(71, 123, 178, .28);

}


/* =================================================
   STABLE APERTURE STATE
================================================= */

.sv-featured-panel--vision[data-vision-transition="stable"] .sv-vision-space__aperture-anchor {

    opacity:
        1;

}


/* =================================================
   FRAME EDGE BASE
================================================= */

.sv-vision-space__edge {

    position:
        absolute;

    display:
        block;

    background:
        linear-gradient(90deg,
            rgba(110, 122, 134, .08),
            rgba(190, 198, 206, .66),
            rgba(245, 247, 249, .90),
            rgba(111, 145, 176, .42),
            rgba(110, 122, 134, .06));

    opacity:
        .82;

    box-shadow:
        0 0 1px rgba(239, 243, 246, .54);

}


/* =================================================
   FRAME EDGE REFLECTION
================================================= */

.sv-vision-space__edge::after {

    content:
        "";

    position:
        absolute;

    display:
        block;

    pointer-events:
        none;

    opacity:
        .72;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .96),
            rgba(146, 183, 214, .52),
            rgba(255, 255, 255, 0));

    box-shadow:
        0 0 7px rgba(187, 216, 239, .28);

}


/* =================================================
   TOP EDGE
================================================= */

.sv-vision-space__edge--top {

    left:
        4%;

    right:
        4%;

    top:
        0;

    width:
        auto;

    height:
        1px;

}


/* =================================================
   TOP EDGE REFLECTION
================================================= */

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

    left:
        38%;

    top:
        -1px;

    width:
        24%;

    height:
        3px;

}


/* =================================================
   LEFT EDGE
================================================= */

.sv-vision-space__edge--left {

    left:
        4%;

    top:
        0;

    width:
        1px;

    height:
        100%;

    transform:
        skewX(21deg);

    transform-origin:
        top center;

}


/* =================================================
   LEFT EDGE REFLECTION
================================================= */

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

    left:
        -1px;

    top:
        38%;

    width:
        3px;

    height:
        22%;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .94),
            rgba(136, 177, 211, .48),
            rgba(255, 255, 255, 0));

}


/* =================================================
   RIGHT EDGE
================================================= */

.sv-vision-space__edge--right {

    right:
        4%;

    top:
        0;

    width:
        1px;

    height:
        100%;

    transform:
        skewX(-21deg);

    transform-origin:
        top center;

}


/* =================================================
   RIGHT EDGE REFLECTION
================================================= */

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

    right:
        -1px;

    top:
        38%;

    width:
        3px;

    height:
        22%;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .94),
            rgba(136, 177, 211, .48),
            rgba(255, 255, 255, 0));

}


/* =================================================
   BOTTOM EDGE
================================================= */

.sv-vision-space__edge--bottom {

    left:
        31%;

    right:
        31%;

    bottom:
        0;

    width:
        auto;

    height:
        1px;

    background:
        linear-gradient(90deg,
            rgba(164, 174, 184, 0),
            rgba(205, 213, 220, .54),
            rgba(244, 247, 249, .82),
            rgba(102, 137, 169, .34),
            rgba(164, 174, 184, 0));

}


/* =================================================
   BOTTOM EDGE REFLECTION
================================================= */

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

    left:
        36%;

    top:
        -1px;

    width:
        28%;

    height:
        3px;

}


/* =================================================
   SPATIAL RAIL BASE
================================================= */

.sv-vision-space__rail {

  position:
    absolute;

  left:
    50%;

  height:
    1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(90deg,
      rgba(164, 174, 184, 0),
      rgba(195, 204, 212, .42),
      rgba(242, 245, 247, .66),
      rgba(112, 146, 176, .28),
      rgba(164, 174, 184, 0));

  opacity:
    .78;

}


/* =================================================
   RAIL REFLECTION
================================================= */

.sv-vision-space__rail::after {

  content:
    "";

  position:
    absolute;

  left:
    38%;

  top:
    -1px;

  width:
    24%;

  height:
    3px;

  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, .84),
      rgba(137, 178, 211, .44),
      rgba(255, 255, 255, 0));

  opacity:
    .48;

}


/* =================================================
   RAIL 1
   Spatial coordinate:
   27.2vh from Vision Space top
================================================= */

.sv-vision-space__rail--1 {

  top:
    24%;

  width:
    72%;

}


/* =================================================
   RAIL 2
   Spatial coordinate:
   46.4vh from Vision Space top
================================================= */

.sv-vision-space__rail--2 {

  top:
    48%;

  width:
    62%;

}


/* =================================================
   RAIL 3
   Spatial coordinate:
   65.6vh from Vision Space top
================================================= */

.sv-vision-space__rail--3 {

  top:
    72%;

  width:
    50%;

}

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

@media (max-width: 767px) {

    .sv-vision-space__frame {

        top:
            8vh;

        width:
            94vw;

        height:
            78vh;

    }


    .sv-vision-space__aperture-anchor {

        top:
            13vh;

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

    }


    .sv-vision-space__edge--top {

        left:
            7%;

        right:
            7%;

    }


    .sv-vision-space__edge--left {

        left:
            7%;

        transform:
            skewX(15deg);

    }


    .sv-vision-space__edge--right {

        right:
            7%;

        transform:
            skewX(-15deg);

    }


    .sv-vision-space__edge--bottom {

        left:
            27%;

        right:
            27%;

    }


    .sv-vision-space__rail--1 {

        width:
            78%;

    }


    .sv-vision-space__rail--2 {

        width:
            66%;

    }


    .sv-vision-space__rail--3 {

        width:
            54%;

    }

}


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

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

    .sv-vision-space__frame,
    .sv-vision-space__edge,
    .sv-vision-space__rail,
    .sv-vision-space__aperture-anchor {

        transition:
            none;

    }

}