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

CTM PATH™ Guided Journey v6.0

File
css/screens/screen01.css

Purpose
Screen 01 — The Invitation™

Responsibility
• Premium opening experience
• SVG Logo positioning
• Hero composition
• Tamil-first typography
• Emotional connection
• CTA presentation
• Responsive behaviour

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


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


#screen01{

    min-height:100vh;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

}





/*==================================================
Background Atmosphere

CTM PATH™ Infinity Mastery Identity

Midnight Navy + Gold Light + Subtle Teal

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


#screen01::before{

    content:"";

    position:absolute;

    inset:0;


    background:


        radial-gradient(

            circle at 50% 18%,

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

            transparent 28%

        ),



        radial-gradient(

            circle at 50% 32%,

            rgba(0,194,184,.08),

            transparent 40%

        ),



        radial-gradient(

            circle at center,

            rgba(6,21,47,.45),

            transparent 70%

        );



    pointer-events:none;

}





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


#screen01 .container{


    width:100%;


    max-width:1200px;


    margin:0 auto;



    padding:


        50px 40px;



    position:relative;


    z-index:2;



}





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


#screen01 .hero{


    width:100%;


    max-width:850px;


    margin:0 auto;



    padding-top:30px;



    display:flex;


    flex-direction:column;



    align-items:center;


    justify-content:center;



    text-align:center;



}

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

CTM PATH™ Infinity Mastery Transparent Brand Mark

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


#screen01 .hero-logo{


    width:


        300px;



    height:


        auto;



    display:


        block;



    margin:


        0 auto 42px;



    object-fit:


        contain;



    position:


        relative;



    z-index:


        5;



    opacity:


        1;



    visibility:


        visible;



    background:


        transparent;



    filter:


        drop-shadow(

            0 25px 55px rgba(0,0,0,.55)

        )

        drop-shadow(

            0 0 45px rgba(217,181,106,.18)

        );



    transition:


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



}







/*==================================================
Logo Hover Micro Interaction

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


#screen01 .hero-logo:hover{


    transform:


        translateY(-5px);



}








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


#screen01 .screen-caption{


    font-size:


        .85rem;



    letter-spacing:


        .25em;



    text-transform:


        uppercase;



    color:


        rgba(255,255,255,.55);



    margin-bottom:


        25px;



}








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

CTM PATH™ Signature Gold Line

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


#screen01 .gold-divider{


    width:


        120px;



    height:


        2px;



    margin:


        0 auto 45px;



    background:


        linear-gradient(

            90deg,

            transparent,

            var(--color-gold),

            transparent

        );



}








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

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


#screen01 .gold-divider.small{


    width:


        90px;



    margin:


        35px auto;



}








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

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


#screen01 .welcome-block{


    width:


        100%;



    margin:


        0 auto 30px;



}








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

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


#screen01 .tamil-welcome{


    font-family:


        var(--font-tamil),

        sans-serif;



    font-size:


        clamp(

            2.2rem,

            4vw,

            3.6rem

        );



    font-weight:


        700;



    line-height:


        1.5;



    color:


        var(--color-white);



}








/*==================================================
English Welcome Heading

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


#screen01 .english-welcome{


    margin-top:


        14px;



    font-family:


        var(--font-english),

        sans-serif;



    font-size:


        clamp(

            1.1rem,

            2vw,

            1.45rem

        );



    color:


        var(--color-gold);



    font-weight:


        500;



}

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

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


#screen01 .introduction-block{


    display:


        flex;



    flex-direction:


        column;



    align-items:


        center;



    justify-content:


        center;



    gap:


        30px;



}








/*==================================================
Tamil Introduction

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


#screen01 .tamil-intro{


    font-family:


        var(--font-tamil),

        sans-serif;



    font-size:


        1.45rem;



    font-weight:


        600;



    line-height:


        2;



    color:


        rgba(255,255,255,.95);



}








/*==================================================
Raphael Name Highlight

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


#screen01 .hero-name{


    color:


        var(--color-ivory);



    font-weight:


        700;



}








/*==================================================
Gold Text

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


#screen01 .text-gold{


    color:


        var(--color-gold);



}








/*==================================================
English Introduction

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


#screen01 .introduction-block .english{


    font-family:


        var(--font-english),

        sans-serif;



    font-size:


        1.15rem;



    line-height:


        1.8;



    color:


        rgba(255,255,255,.80);



}








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

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


#screen01 .cta-block{


    width:


        100%;



    display:


        flex;



    justify-content:


        center;



    align-items:


        center;



    margin-top:


        30px;



}








/*==================================================
CTA Button

CTM PATH™ Premium Journey Invitation

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


#screen01 .btn-primary{


    min-width:


        260px;



    padding:


        18px 42px;



    border-radius:


        var(--radius-button);



    background:


        linear-gradient(

            135deg,

            #18A66D,

            #125D41

        );



    color:


        white;



    box-shadow:


        0 20px 50px rgba(24,166,109,.30);



    display:


        flex;



    flex-direction:


        column;



    align-items:


        center;



    justify-content:


        center;



    gap:


        6px;



    cursor:


        pointer;



    transition:


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



}








/*==================================================
CTA Hover

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


#screen01 .btn-primary:hover{


    transform:


        translateY(-6px);



    box-shadow:


        0 30px 70px rgba(24,166,109,.45);



}








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

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


#screen01 .btn-title{


    font-family:


        var(--font-tamil),

        sans-serif;



    font-size:


        1.35rem;



    font-weight:


        700;



    line-height:


        1.4;



}








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

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


#screen01 .btn-subtitle{


    font-family:


        var(--font-english),

        sans-serif;



    font-size:


        .95rem;



    opacity:


        .85;



    letter-spacing:


        .04em;



}

/*==================================================
Shimmer Animation

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


#screen01 .shimmer{


    position:


        relative;



    overflow:


        hidden;



}





#screen01 .shimmer::before{


    content:"";



    position:


        absolute;



    top:


        0;



    left:


        -120%;



    width:


        60%;



    height:


        100%;



    background:


        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );



    transform:


        skewX(-20deg);



    animation:


        shimmerMove 4s infinite;



}





@keyframes shimmerMove{


    0%{


        left:


            -120%;


    }



    25%,100%{


        left:


            150%;


    }


}







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

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


#screen01 .fade-up{


    animation:


        screenFadeUp .9s var(--ease-premium);



}





@keyframes screenFadeUp{


    from{


        opacity:


            0;



        transform:


            translateY(40px);



    }



    to{


        opacity:


            1;



        transform:


            translateY(0);



    }


}








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

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


@media(min-width:1200px){



    #screen01 .hero{


        padding-top:


            20px;


    }





    #screen01 .hero-logo{


        width:


            330px;



        margin-bottom:


            50px;



    }



}








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

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


@media(max-width:900px){



    #screen01 .container{


        padding:


            40px 24px;



    }





    #screen01 .hero-logo{


        width:


            250px;



        margin-bottom:


            35px;



    }





    #screen01 .tamil-welcome{


        font-size:


            2.4rem;



    }





    #screen01 .tamil-intro{


        font-size:


            1.35rem;



    }





    #screen01 .btn-primary{


        min-width:


            240px;



        padding:


            16px 34px;



    }


}








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

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


@media(max-width:600px){



    #screen01{


        align-items:


            flex-start;



        padding-top:


            30px;



    }





    #screen01 .container{


        padding:


            25px 20px 50px;



    }





    #screen01 .hero{


        max-width:


            100%;



        padding-top:


            10px;



    }






    /*
    Transparent SVG Logo

    Mobile Optimization

    */


    #screen01 .hero-logo{


        width:


            210px;



        margin:


            0 auto 30px;



        filter:


            drop-shadow(

                0 18px 35px rgba(0,0,0,.65)

            )

            drop-shadow(

                0 0 35px rgba(217,181,106,.20)

            );



    }





    #screen01 .tamil-welcome{


        font-size:


            2rem;



        line-height:


            1.45;



    }





    #screen01 .english-welcome{


        font-size:


            1rem;



    }





    #screen01 .gold-divider{


        width:


            80px;



        margin-bottom:


            30px;



    }





    #screen01 .tamil-intro{


        font-size:


            1.15rem;



        line-height:


            1.9;



    }





    #screen01 .introduction-block .english{


        font-size:


            1rem;



        line-height:


            1.7;



    }





    #screen01 .btn-primary{


        width:


            90%;



        max-width:


            300px;



        padding:


            15px 25px;



    }





    #screen01 .btn-title{


        font-size:


            1.15rem;



    }





    #screen01 .btn-subtitle{


        font-size:


            .85rem;



    }



}








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

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


@media(max-width:380px){



    #screen01 .hero-logo{


        width:


            180px;



    }





    #screen01 .tamil-welcome{


        font-size:


            1.75rem;



    }





    #screen01 .tamil-intro{


        font-size:


            1.05rem;



    }



}








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

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


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



    #screen01 .fade-up,


    #screen01 .shimmer::before{


        animation:


            none;



    }





    #screen01 .btn-primary,


    #screen01 .hero-logo{


        transition:


            none;



    }



}