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

CTM PATH™ Guided Journey v6.0

SCREEN 06 — YOUR JOURNEY™

File:
screen06.css

Purpose:
Screen 06 Visual Styling

Design:
Premium CTM PATH™ Navigator Standard

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


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

.screen06 {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(32,213,199,0.08),
            transparent 55%
        ),
        #081C3A;

}





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

.screen06 .screen-content {

    position: relative;

    z-index: 2;

    width: min(90%,650px);

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}





/*==================================================
Illustration
==================================================*/

.screen06 .screen-image {

    width: 220px;

    height: auto;

    margin-bottom: 25px;

}





/*==================================================
Visitor Identity
==================================================*/

.screen06 .personal-greeting {

    color: #E3C47A;

    font-family:
        "Playfair Display",
        "Noto Sans Tamil",
        serif;

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

    font-weight: 600;

    letter-spacing: 0.08em;

    margin-bottom: 18px;

    text-transform: capitalize;

    text-shadow:
        0 0 18px rgba(214,181,108,0.35);

}





/*==================================================
Tamil Title
==================================================*/

.screen06 .screen-title {

    color: #FFF8E7;

    font-family:
        "Noto Sans Tamil",
        sans-serif;

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

    line-height: 1.45;

    font-weight: 700;

    margin: 0;

}





/*==================================================
English Subtitle
==================================================*/

.screen06 .screen-subtitle {

    margin-top: 15px;

    color: #D6B56C;

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.85rem;

    letter-spacing: 0.22em;

    text-transform: uppercase;

}





/*==================================================
Messages
==================================================*/

.screen06 .screen-message {

    margin-top: 35px;

}

.screen06 .screen-message.tamil {

    color: #FFF8E7;

    font-family:
        "Noto Sans Tamil",
        sans-serif;

    font-size: 1.1rem;

    line-height: 2;

}

.screen06 .screen-message.english {

    color: rgba(255,248,231,0.72);

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.9rem;

    line-height: 1.8;

}





/*==================================================
Premium Navigator
==================================================*/

.screen06 .journey-next {

    margin-top: 48px;

    background: none;

    border: none;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: all .30s ease;

}

.screen06 .journey-next:hover {

    transform: translateY(-2px);

}





/*==================================================
Navigator Decoration
==================================================*/

.screen06 .nav-decoration {

    width: 240px;

    display: flex;

    align-items: center;

}

.screen06 .nav-decoration::before,
.screen06 .nav-decoration::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #D6B56C;

    opacity: .55;

}





/*==================================================
Navigator Tamil
==================================================*/

.screen06 .nav-tamil {

    margin-top: 18px;

    color: #D6B56C;

    font-family:
        "Noto Sans Tamil",
        sans-serif;

    font-size: 1.35rem;

    font-weight: 700;

}





/*==================================================
Navigator Arrows
==================================================*/

.screen06 .nav-arrows {

    margin: 12px 0;

    color: #D6B56C;

    font-size: 1.15rem;

    letter-spacing: .40em;

}





/*==================================================
Navigator English
==================================================*/

.screen06 .nav-english {

    color: #D6B56C;

    font-family:
        "Inter",
        sans-serif;

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: .25em;

    text-transform: uppercase;

}





/*==================================================
Bottom Gold Divider
Below "BEGIN JOURNEY"
==================================================*/

.screen06 .navigator-gold-line {

    display: block;

    width: 240px;

    height: 2px;

    margin-top: 18px;

    border-radius: 2px;

    background: #D6B56C;

    box-shadow:
        0 0 10px rgba(214,181,108,.35);

}





/*==================================================
Responsive
==================================================*/

@media (max-width:600px) {

    .screen06 .screen-image {

        width: 170px;

    }

    .screen06 .personal-greeting {

        font-size: 1.8rem;

    }

    .screen06 .screen-message.tamil {

        font-size: 1rem;

    }

    .screen06 .nav-decoration,
    .screen06 .navigator-gold-line {

        width: 200px;

    }

}