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

CTM PATH™ Guided Journey v6.2

File
css/screens/screen02.css

Purpose
Screen 02 — THE SIX MINUTES™

Responsibility
• Premium emotional transition
• Uniform Hero
• Uniform Navigator
• Responsive behaviour

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



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

#screen02{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    isolation:isolate;

}



/*==================================================
Premium Background
==================================================*/

#screen02::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 50% 12%,

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

            transparent 24%

        ),

        radial-gradient(

            circle at 50% 36%,

            rgba(214,181,108,.08),

            transparent 42%

        ),

        radial-gradient(

            circle at center,

            rgba(5,18,42,.38),

            transparent 74%

        );

}



#screen02::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.015),

            transparent 20%,

            transparent 80%,

            rgba(0,0,0,.18)

        );

}



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

#screen02 .container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:

        64px
        48px
        72px;

}



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

Same Premium Layout
as Screen 01

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

#screen02 .hero{

    width:100%;

    max-width:760px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}



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

Only Illustration Changes

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

#screen02 .hero-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin:

        0
        auto
        56px;

}



#screen02 .hero-logo{

    display:block;

    width:260px;

    height:auto;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    filter:

        drop-shadow(
            0 28px 70px rgba(0,0,0,.48)
        )

        drop-shadow(
            0 0 52px rgba(214,181,108,.14)
        )

        drop-shadow(
            0 0 110px rgba(24,166,109,.08)
        );

    transition:

        transform .4s ease,

        filter .4s ease;

}



#screen02 .hero-logo:hover{

    transform:

        translateY(-3px)
        scale(1.01);

    filter:

        drop-shadow(
            0 32px 82px rgba(0,0,0,.50)
        )

        drop-shadow(
            0 0 60px rgba(214,181,108,.18)
        )

        drop-shadow(
            0 0 120px rgba(24,166,109,.10)
        );

}

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

Same Premium Hero
as Screen 01

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

#screen02 .welcome-block{

    width:100%;

    max-width:620px;

    margin:

        0
        auto
        40px;

}



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

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

#screen02 .tamil-welcome{

    margin:0;

    font-family:

        var(--font-tamil);

    font-size:

        clamp(
            2.45rem,
            4vw,
            3.90rem
        );

    font-weight:700;

    line-height:1.42;

    letter-spacing:-.01em;

    color:var(--color-white);

    text-wrap:balance;

}



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

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

#screen02 .english-welcome{

    margin-top:18px;

    font-family:

        var(--font-english);

    font-size:

        clamp(
            1rem,
            1.6vw,
            1.20rem
        );

    font-weight:500;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:

        rgba(255,255,255,.72);

}



/*==================================================
Premium Divider

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

#screen02 .gold-divider{

    position:relative;

    width:180px;

    height:1px;

    margin:

        0
        auto
        56px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(214,181,108,.28),

            var(--color-gold),

            rgba(214,181,108,.28),

            transparent

        );

}



#screen02 .gold-divider::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:8px;

    height:8px;

    border-radius:50%;

    transform:

        translate(-50%,-50%);

    background:

        var(--color-gold);

    box-shadow:

        0 0 12px rgba(214,181,108,.40);

}



#screen02 .gold-divider.small{

    width:130px;

    margin:

        48px
        auto;

}



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

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

#screen02 .introduction-block{

    width:100%;

    max-width:660px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:36px;

}



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

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

#screen02 .tamil-intro{

    margin:0;

    font-family:

        var(--font-tamil);

    font-size:

        clamp(
            1.35rem,
            2vw,
            1.55rem
        );

    font-weight:500;

    line-height:2.05;

    letter-spacing:-.01em;

    color:

        rgba(255,255,255,.96);

}



/*==================================================
Gold Highlight

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

#screen02 .text-gold{

    color:

        var(--color-gold);

    font-weight:600;

}



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

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

#screen02 .introduction-block .english{

    max-width:540px;

    margin:0;

    font-family:

        var(--font-english);

    font-size:

        clamp(
            1.05rem,
            1.5vw,
            1.15rem
        );

    font-weight:400;

    line-height:2;

    letter-spacing:.02em;

    color:

        rgba(255,255,255,.78);

}

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

Uniform Across All 36 Screens

Only these change:

• Tamil CTA
• English CTA
• data-next-screen
• aria-label

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

#screen02 .cta-block{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:56px;

}



#screen02 .journey-next{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

    padding:0;

    margin:0 auto;

    background:none;

    border:none;

    cursor:pointer;

    user-select:none;

    text-align:center;

    transition:

        transform .35s ease,

        filter .35s ease;

}



/*==================================================
Navigator Divider
==================================================*/

#screen02 .nav-decoration{

    position:relative;

    display:block;

    width:160px;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(214,181,108,.30),

            var(--color-gold),

            rgba(214,181,108,.30),

            transparent

        );

}



