/* =========================================================
   ZBITVERSE
   OUR VISION
   vision-page.css

   Concept:

   PROPÓSITO
        ↓
   EVOLUCIÓN
        ↓
   ECOSISTEMA
        ↓
   CAPACIDAD

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


/* =========================================================
   01. FOUNDATION
========================================================= */

body {

    background:
        #050816;

    color:
        #f8fafc;

}


.vision-hero,
.vision-principles,
.vision-final {

    position:
        relative;

    overflow:
        hidden;

}


/* =========================================================
   02. GLOBAL CONTAINER
========================================================= */

.vision-hero .container,
.vision-principles .container,
.vision-final .container {

    width:
        min(
            calc(100% - 4rem),
            1280px
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   03. NAVBAR
========================================================= */

.navbar {

    position:
        relative;

    z-index:
        1000;

    width:
        100%;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .08);

    background:
        rgba(5, 8, 22, .88);

    backdrop-filter:
        blur(18px);

}


.navbar .container {

    width:
        min(
            calc(100% - 4rem),
            1280px
        );

    margin-left:
        auto;

    margin-right:
        auto;

}


.navbar .nav {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

}


.navbar .logo {

    flex-shrink:
        0;

    color:
        #f8fafc;

    font-size:
        1.15rem;

    font-weight:
        800;

    letter-spacing:
        .16rem;

    text-decoration:
        none;

}


.navbar .nav-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.navbar .nav-menu li {

    margin:
        0;

    padding:
        0;

}


.navbar .nav-menu a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        .4rem 0;

    color:
        rgba(
            226,
            232,
            240,
            .72
        );

    font-size:
        .82rem;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        color .25s ease;

}


.navbar .nav-menu a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        #2563eb;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .25s ease;

}


.navbar .nav-menu a:hover,
.navbar .nav-menu a.active {

    color:
        #ffffff;

}


.navbar .nav-menu a:hover::after,
.navbar .nav-menu a.active::after {

    transform:
        scaleX(1);

}


.navbar .btn {

    flex-shrink:
        0;

}


.navbar .menu-toggle {

    display:
        none;

}


/* =========================================================
   04. VISION HERO
========================================================= */

.vision-hero {

    min-height:
        calc(
            100vh - 78px
        );

    display:
        flex;

    align-items:
        center;

    padding:
        7rem 0 8rem;

    background:

        radial-gradient(
            circle at 78% 45%,
            rgba(
                37,
                99,
                235,
                .11
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(
                37,
                99,
                235,
                .045
            ),
            transparent 28%
        );

}


/* =========================================================
   05. TECHNOLOGICAL GRID
========================================================= */

.vision-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:

        linear-gradient(
            rgba(
                37,
                99,
                235,
                .035
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                37,
                99,
                235,
                .035
            ) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        radial-gradient(
            circle at 70% 50%,
            black,
            transparent 72%
        );

}


/* =========================================================
   06. HERO CONTAINER
========================================================= */

.vision-hero .container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   07. PAGE LABEL
========================================================= */

.vision-hero .page-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        .75rem;

    margin-bottom:
        2.75rem;

    color:
        #2563eb;

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .2rem;

    text-transform:
        uppercase;

}


.vision-hero .page-label span {

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #2563eb;

    box-shadow:
        0 0 14px
        rgba(
            37,
            99,
            235,
            .9
        );

}


/* =========================================================
   08. HERO TITLE
========================================================= */

.vision-hero h1 {

    max-width:
        1050px;

    margin:
        0;

    color:
        #f8fafc;

    font-size:
        clamp(
            4rem,
            7vw,
            7.2rem
        );

    font-weight:
        700;

    line-height:
        .94;

    letter-spacing:
        -.06em;

}


.vision-hero h1 span {

    display:
        block;

    max-width:
        1050px;

    color:
        #2563eb;

}


/* =========================================================
   09. HERO DESCRIPTION
========================================================= */

.vision-hero > .container > p {

    max-width:
        700px;

    margin:
        2.5rem 0 0;

    color:
        #b8c2d3;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height:
        1.8;

}


/* =========================================================
   10. VISION PRINCIPLES
========================================================= */

.vision-principles {

    border-top:
        1px solid
        rgba(
            148,
            163,
            184,
            .08
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                3,
                8,
                20,
                .65
            ),
            rgba(
                4,
                9,
                22,
                .95
            )
        );

}


.vision-principles .container {

    padding:
        2rem 0 0;

}


/* =========================================================
   11. PRINCIPLE BLOCK
========================================================= */

.vision-block {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        100px
        minmax(
            0,
            1fr
        );

    column-gap:
        3rem;

    padding:
        5.5rem 0;

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            .10
        );

}


/* =========================================================
   12. PRINCIPLE NUMBER
========================================================= */

.vision-block > span {

    position:
        relative;

    color:
        #2563eb;

    font-size:
        .75rem;

    font-weight:
        700;

    letter-spacing:
        .12rem;

}


.vision-block > span::after {

    content:
        "";

    position:
        absolute;

    top:
        1.6rem;

    left:
        0;

    width:
        42px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            transparent
        );

}


/* =========================================================
   13. PRINCIPLE TITLE
========================================================= */

