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

Space Vanta Theme 1.0

Module:
Vision Nodes

Version:
VISION-NODES-003

Responsibility:
Vision Node spatial state
Active / Preview / Inactive
Common Node shell

Does NOT own:
Node-specific typography
Node-specific editorial composition
Passage controls
Vision frame architecture

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


/* =================================================
   Vision Node Base
================================================= */

.sv-vision-node {

    position: absolute;

    top: 30vh;
    left: 50%;

    width: min(760px, 54vw);

    min-height: 0;

    margin: 0;
    padding: 0;

    opacity: 0;

    visibility: visible;

    pointer-events: none;

    transform:
        translate3d(-50%, 10vh, 0) scale(.62);

    filter: blur(9px);

    z-index: 2;

    transition:
        transform 760ms cubic-bezier(.22, .61, .36, 1),
        opacity 560ms ease,
        filter 620ms ease;

}


/* =================================================
   Active Node
================================================= */

.sv-vision-node[data-vision-node-state="active"] {

    opacity: 1;

    pointer-events: auto;

    transform:
        translate3d(-50%, 0, 0) scale(1);

    filter: blur(0);

    z-index: 10;

}


/* =================================================
   Previous Preview
================================================= */

.sv-vision-node[data-vision-node-state="preview-previous"] {

    opacity: .30;

    pointer-events: auto;

    cursor: pointer;

    transform:
        translate3d(-92%, 8vh, 0) scale(.68);

    filter: blur(5px);

    z-index: 6;

}


/* =================================================
   Next Preview
================================================= */

.sv-vision-node[data-vision-node-state="preview-next"] {

    opacity: .30;

    pointer-events: auto;

    cursor: pointer;

    transform:
        translate3d(-8%, 8vh, 0) scale(.68);

    filter: blur(5px);

    z-index: 6;

}


/* =================================================
   Preview Interaction
================================================= */

.sv-vision-node[data-vision-node-state="preview-previous"]:hover,
.sv-vision-node[data-vision-node-state="preview-next"]:hover {

    opacity: .52;

    filter: blur(2.5px);

}


/* =================================================
   Preview Keyboard Focus
================================================= */

.sv-vision-node[data-vision-node-state="preview-previous"]:focus-visible,
.sv-vision-node[data-vision-node-state="preview-next"]:focus-visible {

    opacity: .62;

    filter: blur(1.5px);

    outline: 1px solid rgba(117, 148, 169, .34);

    outline-offset: 8px;

}


/* =================================================
   Inactive Node
================================================= */

.sv-vision-node[data-vision-node-state="inactive"] {

    opacity: 0;

    pointer-events: none;

    transform:
        translate3d(-50%, 10vh, 0) scale(.62);

    filter: blur(9px);

    z-index: 2;

}


/* =================================================
   Common Node Content Shell
================================================= */

.sv-vision-node__content {

    position: relative;

    width: 100%;

    max-width: 720px;

    margin: 0 auto;

    text-align: center;

}


/* =================================================
   Common Layout Shell
================================================= */

.sv-vision-layout {

    position: relative;

    width: 100%;

    min-height: 0;

    margin: 0;

    padding: 0;

}


/* =================================================
   Layout Levels
================================================= */

.sv-vision-layout__level {

    position: relative;

    top: auto;
    left: auto;

    width: 100%;

    margin: 0;
    padding: 0;

    transform: none;

}


.sv-vision-layout__level+.sv-vision-layout__level {

    margin-top: 22px;

}


/* =================================================
   Generic Index
================================================= */

.sv-vision-node__index {

    display: block;

    margin: 0 0 8px;

    font-size: 9px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: .18em;

    color: rgba(92, 108, 121, .56);

}


/* =================================================
   Generic Eyebrow
================================================= */

.sv-vision-node__eyebrow {

    margin: 0 0 14px;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: .28em;

    color: rgba(91, 111, 126, .64);

}


/* =================================================
   Generic English Supporting Line
================================================= */

.sv-vision-node__english {

    margin: 18px 0 0;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 500;

    letter-spacing: .16em;

    color: rgba(88, 101, 112, .54);

}


/* =================================================
   Generic Description
================================================= */

.sv-vision-node__description {

    max-width: 560px;

    margin: 18px auto 0;

    font-size: 13px;

    line-height: 1.9;

    font-weight: 400;

    color: rgba(70, 78, 85, .72);

}


/* =================================================
   Generic Keywords
================================================= */

.sv-vision-node__keywords {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}


.sv-vision-node__keyword {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 0 10px;

    border: 1px solid rgba(126, 139, 149, .20);

    border-radius: 999px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .58),
            rgba(226, 230, 232, .24));

    font-size: 9px;

    line-height: 1;

    letter-spacing: .08em;

    color: rgba(78, 92, 103, .64);

}


/* =================================================
   Passage / Axis

   Passage navigation is now owned by passage.css.
================================================= */

.sv-vision-node__passage,
.sv-vision-node__axis {

    display: none;

}


/* =================================================
   Closing Node

   Closing is controlled separately and is not part
   of the spatial navigator.
================================================= */

.sv-vision-node[data-vision-node="closing"] {

    display: none;

}


/* =================================================
   Reduced Motion
================================================= */

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

    .sv-vision-node {

        transition: none;

    }

}


/* =================================================
   Mobile
================================================= */

@media (max-width: 767px) {

    .sv-vision-node {

        top: 30vh;

        width: min(78vw, 620px);

    }


    .sv-vision-node[data-vision-node-state="preview-previous"] {

        transform:
            translate3d(-76%, 8vh, 0) scale(.60);

        filter: blur(5px);

    }


    .sv-vision-node[data-vision-node-state="preview-next"] {

        transform:
            translate3d(-24%, 8vh, 0) scale(.60);

        filter: blur(5px);

    }


    .sv-vision-node__content {

        width: 100%;

        max-width: 78vw;

    }


    .sv-vision-node__index {

        font-size: 8px;

        letter-spacing: .16em;

    }


    .sv-vision-node__eyebrow {

        margin-bottom: 12px;

        font-size: 8px;

        letter-spacing: .24em;

    }


    .sv-vision-node__english {

        margin-top: 15px;

        font-size: 9px;

    }


    .sv-vision-node__description {

        max-width: 76vw;

        margin-top: 15px;

        font-size: 12px;

        line-height: 1.8;

    }


    .sv-vision-node__keywords {

        gap: 6px;

        margin-top: 16px;

    }

}