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

CTM PATH™ Guided Journey v6.0

File
css/04-layout.css

Purpose
Application Layout System

Responsibility
• Global Layout
• Global Header
• Hero Layout
• Screen Layout
• Container System
• Logo Placement
• Divider Styles
• Responsive Layout

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


/*==================================================
Body
==================================================*/

body{

    margin:0;

    padding:0;

    min-height:100vh;

    background:

        var(--hero-overlay),

        var(--hero-glow),

        radial-gradient(

            ellipse at top,

            var(--bg-page-top) 0%,

            var(--bg-page-middle) 22%,

            #08192F 42%,

            #06111E 66%,

            var(--bg-page-bottom) 100%

        );

    background-color:var(--bg-page);

    background-attachment:fixed;

    color:var(--text-primary);

    overflow-x:hidden;

}


/*==================================================
Application Shell
==================================================*/

#app-shell{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

}


/*==================================================
Application Ambient Light
==================================================*/

#app-shell::before{

    content:"";

    position:fixed;

    top:-20vh;

    left:50%;

    transform:translateX(-50%);

    width:1400px;

    height:1400px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.03) 0%,

            rgba(217,181,106,.06) 18%,

            rgba(24,166,109,.025) 36%,

            rgba(18,49,93,.02) 56%,

            transparent 76%

        );

    pointer-events:none;

    z-index:0;

}


/*==================================================
Application Vignette
==================================================*/

#app-shell::after{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(

            ellipse at center,

            transparent 46%,

            rgba(0,0,0,.18) 74%,

            rgba(0,0,0,.38) 100%

        );

    pointer-events:none;

    z-index:0;

}


/*==================================================
Global Header
==================================================*/

#global-header{

    position:absolute;

    top:46px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:var(--z-header);

    pointer-events:none;

}


/*==================================================
Brand
==================================================*/

.brand{

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:auto;

}


/*==================================================
Logo
==================================================*/

.brand-logo{

    display:block;

    width:220px;

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(0 22px 54px rgba(0,0,0,.50))

        drop-shadow(0 0 34px rgba(217,181,106,.14));

    transition:

        transform var(--speed-normal) var(--ease-premium),

        filter var(--speed-normal) var(--ease-premium);

}


.brand-logo:hover{

    transform:

        translateY(-2px)

        scale(1.02);

    filter:

        drop-shadow(0 26px 60px rgba(0,0,0,.60))

        drop-shadow(0 0 46px rgba(217,181,106,.22));

}

/*==================================================
Journey Container
==================================================*/

#journey-container{

    position:relative;

    width:100%;

    min-height:100vh;

    z-index:var(--z-content);

}


/*==================================================
Screen Container
==================================================*/

#screen-container{

    position:relative;

    width:100%;

    min-height:100vh;

    z-index:var(--z-content);

}


/*==================================================
Screen
==================================================*/

.screen{

    position:relative;

    width:100%;

    min-height:var(--screen-min-height);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:

        200px

        48px

        96px;

}


/*==================================================
Container
==================================================*/

.container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}


/*==================================================
Hero
==================================================*/

.hero{

    position:relative;

    width:100%;

    max-width:var(--hero-max-width);

    margin:130px auto 0;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    gap:var(--hero-section-gap);

}


/*==================================================
Hero Ambient Glow
==================================================*/

.hero::before{

    content:"";

    position:absolute;

    top:42%;

    left:50%;

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

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.03) 0%,

            rgba(217,181,106,.08) 18%,

            rgba(24,166,109,.035) 34%,

            rgba(18,49,93,.02) 54%,

            transparent 80%

        );

    pointer-events:none;

    z-index:-2;

}


/*==================================================
Hero Soft Spotlight
==================================================*/

.hero::after{

    content:"";

    position:absolute;

    top:-20px;

    left:50%;

    transform:translateX(-50%);

    width:620px;

    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            ellipse,

            rgba(255,255,255,.035),

            rgba(255,255,255,.012),

            transparent 74%

        );

    filter:blur(54px);

    pointer-events:none;

    z-index:-1;

}


/*==================================================
Hero Header
==================================================*/

.hero-header{

    display:none;

}

/*==================================================
Welcome Block
==================================================*/

.welcome-block{

    width:100%;

    max-width:760px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:34px;

    margin-top:96px;

    margin-bottom:44px;

}


/*==================================================
Introduction Block
==================================================*/

.introduction-block{

    width:100%;

    max-width:720px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:42px;

}


/*==================================================
CTA Block
==================================================*/