.vision-block h2 {

    max-width:
        900px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -.045em;

}


/* =========================================================
   14. PRINCIPLE DESCRIPTION
========================================================= */

.vision-block p {

    grid-column:
        2;

    max-width:
        650px;

    margin:
        1.75rem 0 0;

    color:
        #aeb8c7;

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   15. PRINCIPLE HOVER
========================================================= */

.vision-block::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    bottom:
        0;

    left:
        -2rem;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 65% 50%,
            rgba(
                37,
                99,
                235,
                .055
            ),
            transparent 35%
        );

    opacity:
        0;

    transition:
        opacity .45s ease;

}


.vision-block:hover::before {

    opacity:
        1;

}


/* =========================================================
   16. PRINCIPLE NODE
========================================================= */

.vision-block::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        8%;

    width:
        120px;

    height:
        120px;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(
            37,
            99,
            235,
            .14
        );

    border-radius:
        50%;

    box-shadow:

        0 0 0 25px
        rgba(
            37,
            99,
            235,
            .025
        ),

        0 0 0 50px
        rgba(
            37,
            99,
            235,
            .015
        );

    pointer-events:
        none;

}


/* =========================================================
   17. FINAL VISION
========================================================= */

.vision-final {

    padding:
        9rem 0 10rem;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(
                37,
                99,
                235,
                .09
            ),
            transparent 42%
        );

}


.vision-final-content {

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;

}


/* =========================================================
   18. FINAL LABEL
========================================================= */

.vision-final-content > span {

    display:
        block;

    margin-bottom:
        1.5rem;

    color:
        #2563eb;

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .2rem;

}


/* =========================================================
   19. FINAL TITLE
========================================================= */

.vision-final-content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    font-weight:
        700;

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


/* =========================================================
   20. FINAL DESCRIPTION
========================================================= */

.vision-final-content p {

    max-width:
        650px;

    margin:
        2rem auto 2.5rem;

    color:
        #aeb8c7;

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   21. FINAL BUTTON
========================================================= */

.vision-final-content .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        220px;

}


/* =========================================================
   22. SCROLL REVEAL
========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity .8s ease,

        transform
        .8s cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


[data-reveal].is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   23. REVEAL DELAYS
========================================================= */

[data-delay="1"] {

    transition-delay:
        .12s;

}


[data-delay="2"] {

    transition-delay:
        .24s;

}


[data-delay="3"] {

    transition-delay:
        .36s;

}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 992px) {

    .vision-hero .container,
    .vision-principles .container,
    .vision-final .container,
    .navbar .container {

        width:
            min(
                calc(100% - 3rem),
                1100px
            );

    }


    .vision-hero {

        padding:
            6rem 0 7rem;

    }


    .vision-hero h1 {

        font-size:
            clamp(
                3.8rem,
                8vw,
                6rem
            );

    }


    .vision-block {

        grid-template-columns:
            70px
            minmax(
                0,
                1fr
            );

        column-gap:
            2rem;

    }


    .vision-block::after {

        right:
            2%;

        opacity:
            .5;

    }

}


/* =========================================================
   25. MOBILE NAVIGATION
========================================================= */

@media (max-width: 700px) {

    .navbar .container {

        width:
            calc(
                100% - 2rem
            );

    }


    .navbar .nav {

        min-height:
            70px;

    }


    .navbar .nav-menu {

        display:
            none;

    }


    .navbar .nav > .btn {

        display:
            none;

    }


    .navbar .menu-toggle {

        width:
            42px;

        height:
            42px;

        display:
            inline-flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            rgba(
                148,
                163,
                184,
                .2
            );

        border-radius:
            10px;

        background:
            transparent;

        color:
            #ffffff;

        cursor:
            pointer;

    }


    .navbar .menu-toggle span {

        display:
            block;

        width:
            17px;

        height:
            1px;

        background:
            #ffffff;

    }


    .vision-hero .container,
    .vision-principles .container,
    .vision-final .container {

        width:
            calc(
                100% - 2rem
            );

    }


    .vision-hero {

        min-height:
            auto;

        padding:
            5rem 0 6rem;

    }


    .vision-hero h1 {

        font-size:
            clamp(
                3.2rem,
                13vw,
                5rem
            );

        line-height:
            .95;

    }


    .vision-hero h1 span {

        margin-top:
            .15rem;

    }


    .vision-hero > .container > p {

        margin-top:
            1.75rem;

        font-size:
            1rem;

    }


    .vision-block {

        display:
            block;

        padding:
            4rem 0;

    }


    .vision-block > span {

        display:
            block;

        margin-bottom:
            1.75rem;

    }


    .vision-block h2 {

        font-size:
            clamp(
                2.5rem,
                11vw,
                4rem
            );

    }


    .vision-block p {

        margin-top:
            1.5rem;

    }


    .vision-block::after {

        width:
            90px;

        height:
            90px;

        right:
            -20px;

        opacity:
            .25;

    }


    .vision-final {

        padding:
            6rem 0 7rem;

    }


    .vision-final-content h2 {

        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );

    }

}


/* =========================================================
   26. REDUCED MOTION
========================================================= */

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

    [data-reveal] {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }

}