/* =========================================================
   VAERO ENGINE — GLOBAL VIEWPORT SHELL
   PREMIUM SYSTEM GEOMETRY
   Stable Desktop + Mobile + Safe Area Architecture
========================================================= */


/* =========================================================
   01. ROOT VIEWPORT
========================================================= */

html{
    width:100%;
    height:100%;
    min-height:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#050c14;

    overscroll-behavior:none;

    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}


/* =========================================================
   BODY VIEWPORT
========================================================= */

body{
    position:fixed;

    inset:0;

    width:100%;
    height:100%;
    min-height:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    display:flex;

    align-items:stretch;
    justify-content:center;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(34,69,101,.92) 0%,
            rgba(10,24,38,.985) 39%,
            rgba(5,12,20,1) 100%
        );

    color:
        var(
            --text,
            #f5f5f2
        );

    touch-action:manipulation;

    overscroll-behavior:none;

    -webkit-overflow-scrolling:auto;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;
}


/* =========================================================
   GLOBAL BOX MODEL
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* =========================================================
   GLOBAL MEDIA SAFETY
========================================================= */

img,
svg,
video,
canvas,
picture{
    max-width:100%;
}

img,
video,
canvas{
    height:auto;
}


/* =========================================================
   ENGINE ROOT
========================================================= */

#engine{
    position:relative;

    isolation:isolate;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    max-width:1440px;

    margin:0 auto;

    padding:
        14px
        16px
        12px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    contain:
        layout
        paint;
}


/* =========================================================
   ENGINE BACKDROP
========================================================= */

#engine::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 78% 9%,
            rgba(73,135,190,.035),
            transparent 27%
        ),

        radial-gradient(
            circle at 18% 64%,
            rgba(194,151,81,.018),
            transparent 31%
        );
}

#engine::after{
    content:"";

    position:absolute;

    top:-160px;
    left:50%;

    z-index:-1;

    width:min(780px,76vw);
    height:330px;

    transform:
        translateX(-50%);

    pointer-events:none;

    border-radius:50%;

    background:
        rgba(55,116,168,.025);

    filter:blur(70px);
}


/* =========================================================
   MAIN ENGINE SHELL
========================================================= */

.vaero-shell{
    position:relative;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    flex:
        1
        1
        auto;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    isolation:isolate;
}


/* =========================================================
   CURRENT SCREEN
========================================================= */

.engine-screen{
    position:relative;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    flex:
        1
        1
        auto;

    display:block;

    overflow:hidden;

    overscroll-behavior:none;
}


/* =========================================================
   PAGE GEOMETRY
========================================================= */

.engine-page,
.vaero-engine-home,
.applications-app{
    position:relative;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    max-width:100%;

    overflow:hidden;
}


/* =========================================================
   ENGINE PAGE
========================================================= */

.engine-page{
    display:flex;

    flex-direction:column;
}


/* =========================================================
   GENERIC SECTION
========================================================= */

.section{
    position:relative;

    width:100%;
    height:auto;

    max-width:100%;

    min-width:0;
    min-height:0;

    padding:20px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:21px;

    background:
        linear-gradient(
            180deg,
            rgba(17,28,42,.9),
            rgba(9,17,28,.94)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018),

        0
        18px
        48px
        rgba(0,0,0,.2);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}


/* =========================================================
   SECTION INNER SAFETY
========================================================= */

.section > *{
    min-width:0;
}


/* =========================================================
   INTERNAL SCROLL ARCHITECTURE
========================================================= */

.engine-scroll,
.app-scroll,
.panel-scroll{
    position:relative;

    width:100%;

    min-width:0;
    min-height:0;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior-x:none;
    overscroll-behavior-y:contain;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(255,255,255,.12)
        transparent;
}


/* =========================================================
   INTERNAL SCROLLBAR — WEBKIT
========================================================= */

.engine-scroll::-webkit-scrollbar,
.app-scroll::-webkit-scrollbar,
.panel-scroll::-webkit-scrollbar{
    width:5px;
    height:5px;
}

.engine-scroll::-webkit-scrollbar-track,
.app-scroll::-webkit-scrollbar-track,
.panel-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.engine-scroll::-webkit-scrollbar-thumb,
.app-scroll::-webkit-scrollbar-thumb,
.panel-scroll::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        rgba(255,255,255,.1);
}

.engine-scroll::-webkit-scrollbar-thumb:hover,
.app-scroll::-webkit-scrollbar-thumb:hover,
.panel-scroll::-webkit-scrollbar-thumb:hover{
    background:
        rgba(255,255,255,.16);
}


/* =========================================================
   HIDDEN SCROLLBAR UTILITY
========================================================= */

.scroll-hidden{
    scrollbar-width:none;
}

.scroll-hidden::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   FLEX / GRID OVERFLOW SAFETY
========================================================= */

.vaero-shell,
.engine-screen,
.engine-page,
.engine-scroll,
.app-scroll,
.panel-scroll,
.section{
    min-width:0;
    min-height:0;
}


/* =========================================================
   TEXT OVERFLOW SAFETY
========================================================= */

.engine-screen h1,
.engine-screen h2,
.engine-screen h3,
.engine-screen h4,
.engine-screen p,
.engine-screen span,
.engine-screen strong,
.engine-screen small{
    min-width:0;
}