.cta-block{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:40px;

}


/*==================================================
Gold Divider
==================================================*/

.gold-divider{

    position:relative;

    width:280px;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(217,181,106,.18) 18%,

            rgba(217,181,106,1) 50%,

            rgba(217,181,106,.18) 82%,

            transparent 100%

        );

}


/*==================================================
Divider Star
==================================================*/

.gold-divider::after{

    content:"✦";

    position:absolute;

    top:50%;

    left:50%;

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

    background:var(--bg-page);

    color:var(--text-gold);

    padding:0 18px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.08em;

}


/*==================================================
Small Divider
==================================================*/

.gold-divider.small{

    width:200px;

}


/*==================================================
Spacer
==================================================*/

.spacer{

    width:100%;

    height:56px;

}


/*==================================================
Section
==================================================*/

.section{

    width:100%;

    margin:0 auto;

}


/*==================================================
Row
==================================================*/

.row{

    display:flex;

    gap:36px;

    align-items:flex-start;

}


/*==================================================
Column
==================================================*/

.column{

    flex:1;

}


/*==================================================
Glass
==================================================*/

.glass{

    background:rgba(255,255,255,.035);

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

    border-radius:var(--radius-card);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

        var(--shadow-soft),

        inset 0 1px 0 rgba(255,255,255,.05);

}

/*==================================================
Desktop
==================================================*/

@media (max-width:1200px){

    .screen{

        padding:

            180px

            40px

            84px;

    }

    .container{

        max-width:1100px;

    }

    .hero{

        max-width:840px;

        margin-top:110px;

        gap:64px;

    }

    .welcome-block{

        margin-top:76px;

        margin-bottom:38px;

    }

    .introduction-block{

        gap:36px;

    }

    .gold-divider{

        width:250px;

    }

}


/*==================================================
Tablet
==================================================*/

@media (max-width:992px){

    #global-header{

        top:36px;

    }

    .brand-logo{

        width:180px;

    }

    .screen{

        padding:

            168px

            34px

            72px;

    }

    .container{

        max-width:100%;

    }

    .hero{

        max-width:740px;

        margin-top:92px;

        gap:54px;

    }

    .welcome-block{

        margin-top:60px;

        margin-bottom:30px;

        gap:26px;

    }

    .introduction-block{

        gap:30px;

    }

    .gold-divider{

        width:220px;

    }

}


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

@media (max-width:768px){

    #global-header{

        top:24px;

    }

    .brand-logo{

        width:145px;

    }

    .screen{

        padding:

            142px

            22px

            48px;

    }

    .container{

        width:100%;

    }

    .hero{

        width:100%;

        margin-top:70px;

        gap:42px;

    }

    .welcome-block{

        margin-top:42px;

        margin-bottom:22px;

        gap:20px;

    }

    .introduction-block{

        gap:24px;

    }

    .gold-divider{

        width:180px;

    }

}

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

@media (max-width:480px){

    #global-header{

        top:18px;

    }

    .brand-logo{

        width:120px;

    }

    .screen{

        padding:

            120px

            16px

            36px;

    }

    .container{

        width:100%;

    }

    .hero{

        width:100%;

        margin-top:56px;

        gap:34px;

    }

    .welcome-block{

        margin-top:34px;

        margin-bottom:18px;

        gap:16px;

    }

    .introduction-block{

        gap:18px;

    }

    .cta-block{

        margin-top:28px;

    }

    .gold-divider{

        width:150px;

    }

    .gold-divider.small{

        width:120px;

    }

}


/*==================================================
Landscape Phones
==================================================*/

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

    .screen{

        padding:

            96px

            24px

            36px;

    }

    .hero{

        margin-top:24px;

        gap:22px;

    }

    .welcome-block{

        margin-top:18px;

        margin-bottom:12px;

    }

    .introduction-block{

        gap:16px;

    }

}


/*==================================================
Touch Devices
==================================================*/

@media (hover:none){

    .brand-logo:hover{

        transform:none;

        filter:

            drop-shadow(0 22px 54px rgba(0,0,0,.50))

            drop-shadow(0 0 34px rgba(217,181,106,.14));

    }

}


/*==================================================
Safe Area Support
==================================================*/

@supports (padding:max(0px)){

    .screen{

        padding-left:max(22px,env(safe-area-inset-left));

        padding-right:max(22px,env(safe-area-inset-right));

        padding-top:max(140px,env(safe-area-inset-top));

        padding-bottom:max(40px,env(safe-area-inset-bottom));

    }

}