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

CTM PATH™ Guided Journey v6.0

File
css/screens/screen03.css

Screen
03 — THE DISCOVERY™

Purpose
Self discovery transition

Responsibility
• Screen 03 layout
• Discovery light symbol
• Tamil-first typography
• Emotional pacing
• Premium transitions
• Premium Journey Navigator

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





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

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


#screen03{


    width:100%;


    min-height:100vh;


    display:flex;


    align-items:center;


    justify-content:center;



    position:relative;


    overflow:hidden;



}








/*==================================================
Ambient Background Enhancement

Aligned with Screen 01 and Screen 02

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


#screen03::before{


    content:"";


    position:absolute;


    inset:0;





    background:



        radial-gradient(

            circle at 50% 20%,

            rgba(24,166,109,.18),

            transparent 35%

        ),





        radial-gradient(

            circle at 50% 35%,

            rgba(217,181,106,.12),

            transparent 30%

        ),





        linear-gradient(

            180deg,

            #03152F 0%,

            #061D38 48%,

            #020D20 100%

        );





    pointer-events:none;



}









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

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


#screen03 .container{


    width:100%;


    max-width:1200px;



    padding:


        50px 40px;



}









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

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


.screen03-hero{


    width:100%;



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    text-align:center;





    position:relative;



    z-index:2;



}









/*==================================================
Discovery Light Symbol

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


.screen03-symbol{


    width:


        250px;



    margin-bottom:


        35px;



    animation:


        discoveryFloat 6s ease-in-out infinite;



}









.screen03-symbol img{


    width:100%;



    height:auto;



    display:block;



    filter:


        drop-shadow(

            0 25px 55px rgba(217,181,106,.30)

        )

        drop-shadow(

            0 0 40px rgba(24,166,109,.20)

        );



}









@keyframes discoveryFloat{


    0%,100%{


        transform:


            translateY(0);



    }



    50%{


        transform:


            translateY(-10px);



    }



}









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

Centre Alignment Control

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


.screen03-tamil{


    width:100%;



    display:flex;



    flex-direction:column;



    align-items:center;



    text-align:center;



}








/*==================================================
Tamil Heading

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


.screen03-tamil h1{


    width:100%;


    font-family:


        "Noto Sans Tamil",


        "Latha",


        sans-serif;



    font-size:


        3rem;



    line-height:


        1.6;



    font-weight:


        700;



    color:


        var(--color-white);



    margin-bottom:


        55px;



}

/*==================================================
Tamil Message

Primary Emotional Content

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


.screen03-tamil p{


    width:100%;



    font-family:


        "Noto Sans Tamil",


        sans-serif;



    font-size:


        1.6rem;



    line-height:


        2.35;



    font-weight:


        500;



    color:


        rgba(246,241,231,.96);



}









/*==================================================
English Translation

Supporting Message

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


.screen03-english{


    margin-top:


        45px;



}









.screen03-english p{


    font-family:


        "Inter",


        sans-serif;



    font-size:


        1.35rem;



    line-height:


        2;



    font-weight:


        500;



    color:


        rgba(246,241,231,.88);



}









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

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


#screen03 .gold-divider{


    width:


        90px;



    height:


        2px;



    margin:


        45px auto;



    background:


        linear-gradient(


            90deg,


            transparent,


            var(--color-gold),


            transparent


        );



}









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

CTM PATH™ Standard Component

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


#screen03 .journey-next{


    background:


        transparent;



    border:


        none;



    padding:


        0;



    cursor:


        pointer;



    display:


        flex;



    flex-direction:


        column;



    align-items:


        center;



    justify-content:


        center;



    gap:


        14px;



    color:


        var(--color-gold);



    transition:


        all .45s var(--ease-premium);



}









/*==================================================
Golden Decorative Lines

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


#screen03 .nav-decoration{


    width:


        120px;



    height:


        1px;



    background:


        var(--color-gold);



    opacity:


        .85;



}









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

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


#screen03 .nav-tamil{


    font-family:


        "Noto Sans Tamil",


        sans-serif;



    font-size:


        1.45rem;



    font-weight:


        700;



    color:


        var(--color-gold);



    letter-spacing:


        .05em;



}









/*==================================================
Three Right Arrows

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


#screen03 .nav-arrows{


    font-size:


        1.5rem;



    letter-spacing:


        8px;



    color:


        var(--color-gold);



    line-height:


        1;



    animation:


        screen03Arrow 2s ease-in-out infinite;



}









@keyframes screen03Arrow{


    0%,100%{


        transform:


            translateY(0);



        opacity:


            .7;



    }



    50%{


        transform:


            translateY(8px);



        opacity:


            1;



    }



}

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

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


#screen03 .nav-english{


    font-family:


        "Inter",


        sans-serif;



    font-size:


        .9rem;



    font-weight:


        500;



    letter-spacing:


        5px;



    text-transform:


        uppercase;



    color:


        var(--color-gold);



}









/*==================================================
Navigator Hover

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


#screen03 .journey-next:hover{


    transform:


        translateY(-5px);



}



#screen03 .journey-next:hover .nav-decoration{


    opacity:


        1;



}









/*==================================================
Focus Accessibility

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


#screen03 .journey-next:focus{


    outline:


        none;



}









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

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


@media(max-width:900px){



    #screen03 .container{


        padding:


            40px 30px;



    }








    .screen03-symbol{


        width:


            210px;



    }








    .screen03-tamil h1{


        font-size:


            2.5rem;



        margin-bottom:


            45px;



    }








    .screen03-tamil p{


        font-size:


            1.35rem;



        line-height:


            2.25;



    }








    .screen03-english{


        margin-top:


            40px;



    }








    .screen03-english p{


        font-size:


            1.2rem;



    }





    #screen03 .nav-decoration{


        width:


            100px;



    }





    #screen03 .nav-tamil{


        font-size:


            1.3rem;



    }





    #screen03 .nav-arrows{


        font-size:


            1.35rem;



    }





    #screen03 .nav-english{


        font-size:


            .85rem;



        letter-spacing:


            4px;



    }



}









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

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


@media(max-width:600px){



    #screen03{


        align-items:


            flex-start;



        padding-top:


            20px;



    }








    #screen03 .container{


        padding:


            30px 22px 50px;



    }








    .screen03-symbol{


        width:


            165px;



        margin-bottom:


            30px;



    }








    .screen03-tamil h1{


        font-size:


            2rem;



        line-height:


            1.5;



        margin-bottom:


            35px;



    }








    .screen03-tamil p{


        max-width:


            320px;



        font-size:


            1.15rem;



        line-height:


            2.1;



    }








    .screen03-english{


        margin-top:


            35px;



    }








    .screen03-english p{


        max-width:


            300px;



        font-size:


            1rem;



        line-height:


            2;



        letter-spacing:


            .02em;



    }








    #screen03 .gold-divider{


        margin:


            40px auto 30px;



    }








    #screen03 .journey-next{


        gap:


            12px;



    }








    #screen03 .nav-decoration{


        width:


            85px;



    }








    #screen03 .nav-tamil{


        font-size:


            1.2rem;



    }








    #screen03 .nav-arrows{


        font-size:


            1.25rem;



        letter-spacing:


            6px;



    }








    #screen03 .nav-english{


        font-size:


            .75rem;



        letter-spacing:


            4px;



    }



}









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

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


@media(max-width:380px){



    .screen03-symbol{


        width:


            145px;



    }








    .screen03-tamil h1{


        font-size:


            1.8rem;



    }








    .screen03-tamil p{


        font-size:


            1.05rem;



    }








    .screen03-english p{


        font-size:


            .95rem;



    }



}









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

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


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



    .screen03-symbol,


    .screen03 .nav-arrows{


        animation:


            none;



    }








    #screen03 .journey-next{


        transition:


            none;



    }



}