/* =========================================================
   FORM ELEMENTS
========================================================= */

input,
textarea,
select,
button{
    font-family:inherit;
}

input,
textarea,
select{
    max-width:100%;

    font-size:16px !important;
}

textarea{
    resize:vertical;
}

button{
    -webkit-tap-highlight-color:transparent;
}

button,
input,
select,
textarea{
    outline-offset:2px;
}


/* =========================================================
   BUTTON BASE SAFETY
========================================================= */

button{
    max-width:100%;

    border-radius:inherit;
}


/* =========================================================
   LINKS
========================================================= */

a{
    color:inherit;

    -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   SELECTION
========================================================= */

::selection{
    color:#f8f5ef;

    background:
        rgba(198,158,91,.25);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:1000px){

    #engine{
        max-width:1360px;

        padding:
            18px
            22px
            14px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1500px){

    #engine{
        max-width:1480px;

        padding:
            20px
            24px
            15px;
    }

}


/* =========================================================
   ULTRA WIDE
========================================================= */

@media (min-width:1800px){

    #engine{
        max-width:1540px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

    #engine{
        padding:
            10px
            10px
            8px;
    }

    .section{
        padding:17px;

        border-radius:19px;
    }

}


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

@media (max-width:600px){

    html,
    body{
        width:100%;
        height:100%;

        min-width:100%;
        min-height:100%;

        overflow:hidden;
    }

    body{
        position:fixed;

        inset:0;
    }

    #engine{
        width:100%;
        height:100%;

        min-height:0;

        max-width:none;

        padding:
            max(
                5px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            7px
            max(
                5px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .vaero-shell{
        width:100%;
        height:100%;

        min-height:0;
    }

    .engine-screen{
        width:100%;
        height:100%;

        min-height:0;

        flex:
            1
            1
            auto;
    }

    .engine-page,
    .vaero-engine-home,
    .applications-app{
        height:100%;
    }

    .section{
        padding:14px;

        border-radius:17px;
    }

    .engine-scroll,
    .app-scroll,
    .panel-scroll{
        scrollbar-width:none;
    }

    .engine-scroll::-webkit-scrollbar,
    .app-scroll::-webkit-scrollbar,
    .panel-scroll::-webkit-scrollbar{
        display:none;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:390px){

    #engine{
        padding-left:5px;
        padding-right:5px;
    }

    .section{
        padding:12px;

        border-radius:15px;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width:350px){

    #engine{
        padding-left:4px;
        padding-right:4px;
    }

    .section{
        padding:10px;

        border-radius:14px;
    }

}


/* =========================================================
   SHORT VIEWPORTS
========================================================= */

@media (max-height:720px){

    #engine{
        padding-top:6px;
        padding-bottom:6px;
    }

    .section{
        padding-top:13px;
        padding-bottom:13px;
    }

}


/* =========================================================
   VERY SHORT VIEWPORTS
========================================================= */

@media (max-height:620px){

    #engine{
        padding-top:4px;
        padding-bottom:4px;
    }

    .section{
        padding-top:10px;
        padding-bottom:10px;
    }

}


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

@media
(
    max-height:520px
)
and
(
    orientation:landscape
){

    #engine{
        padding:
            4px
            max(
                8px,
                env(
                    safe-area-inset-right,
                    0px
                )
            )
            4px
            max(
                8px,
                env(
                    safe-area-inset-left,
                    0px
                )
            );
    }

    .section{
        padding:10px;

        border-radius:15px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .engine-scroll,
    .app-scroll,
    .panel-scroll{
        scrollbar-width:none;
    }

    .engine-scroll::-webkit-scrollbar,
    .app-scroll::-webkit-scrollbar,
    .panel-scroll::-webkit-scrollbar{
        display:none;
    }

}


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

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
    }

}


/* =========================================================
   HIGH CONTRAST SUPPORT
========================================================= */

@media (prefers-contrast:more){

    .section{
        border-color:
            rgba(255,255,255,.13);
    }

}


/* =========================================================
   IOS / SAFARI VIEWPORT STABILITY
========================================================= */

@supports (-webkit-touch-callout:none){

    html,
    body,
    #engine{
        height:100%;
    }

    body{
        min-height:
            -webkit-fill-available;
    }

    #engine{
        min-height:
            -webkit-fill-available;
    }

}


/* =========================================================
   MODERN DYNAMIC VIEWPORT
========================================================= */

@supports (height:100dvh){

    body{
        height:100dvh;
    }

    #engine{
        height:100dvh;
    }

}


/* =========================================================
   VIEWPORT FINAL SAFETY
   ---------------------------------------------------------
   Document itself never scrolls.
   Screen always remains inside Engine.
   Only designated inner areas may scroll.
========================================================= */

html,
body,
#engine,
.vaero-shell,
.engine-screen{
    overflow:hidden;
}

#engine,
.vaero-shell,
.engine-screen,
.engine-page{
    min-height:0;
}

.engine-scroll,
.app-scroll,
.panel-scroll{
    max-height:100%;
}


/* =========================================================
   END — VAERO ENGINE GLOBAL LAYOUT
========================================================= */