#screen02 .nav-decoration::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:6px;

    height:6px;

    border-radius:50%;

    transform:

        translate(-50%,-50%);

    background:

        var(--color-gold);

    box-shadow:

        0 0 10px rgba(214,181,108,.45);

}



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

#screen02 .nav-tamil{

    font-family:

        var(--font-tamil);

    font-size:1.42rem;

    font-weight:700;

    line-height:1.35;

    letter-spacing:.02em;

    color:

        var(--color-gold);

}



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

#screen02 .nav-arrows{

    font-size:1.35rem;

    line-height:1;

    letter-spacing:10px;

    color:

        var(--color-gold);

}



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

#screen02 .nav-english{

    font-family:

        var(--font-english);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.38em;

    text-transform:uppercase;

    color:

        var(--color-gold);

}



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

#screen02 .journey-next:hover{

    transform:

        translateY(-3px);

    filter:

        drop-shadow(

            0 0 18px rgba(214,181,108,.20)

        );

}



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

    width:175px;

}



#screen02 .journey-next:hover .nav-arrows{

    letter-spacing:12px;

}



#screen02 .journey-next:focus-visible{

    outline:none;

}

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

#screen02 .fade-up{

    animation:

        screen02FadeUp

        .90s

        ease-out;

}



@keyframes screen02FadeUp{

    from{

        opacity:0;

        transform:

            translateY(24px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}



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

@media (min-width:1200px){

    #screen02 .container{

        max-width:1320px;

    }



    #screen02 .hero{

        max-width:760px;

    }



    #screen02 .hero-logo{

        width:290px;

    }



    #screen02 .tamil-welcome{

        font-size:4rem;

    }



    #screen02 .tamil-intro{

        font-size:1.65rem;

    }

}



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

@media (max-width:992px){

    #screen02 .container{

        padding:

            56px

            32px

            64px;

    }



    #screen02 .hero-logo{

        width:230px;

    }



    #screen02 .hero-icon{

        margin-bottom:44px;

    }



    #screen02 .welcome-block{

        margin-bottom:34px;

    }



    #screen02 .gold-divider{

        margin-bottom:44px;

    }



    #screen02 .gold-divider.small{

        margin-top:40px;

        margin-bottom:40px;

    }



    #screen02 .cta-block{

        margin-top:44px;

    }

}

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

@media (max-width:600px){

    #screen02 .container{

        padding:

            40px

            24px

            56px;

    }



    #screen02 .hero{

        max-width:100%;

    }



    #screen02 .hero-icon{

        margin-bottom:36px;

    }



    #screen02 .hero-logo{

        width:190px;

    }



    #screen02 .welcome-block{

        margin-bottom:28px;

    }



    #screen02 .tamil-welcome{

        font-size:2.20rem;

        line-height:1.40;

    }



    #screen02 .english-welcome{

        margin-top:14px;

        font-size:.92rem;

        letter-spacing:.22em;

    }



    #screen02 .gold-divider{

        width:150px;

        margin-bottom:36px;

    }



    #screen02 .gold-divider.small{

        width:110px;

        margin-top:36px;

        margin-bottom:36px;

    }



    #screen02 .introduction-block{

        gap:24px;

    }



    #screen02 .tamil-intro{

        font-size:1.18rem;

        line-height:1.90;

    }



    #screen02 .introduction-block .english{

        font-size:.98rem;

        line-height:1.80;

    }



    #screen02 .nav-decoration{

        width:120px;

    }



    #screen02 .nav-tamil{

        font-size:1.18rem;

    }



    #screen02 .nav-arrows{

        font-size:1.10rem;

        letter-spacing:6px;

    }



    #screen02 .nav-english{

        font-size:.70rem;

        letter-spacing:.28em;

    }



    #screen02 .cta-block{

        margin-top:40px;

    }

}



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

@media (max-width:380px){

    #screen02 .container{

        padding:

            32px

            18px

            48px;

    }



    #screen02 .hero-logo{

        width:170px;

    }



    #screen02 .tamil-welcome{

        font-size:1.90rem;

    }



    #screen02 .tamil-intro{

        font-size:1.05rem;

    }



    #screen02 .introduction-block .english{

        font-size:.90rem;

    }



    #screen02 .nav-decoration{

        width:100px;

    }



    #screen02 .nav-tamil{

        font-size:1.05rem;

    }



    #screen02 .nav-arrows{

        letter-spacing:5px;

    }



    #screen02 .nav-english{

        font-size:.65rem;

    }

}



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

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

    #screen02 .fade-up,

    #screen02 .journey-next,

    #screen02 .hero-logo{

        animation:none;

        transition:none;

    }

}



/*==================================================
END OF FILE

CTM PATH™ Guided Journey v6.2

Screen 02 — THE SIX MINUTES™

Status

✓ Uniform Premium Hero
✓ Uniform Premium Navigator
✓ Responsive
✓ Matches Screen 01 Design Language
✓ Ready for Freeze

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